BUILD A COMPLETE PRODUCTION-READY FITNESS SUBSCRIPTION WEBSITE PROJECT: FitForge TAGLINE: “Train Smarter. Get Stronger. Become Your Best.” Build FitForge as a real, production-ready fitness SaaS, NOT a static UI mockup. Users must discover workouts, follow programs, track progress, access general nutrition education, and subscribe to Premium. TECH STACK Next.js 15+, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion, Lucide Icons, Next.js API/server actions, PostgreSQL + Prisma, secure authentication with email/password + Google OAuth + email verification + password reset, Stripe subscriptions, Resend email, cloud storage and Vercel deployment. Store all secrets in environment variables. DESIGN Create a premium athletic SaaS design: modern, clean, professional, motivational and mobile-first. Dark theme by default with optional light mode. Use near-black backgrounds, energetic green primary color, white text, charcoal cards, subtle borders, limited gradients, rounded cards, glass effects, shadows, smooth animations, progress bars, skeleton loaders and toast notifications. Keep the interface clean and uncluttered. PUBLIC PAGES / — Hero headline “Your Fitness Journey Starts Here.” Subheadline about personalized workouts, progress tracking, nutrition and expert programs. CTAs: “Start Free” and “Explore Programs”. Add fitness visual/video, statistics, features, how-it-works, popular programs, clearly marked demo testimonials, pricing, FAQ and final CTA. /programs — Searchable/filterable program library by goal, difficulty, duration, equipment and training type. Cards show image, name, difficulty, duration, workout count, goal, description and Free/Premium badge. /programs/[slug] — Full program details, trainer, schedule, equipment, target areas and workouts. Allow users to start programs and save completed workouts. /workouts — Search/filter by muscle group, difficulty, equipment, duration, calories and workout type. /workouts/[slug] — Workout video, trainer, duration, difficulty, equipment, target muscles, calories and exercise list. Exercises include sets, reps, rest and instructions. Add Start, Pause, Next, Previous, Rest Timer and Complete Workout. Save completion and show a completion summary. /trainers — Demo trainer profiles and trainer detail pages. /nutrition — General educational content covering protein, carbohydrates, healthy fats, hydration, meal planning, balanced eating and pre/post-workout nutrition. /recipes — Recipe library with image, ingredients, instructions, preparation time, tags and optional nutrition information. /pricing, /community, /faq, /contact, /privacy, /terms, /cookie-policy, /disclaimer. AUTHENTICATION + ONBOARDING Create login, signup, forgot-password, reset-password and email-verification pages. Signup fields: name, email, password and confirmation. After signup, run onboarding asking: * Primary goal * Experience level * Training location * Available equipment * Training days per week * Workout duration * Preferred workout style Goals: strength, muscle building, fitness, mobility and general wellness. Generate a personalized dashboard from onboarding data. Do not provide medical diagnosis or treatment. USER DASHBOARD /dashboard must show “Good morning, [Name]”, today’s workout, weekly goal, streak, completed workouts, training minutes, progress chart, weekly calendar, recent/recommended workouts and quick actions. Desktop sidebar: Dashboard, Workouts, Programs, Progress, Goals, Nutrition, Recipes, Community, Settings. Mobile bottom navigation: Home, Workouts, Programs, Progress, Profile. Premium-locked features must show a professional upgrade modal. PROGRESS + GOALS /progress tracks weight, workout completion, training time, personal records, measurements and private progress photos. Add charts for trends, workout frequency, training minutes and program completion. /goals allows users to create goals with target, current progress, percentage, deadline and completion status. Progress photos must remain private unless the user explicitly chooses to share them. SUBSCRIPTIONS FREE: Limited workouts/programs, basic tracking and dashboard. PREMIUM: $19.99/month — full workout library, all programs, personalized plans, advanced tracking, nutrition content, workout history and premium features. ANNUAL: $149.99/year — all Premium features with annual billing. Prices must be configurable through database/environment settings. Implement real Stripe Checkout, Customer Portal and webhook handling for checkout completion, subscription creation/update/deletion and successful/failed invoices. Store Stripe customer ID, subscription ID, status, plan, billing period and trial status. Premium access must depend on actual subscription status. Never expose Stripe secret keys. ACCOUNT /settings must include profile, fitness preferences, subscription/billing, renewal date, notifications, password/security, logout-all-sessions, data export and account deletion. ADMIN /admin requires admin authorization. Dashboard shows total users, active users, Premium subscribers, revenue, growth, workout completions and cancellations. Admin CRUD: * Users * Workouts * Exercises * Programs * Recipes * Nutrition articles * Trainers * FAQs * Testimonials Include community moderation, reporting and blocking. DATABASE Use Prisma models: User, Profile, Subscription, Workout, Exercise, WorkoutExercise, Program, ProgramWeek, ProgramWorkout, WorkoutCompletion, ProgressEntry, ProgressPhoto, Goal, Recipe, NutritionArticle, Trainer, Post, Comment, Like, Notification, FAQ and Testimonial. Use proper relationships, primary keys, foreign keys, indexes, createdAt and updatedAt fields. EXERCISE DATABASE Fields: name, description, instructions, target muscles, equipment, difficulty, video, image, sets, reps and rest. Categories: chest, back, shoulders, arms, legs, glutes, core, full body, cardio and mobility. COMMUNITY + SEARCH + NOTIFICATIONS Community supports posts, likes, comments, follows, reports, blocking and admin moderation. Global search covers workouts, programs, exercises, recipes, articles and trainers. Notifications support workout reminders, milestones, completed goals, subscription updates, new programs and community activity. Support both in-app and email notifications. SECURITY Implement secure password hashing, authentication, authorization, admin protection, API validation, rate limiting where appropriate, CSRF protection where applicable, input sanitization, secure file uploads, Stripe webhook signature verification and database access control. Never expose passwords, private user information, API keys or secret keys. SEO + PERFORMANCE + ACCESSIBILITY Implement SEO metadata, Open Graph, X cards, sitemap, robots.txt, canonical URLs and structured data. Optimize images, videos, lazy loading, database queries, caching, pagination and SSR where useful. Use semantic HTML, keyboard navigation, accessible labels, focus states, alt text, ARIA where needed and good color contrast. LEGAL Create Privacy, Terms, Cookie Policy and Disclaimer pages. Include: “Fitness content is provided for general educational and informational purposes. Users should consider their individual circumstances and consult a qualified professional when appropriate.” Nutrition content must clearly state it is general education and not medical advice. EMAIL SYSTEM Create reusable templates for: Welcome, email verification, password reset, subscription confirmation, payment receipt, payment failure, cancellation, workout reminder and goal achievement. DEMO DATA Seed: 20 workouts, 10 programs, 50 exercises, 15 recipes, 10 nutrition articles, 5 trainers, 10 FAQs and 6 demo testimonials. Clearly separate demo data from production data. QUALITY REQUIREMENTS Every major button and form must perform a real action. Authentication, database operations, workout completion, progress saving, subscriptions, Stripe webhooks, Premium protection and Admin CRUD must work. Add loading, success, error, empty, 404 and 500 states. Use reusable modular components. If third-party services are not configured, create clean integration layers and safe demo/mock data so the application still runs locally. ENVIRONMENT VARIABLES Create .env.example containing: DATABASE_URL= NEXTAUTH_SECRET= GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= STRIPE_SECRET_KEY= STRIPE_PUBLISHABLE_KEY= STRIPE_WEBHOOK_SECRET= STRIPE_MONTHLY_PRICE_ID= STRIPE_YEARLY_PRICE_ID= RESEND_API_KEY= NEXT_PUBLIC_APP_URL= STORAGE_URL= STORAGE_ACCESS_KEY= STORAGE_SECRET_KEY= README Create a complete README covering installation, features, tech stack, environment variables, Prisma/database setup, seed data, Stripe setup/webhooks, Google OAuth, email setup, development commands, Vercel deployment and security. FINAL INSTRUCTION Generate the complete FitForge application end-to-end. Do NOT stop after the homepage and do NOT create only mockups. Build the complete project structure, database, authentication, public pages, onboarding, dashboard, workout/program systems, progress tracking, nutrition, recipes, community, subscriptions, Stripe integration, admin dashboard, seed data, responsive UI, SEO, legal pages and README with fully connected frontend and backend functionality.
Sign in to leave a comment
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!