Tony Foster Band

Tony Foster Band needed a professional web presence that would automatically stay updated with their latest gigs, photos, and social media activity without manual content management.

The Challenge

Musicians and bands face a common problem: maintaining a website with current event dates, new photos, and updates requires constant manual work. With busy performance schedules, keeping a website fresh often falls by the wayside. The band needed a site that would update itself from their existing social media presence.

📘

The Musician's Dilemma

Most band websites become outdated quickly because musicians are busy performing, not updating web content. By pulling data directly from Facebook, the site stays current automatically.

The Solution

We built a Next.js 16 application that integrates with the Facebook Meta API to automatically fetch and display:

Upcoming Events: Real gig dates pulled directly from Facebook Events
Photo Gallery: Latest band photos from Facebook albums
Social Posts: Recent updates and announcements from the band's page

Facebook Meta API Integration

The site uses the Facebook Graph API to fetch live data from the band's Facebook page. Events, photos, and posts are fetched server-side and cached appropriately to ensure fast page loads while keeping content fresh.

💎

API Caching Strategy

Data from Facebook is cached with appropriate TTLs - events are refreshed more frequently than photos to ensure upcoming gigs are always accurate while reducing API calls.

Dynamic Event Display

Upcoming gigs are displayed with full event details including venue information, dates, times, and ticket links. Past events are automatically archived, keeping the homepage focused on what's coming up.

🚀

Automatic Content

Once connected to the Facebook page, the website requires zero maintenance for event listings, photos, and posts - everything updates automatically when the band posts to Facebook.

Rich UI Components

The site features a polished UI with 14+ Radix UI components providing accessible, keyboard-navigable interactions:

Photo Carousel: Embla Carousel for smooth, touch-friendly image galleries
Event Calendar: react-day-picker for browsing past and future events
Data Visualization: Recharts for engagement statistics
Contact Forms: React Hook Form with Zod validation

Technical Stack

Framework: Next.js 16 with App Router and React 19
Styling: Tailwind CSS 4 with Tailwind Animate for smooth transitions
Components: 14+ Radix UI primitives for accessible UI
Carousel: Embla Carousel for photo galleries
Charts: Recharts for data visualization
Forms: React Hook Form with Zod validation
Email: Resend for contact form and booking inquiries
Date Handling: date-fns and react-day-picker

📘

Accessibility First

Using Radix UI primitives ensures all interactive elements are fully accessible, including proper keyboard navigation and screen reader support.

Results

Zero-maintenance event listings via Facebook integration
Automatic photo gallery updates from Facebook albums
Professional booking inquiry form with email notifications
Mobile-responsive design for fans on any device
Accessible UI with full keyboard navigation
Fast page loads with server-side data fetching