FertiliTEA Website

A modern podcast website for FertiliTEA with Dr. D - Real Talk on Fertility, Family Building, and Reproductive Health.

• 🎙️ Podcast RSS feed integration with custom audio player
• 🔍 Episode search and topic filtering
• 📝 Blog powered by Sanity CMS
• 💌 Newsletter integration with Buttondown
• 📊 Analytics with Supabase
• 🎨 Fully responsive design
• ⚡ Built with Next.js 15 and TypeScript

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• CMS: Sanity
• Database: Supabase
• Newsletter: Buttondown
• Deployment: Vercel

• Node.js 18+ installed
• npm or yarn package manager
• Sanity account (free tier)
• Supabase account (free tier)
• Buttondown account ($9/mo)

1. Clone the repository:

git clone <your-repo-url>
cd FertiliTEA

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.local.example .env.local

Edit .env.local and add your credentials:

# Sanity CMS
NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id_here
NEXT_PUBLIC_SANITY_DATASET=production

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here

# Buttondown
BUTTONDOWN_API_KEY=your_buttondown_api_key_here

# Analytics (Optional)
NEXT_PUBLIC_GA_ID=your_google_analytics_id_here

1. Create a new Sanity project:

cd sanity
npm create sanity@latest

2. Follow the prompts to create your project

3. Copy your project ID and add it to .env.local

4. Deploy Sanity Studio:

npm run dev

5. Access Sanity Studio at: http://localhost:3000/studio

1. Create a new project at supabase.com

2. Run the SQL schema from supabase-schema.sql in the SQL Editor:

   • Go to SQL Editor in your Supabase dashboard
   • Copy the contents of supabase-schema.sql
   • Run the query

3. Get your project URL and anon key from Settings > API

4. Add them to .env.local

1. Create an account at buttondown.email

2. Go to Settings > Programming

3. Copy your API key

4. Add it to .env.local

Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

├── app/                  # Next.js app directory
│   ├── api/             # API routes
│   ├── blog/            # Blog pages
│   ├── studio/          # Sanity Studio
│   └── page.tsx         # Home page
├── components/          # React components
│   ├── ui/             # shadcn/ui components
│   └── ...             # Custom components
├── lib/                # Utility functions
├── sanity/             # Sanity configuration
│   ├── schemas/        # Content schemas
│   └── lib/            # Sanity client
├── img/                # Static images
└── public/             # Public assets

1. Push your code to GitHub

2. Import your repository on Vercel

3. Add your environment variables in the Vercel dashboard

4. Deploy!

The Sanity Studio is embedded at /studio and will be deployed with your Next.js app.

1. Go to /studio in your browser
2. Click "Blog Post"
3. Fill in the title, content, and other fields
4. Publish

1. Go to /studio
2. Click "Testimonial"
3. Add new testimonials with ratings and text
4. Mark as "Featured" to show in the carousel

1. Go to /studio
2. Click "Topic"
3. Add topics with custom colors for filter pills

• Hero: Podcast introduction with platform links
• AudioPlayer: Custom audio player with controls
• EpisodesSection: Dynamic episode grid with search
• SearchFilter: Search bar and topic filter pills
• SubmitSection: Listener question submission form
• NewsletterSection: Email signup with Buttondown
• TestimonialsCarousel: Auto-playing testimonial carousel

• /api/submit-question: Handle listener question submissions
• /api/newsletter-subscribe: Handle newsletter subscriptions

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

Copyright © 2025 FertiliTEA with Dr. D. All rights reserved.

For questions or issues, contact: fertiliteawithdrd@gmail.com