VM Fitness Hub - Coaching & E-commerce Website

Welcome to the GitHub repository for the VM Fitness Hub, a modern, feature-rich website for a fitness coach. This application is built with a powerful stack including Next.js, Firebase, MongoDB, Shopify, and Stripe, and features an advanced AI content generation engine using Google's Genkit.

✨ Features

• Coaching Programs & Digital Products: Displays and manages coaching plans and digital goods (like PDFs) pulled directly from a Shopify store.
• Advanced Sales Funnel:
  • Lead Magnet: Captures leads by offering a free guide.
  • Tripwire Offer: Presents a low-cost, high-value offer immediately after a lead subscribes, converting free leads into paying customers instantly.
• Stripe Integration: Secure payment processing for digital products and tripwire offers via Stripe Checkout.
• Hybrid Blog System (Manual & AI):
  • Manual Posts via Shopify: The coach can write, edit, and publish articles directly from her Shopify dashboard, giving her full control.
  • AI-Generated Posts: A fully autonomous system uses a Vercel Cron Job to trigger an AI agent once a week. The agent writes a new, SEO-friendly blog post and saves it to a MongoDB database.
  • Unified Frontend: The Next.js frontend fetches posts from both Shopify and MongoDB and displays them in a single, cohesive blog, prioritizing manual posts.
• AI-Powered Workout Generator: Creates custom workout plans based on user input and optionally captures their email as a lead.
• Resilient Multi-Database Strategy:
  • Shopify: The single source of truth for products/programs and manually-written blog posts.
  • MongoDB: The storage for AI-generated blog posts and client testimonials. If the connection fails, the site gracefully falls back to sample data.
  • Firebase Firestore: Acts as a real-time CRM to capture leads, coaching plan signups, and application logs for diagnostics.
• Modern UX:
  • Fully responsive design built with Tailwind CSS and ShadCN UI.
  • Smooth scrolling, a "back-to-top" button, and instant visual feedback on forms.
• Admin Tools:
  • /troubleshoot: A system status page to quickly diagnose connection issues with all external services (Firebase, MongoDB, Shopify).
  • /admin/leads: An admin-only page to view captured leads directly from the website.

---

🚀 Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS & ShadCN UI
• AI Engine: Google Genkit (with Gemini via Vertex AI)
• Databases & Content:
  • Shopify Storefront API (for products & manual blog posts)
  • MongoDB (for AI-generated blog posts & testimonials)
  • Firebase Firestore (for leads/signups/logs)
• Payments: Stripe
• Deployment & Automation: Vercel (including Vercel Cron Jobs)

---

🛠️ Getting Started

Follow these instructions to get a local copy of the project up and running.

Prerequisites

• Node.js (v20.x or later)
• npm or yarn

1. Clone the Repository

git clone https://github.com/your-username/vm-fitness-hub.git
cd vm-fitness-hub

2. Install Dependencies

npm install

3. Set Up Environment Variables

Create a file named .env in the root of your project and add the variables listed below. These should also be configured in your hosting provider (e.g., Vercel).

Running in Demo Mode: The application is designed to be resilient. If you do not provide MONGODB_URI or the Shopify variables, the relevant sections of the site will automatically use sample fallback data, allowing you to run and test the application without connecting to all external services.

Important: Enabling AI Features The AI features (Workout Generator, AI Blog Posts) require access to Google's AI APIs. For these to work, you must enable billing on the associated Google Cloud project (vm-fitness-hub) and provide a GEMINI_API_KEY. While usage will likely fall within the free tier, billing is a platform requirement for API access.

# MongoDB Connection (for AI posts & testimonials)
# Example: mongodb+srv://<user>:<password>@<cluster-url>/<db-name>?retryWrites=true&w=majority
MONGODB_URI=

# Firebase (for Firestore leads & logs)
# The complete JSON content of your Firebase service account key, as a single-line string.
FIREBASE_SERVICE_ACCOUNT_KEY=

# Google AI (Genkit)
# This key is required for Genkit to authenticate with Google's AI services.
GEMINI_API_KEY=

# Stripe (for payments)
STRIPE_SECRET_KEY=

# Shopify Storefront API (for reading products & manual blog posts)
# Your Shopify store domain (e.g., your-store.myshopify.com)
SHOPIFY_STORE_DOMAIN=
# Your public Storefront API access token
SHOPIFY_STOREFRONT_ACCESS_TOKEN=

# Cron Job Security
# A long, random, secure string to protect your cron job endpoint
CRON_SECRET=

# Application URL (for Stripe Checkout redirects)
NEXT_PUBLIC_APP_URL=http://localhost:9002

4. Seed the Database (Optional)

If you have connected a MongoDB database, you can populate it with initial sample data for testimonials.

npm run seed

This will connect to your database, clear the testimonials collection, and insert the sample data from seed.js.

5. Run the Development Server

npm run dev

The application should now be running on http://localhost:9002.

---

📜 Available Scripts

• npm run dev: Starts the development server.
• npm run build: Creates a production-ready build of the application.
• npm run start: Starts the production server.
• npm run lint: Lints the codebase for potential errors.
• npm run seed: Populates the database with initial testimonial data.

---

☁️ Deployment

This application is optimized for deployment on Vercel.

1. Connect your GitHub repository to a Vercel project.
2. Configure the environment variables as listed in the .env section in the Vercel project settings.
3. Vercel will automatically build and deploy the application on every push to the main branch.

Enabling Automatic Blog Posts

To enable the weekly automatic blog post generation, you must create a file named vercel.json in the root of your project with the following content:

{
  "crons": [
    {
      "path": "/api/cron/generate-post?secret=YOUR_CRON_SECRET_HERE",
      "schedule": "0 10 * * 1"
    }
  ]
}

Remember to replace YOUR_CRON_SECRET_HERE with the same value you used in your environment variables.