fitness-subscription

byBIPUL KRPANDEY

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.

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

Page 1 of 33

System Requirements Document for fitness-subscription

1. Introduction

FitForge is a production-ready fitness subscription SaaS delivered as a real, fully connected web application — not a static UI mockup. Its product intent is to let everyday athletes discover workouts, follow structured programs, track progress and goals, read general nutrition education, participate in a community, and subscribe to Premium for the full catalog and advanced features.

The tagline is "Train Smarter. Get Stronger. Become Your Best."

The audience is a mass-market, mobile-first set of everyday athletes (roughly 18–45) who train at home or in a commercial gym and want motivation, momentum, and a visible sense of progression. The product must feel like a reward rather than a punishment: energising, pleasurable, and premium.

FitForge is explicitly not a medical product. It does not provide medical diagnosis or treatment, and all nutrition content is general education, not medical advice.

Page 2 of 33

2. System Overview

FitForge is a Next.js 15+ application with TypeScript, Tailwind CSS, shadcn/ui, Framer Motion, and Lucide Icons on the front end, backed by Next.js API routes/server actions, PostgreSQL via Prisma, secure authentication (email/password + Google OAuth + email verification + password reset), Stripe subscriptions, Resend email, cloud storage, and Vercel deployment. All secrets live in environment variables.

Current delivery includes:

  • Public discovery surfaces: landing page, program library and detail, workout library and detail, trainers, nutrition, recipes, pricing, community, FAQ, contact, and legal pages.
  • Identity and onboarding: signup, login, email verification, forgot/reset password, and a post-signup onboarding questionnaire that generates a personalized dashboard.
  • Member surfaces: personalized dashboard, progress tracking, goals, settings, and community participation.
  • Subscription surfaces: Free, Premium ($19.99/month), and Annual ($149.99/year) with real Stripe Checkout, Customer Portal, and webhook handling.
  • Admin surface: an admin-authorized dashboard with operational metrics, CRUD across nine content/entity types, and community moderation, reporting, and blocking.
  • Supporting systems: global search, in-app and email notifications, reusable email templates, seeded demo data clearly separated from production data, SEO metadata, performance optimization, accessibility, and legal pages.

Actors: Fitness Member (Free), Premium Subscriber, Administrator, and Community Participant. Stripe, Resend, Google OAuth, and cloud storage are external providers, not personas.

Narrow exclusions: no medical diagnosis or treatment; no exposure of passwords, private user information, API keys, or secret keys; no exposure of Stripe secret keys; progress photos remain private unless the user explicitly chooses to share them.

Page 3 of 33

2a. Product Interpretation and Delivery Boundary

FitForge is delivered as a first-party application with application-owned identity. Visitors can browse public discovery surfaces anonymously. Self-service enrollment happens through signup (email/password or Google OAuth), followed by email verification and onboarding. Returning members verify through login. Protected member surfaces (dashboard, progress, goals, settings, community) require an established, verified identity. The admin surface requires admin authorization.

Subscription billing is provider-owned: Stripe Checkout, the Stripe Customer Portal, and Stripe webhooks handle checkout completion, subscription creation/update/deletion, and successful/failed invoices. FitForge stores the Stripe customer ID, subscription ID, status, plan, billing period, and trial status, and Premium access depends on actual subscription status synchronized from verified webhooks. Stripe secret keys are never exposed to the client.

Email delivery is provider-owned through Resend, using reusable templates. Cloud storage is provider-owned for uploaded media. If third-party services are not configured, clean integration layers and safe demo/mock data keep the application running locally.

All current requirements are in scope for this generation. No future-horizon features are defined in the authoritative source.

2b. Source Content Inventory

Not applicable — no reference directive declares content_source.

2c. Page Content and Component Coverage

Page 4 of 33

/

  • Information/state: Hero headline "Your Fitness Journey Starts Here."; subheadline about personalized workouts, progress tracking, nutrition, and expert programs; fitness visual/video; statistics; features; how-it-works; popular programs; clearly marked demo testimonials; pricing; FAQ; final CTA.
  • Primary actions: "Start Free" CTA; "Explore Programs" CTA; final CTA.
  • Supporting actions: navigate to pricing, FAQ, popular programs, testimonials.
  • Domain entities: Program, Testimonial, FAQ, Subscription plan pricing.
  • Component responsibilities: hero with headline, subheadline, dual CTAs, and fitness visual/video; statistics strip; features grid; how-it-works steps; popular programs carousel/grid; demo testimonials block clearly marked as demo; pricing summary; FAQ accordion; final CTA band.
  • States: loading (skeleton loaders for programs/testimonials/FAQ), empty (fallback when no popular programs or testimonials), success (content rendered), error (inline error with retry), recovery (retry fetch).

signup

  • Information/state: signup form with fields name, email, password, and confirmation; Google OAuth option.
  • Primary actions: submit signup; continue with Google.
  • Supporting actions: navigate to login; navigate to terms/privacy.
  • Domain entities: User, Profile.
  • Component responsibilities: form with validation, password/confirmation match check, OAuth button, error display, toast notifications.
  • States: loading (submit in progress), empty (initial form), success (account created → email verification/onboarding), error (validation or server error with inline messages), recovery (retry submit).

login

  • Information/state: login form (email/password); Google OAuth option; links to forgot-password and signup.
  • Primary actions: submit login; continue with Google.
  • Supporting actions: navigate to forgot-password; navigate to signup.
  • Domain entities: User.
  • Component responsibilities: credential form, OAuth button, error display, toast notifications.
  • States: loading, empty (initial form), success (redirect to dashboard), error (invalid credentials with inline message), recovery (retry).
Page 5 of 33

email-verification

  • Information/state: verification status; resend option; instructions.
  • Primary actions: verify email via token link; resend verification email.
  • Supporting actions: navigate to login.
  • Domain entities: User.
  • Component responsibilities: token handling, status display, resend control, toast notifications.
  • States: loading (verifying), empty (awaiting verification), success (verified → onboarding/login), error (invalid/expired token with resend), recovery (resend).

forgot-password

  • Information/state: email input form.
  • Primary actions: submit email to request reset.
  • Supporting actions: navigate to login.
  • Domain entities: User.
  • Component responsibilities: email form, confirmation message, toast notifications.
  • States: loading, empty (initial form), success (confirmation that reset email was sent), error (invalid email/server error), recovery (retry).

reset-password

  • Information/state: new password and confirmation fields; reset token context.
  • Primary actions: submit new password.
  • Supporting actions: navigate to login.
  • Domain entities: User.
  • Component responsibilities: password form with validation, token handling, toast notifications.
  • States: loading, empty (initial form), success (password reset → login), error (invalid/expired token or validation error), recovery (request new reset link).
Page 6 of 33

Onboarding

  • Information/state: questionnaire asking primary goal, experience level, training location, available equipment, training days per week, workout duration, and preferred workout style. Goals: strength, muscle building, fitness, mobility, and general wellness.
  • Primary actions: answer each question; submit onboarding.
  • Supporting actions: navigate back/forward between steps.
  • Domain entities: Profile, User.
  • Component responsibilities: step form, option selectors, progress indicator, validation, toast notifications.
  • States: loading (saving), empty (initial step), success (personalized dashboard generated), error (save failure with retry), recovery (retry save).

/dashboard

  • Information/state: "Good morning, [Name]"; today's workout; weekly goal; streak; completed workouts; training minutes; progress chart; weekly calendar; recent/recommended workouts; quick actions.
  • Primary actions: start today's workout; quick actions; open recommended/recent workouts.
  • Supporting actions: navigate to progress, goals, programs, workouts.
  • Domain entities: Workout, WorkoutCompletion, Goal, ProgressEntry, Program.
  • Component responsibilities: greeting header; today's workout card; weekly goal progress bar; streak display; completed workouts and training minutes tiles; progress chart; weekly calendar; recent/recommended workout list; quick actions; upgrade modal for Premium-locked features.
  • States: loading (skeleton loaders), empty (no completions/recommendations yet), success (personalized data rendered), error (inline error with retry), recovery (retry fetch).

/programs

  • Information/state: 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.
  • Primary actions: search; apply filters; open program detail.
  • Supporting actions: clear filters; paginate.
  • Domain entities: Program, Trainer.
  • Component responsibilities: search input; filter controls; program card grid; Free/Premium badge; pagination; skeleton loaders.
  • States: loading (skeleton loaders), empty (no matching programs), success (results rendered), error (inline error with retry), recovery (retry/clear filters).
Page 7 of 33

/programs/[slug]

  • Information/state: full program details, trainer, schedule, equipment, target areas, and workouts.
  • Primary actions: start program; save completed workouts.
  • Supporting actions: navigate to trainer; navigate to individual workouts; upgrade modal for Premium-locked programs.
  • Domain entities: Program, ProgramWeek, ProgramWorkout, Workout, Trainer, WorkoutCompletion.
  • Component responsibilities: program header with image and Free/Premium badge; trainer block; schedule; equipment list; target areas; workout list; start program control; save completion control; upgrade modal.
  • States: loading (skeleton loaders), empty (no workouts in program), success (details rendered), error (not found or fetch error with retry), recovery (retry/navigate back).

/workouts

  • Information/state: search/filter by muscle group, difficulty, equipment, duration, calories, and workout type.
  • Primary actions: search; apply filters; open workout detail.
  • Supporting actions: clear filters; paginate.
  • Domain entities: Workout, Exercise.
  • Component responsibilities: search input; filter controls; workout card grid; pagination; skeleton loaders.
  • States: loading (skeleton loaders), empty (no matching workouts), success (results rendered), error (inline error with retry), recovery (retry/clear filters).

/workouts/[slug]

  • Information/state: workout video, trainer, duration, difficulty, equipment, target muscles, calories, and exercise list; exercises include sets, reps, rest, and instructions.
  • Primary actions: Start; Pause; Next; Previous; Rest Timer; Complete Workout.
  • Supporting actions: save completion; view completion summary; upgrade modal for Premium-locked workouts.
  • Domain entities: Workout, Exercise, WorkoutExercise, WorkoutCompletion, Trainer.
  • Component responsibilities: video player; workout metadata; exercise list with sets/reps/rest/instructions; playback controls (Start, Pause, Next, Previous); Rest Timer; Complete Workout control; completion summary; upgrade modal.
  • States: loading (skeleton loaders), empty (no exercises), success (workout executed and completion saved with summary), error (video/fetch error with retry), recovery (retry).
Page 8 of 33

Search

  • Information/state: global search results across workouts, programs, exercises, recipes, articles, and trainers.
  • Primary actions: enter query; open a result.
  • Supporting actions: filter by result type; paginate.
  • Domain entities: Workout, Program, Exercise, Recipe, NutritionArticle, Trainer.
  • Component responsibilities: search input; result grouping by type; result cards; pagination; skeleton loaders.
  • States: loading (skeleton loaders), empty (no results), success (grouped results rendered), error (inline error with retry), recovery (retry/refine query).

/progress

  • Information/state: weight, workout completion, training time, personal records, measurements, and private progress photos; charts for trends, workout frequency, training minutes, and program completion.
  • Primary actions: add/edit progress entry; upload progress photo; view charts.
  • Supporting actions: toggle photo sharing (private by default); navigate to goals.
  • Domain entities: ProgressEntry, ProgressPhoto, WorkoutCompletion, Goal.
  • Component responsibilities: entry form; measurement fields; photo upload with private-by-default state and explicit share control; trend chart; workout frequency chart; training minutes chart; program completion chart; personal records list.
  • States: loading (skeleton loaders), empty (no entries/photos yet), success (data and charts rendered), error (upload/save error with retry), recovery (retry).

/goals

  • Information/state: goals with target, current progress, percentage, deadline, and completion status.
  • Primary actions: create goal; update progress; mark complete.
  • Supporting actions: edit/delete goal; navigate to progress.
  • Domain entities: Goal, ProgressEntry.
  • Component responsibilities: goal creation form; goal cards with target, current progress, percentage, deadline, and completion status; progress bars; toast notifications.
  • States: loading (skeleton loaders), empty (no goals yet), success (goals rendered with progress), error (save error with retry), recovery (retry).
Page 9 of 33

/nutrition

  • Information/state: general educational content covering protein, carbohydrates, healthy fats, hydration, meal planning, balanced eating, and pre/post-workout nutrition; clear statement that content is general education and not medical advice.
  • Primary actions: read articles; navigate to related recipes.
  • Supporting actions: search/filter articles.
  • Domain entities: NutritionArticle.
  • Component responsibilities: article list/grid; article detail view; educational disclaimer banner; search/filter controls.
  • States: loading (skeleton loaders), empty (no articles), success (content rendered), error (fetch error with retry), recovery (retry).

/recipes

  • Information/state: recipe library with image, ingredients, instructions, preparation time, tags, and optional nutrition information.
  • Primary actions: browse recipes; open recipe detail.
  • Supporting actions: search/filter by tags; paginate.
  • Domain entities: Recipe.
  • Component responsibilities: recipe card grid with image, preparation time, and tags; recipe detail with ingredients, instructions, and optional nutrition information; search/filter controls; pagination.
  • States: loading (skeleton loaders), empty (no recipes), success (recipes rendered), error (fetch error with retry), recovery (retry).

/trainers

  • Information/state: demo trainer profiles and trainer detail pages.
  • Primary actions: browse trainers; open trainer detail.
  • Supporting actions: navigate to related programs.
  • Domain entities: Trainer, Program.
  • Component responsibilities: trainer profile cards; trainer detail with bio and associated programs; demo data labeling.
  • States: loading (skeleton loaders), empty (no trainers), success (profiles rendered), error (fetch error with retry), recovery (retry).
Page 10 of 33

/community

  • Information/state: posts, likes, comments, follows, reports, and blocking.
  • Primary actions: create post; like; comment; follow; report; block.
  • Supporting actions: navigate to member profiles; view notifications.
  • Domain entities: Post, Comment, Like, Notification, User.
  • Component responsibilities: post composer; post feed; like/comment controls; follow control; report control; block control; notification indicators; toast notifications.
  • States: loading (skeleton loaders), empty (no posts yet), success (feed rendered), error (post/action error with retry), recovery (retry).

/pricing

  • Information/state: Free, Premium ($19.99/month), and Annual ($149.99/year) plans with feature comparison; prices configurable through database/environment settings.
  • Primary actions: upgrade to Premium; upgrade to Annual; manage billing via Stripe Customer Portal.
  • Supporting actions: navigate to FAQ; navigate to signup.
  • Domain entities: Subscription, plan pricing.
  • Component responsibilities: plan comparison cards; upgrade CTAs; Stripe Checkout entry; Customer Portal link; upgrade modal.
  • States: loading (skeleton loaders), empty (pricing unavailable), success (plans rendered), error (checkout error with retry), recovery (retry).

/settings

  • Information/state: profile, fitness preferences, subscription/billing, renewal date, notifications, password/security, logout-all-sessions, data export, and account deletion.
  • Primary actions: edit profile; edit fitness preferences; manage subscription/billing; configure notifications; change password; logout all sessions; export data; delete account.
  • Supporting actions: navigate to Stripe Customer Portal.
  • Domain entities: User, Profile, Subscription, Notification.
  • Component responsibilities: profile form; fitness preferences form; subscription/billing panel with renewal date; notification settings; password/security form; logout-all-sessions control; data export control; account deletion control with confirmation; toast notifications.
  • States: loading (skeleton loaders), empty (initial forms), success (settings saved with toast), error (save error with retry), recovery (retry).
Page 11 of 33

/admin

  • Information/state: total users, active users, Premium subscribers, revenue, growth, workout completions, and cancellations; CRUD for users, workouts, exercises, programs, recipes, nutrition articles, trainers, FAQs, and testimonials; community moderation, reporting, and blocking.
  • Primary actions: view metrics; create/edit/delete each entity type; moderate community content; review reports; block users.
  • Supporting actions: filter/sort lists; paginate.
  • Domain entities: User, Workout, Exercise, Program, Recipe, NutritionArticle, Trainer, FAQ, Testimonial, Post, Comment, Subscription.
  • Component responsibilities: metrics dashboard; CRUD tables/forms per entity; moderation queue; report review; block control; pagination; skeleton loaders.
  • States: loading (skeleton loaders), empty (no records), success (data and CRUD rendered), error (fetch/save error with retry), recovery (retry).

/faq

  • Information/state: public answers to common FitForge questions.
  • Primary actions: expand/collapse FAQ items.
  • Supporting actions: navigate to contact.
  • Domain entities: FAQ.
  • Component responsibilities: FAQ accordion; search/filter.
  • States: loading (skeleton loaders), empty (no FAQs), success (FAQs rendered), error (fetch error with retry), recovery (retry).

/contact

  • Information/state: public contact form for FitForge inquiries.
  • Primary actions: submit contact form.
  • Supporting actions: navigate to FAQ.
  • Domain entities: none (contact submission).
  • Component responsibilities: contact form with validation; confirmation message; toast notifications.
  • States: loading (submit in progress), empty (initial form), success (confirmation), error (validation/server error with retry), recovery (retry).
Page 12 of 33

/privacy

  • Information/state: public privacy policy content.
  • Primary actions: read policy.
  • Supporting actions: navigate to other legal pages.
  • Domain entities: none.
  • Component responsibilities: static legal content with semantic HTML.
  • States: success (content rendered); error (404/500 handling).

/terms

  • Information/state: public terms and conditions content.
  • Primary actions: read terms.
  • Supporting actions: navigate to other legal pages.
  • Domain entities: none.
  • Component responsibilities: static legal content with semantic HTML.
  • States: success (content rendered); error (404/500 handling).

/cookie-policy

  • Information/state: public cookie policy content.
  • Primary actions: read policy.
  • Supporting actions: navigate to other legal pages.
  • Domain entities: none.
  • Component responsibilities: static legal content with semantic HTML.
  • States: success (content rendered); error (404/500 handling).
Page 13 of 33

/disclaimer

  • Information/state: public fitness and nutrition disclaimer content, including "Fitness content is provided for general educational and informational purposes. Users should consider their individual circumstances and consult a qualified professional when appropriate."
  • Primary actions: read disclaimer.
  • Supporting actions: navigate to other legal pages.
  • Domain entities: none.
  • Component responsibilities: static legal content with semantic HTML.
  • States: success (content rendered); error (404/500 handling).
Page 14 of 33

3. Functional Requirements

FR-01 — Production-ready fitness SaaS (explicit) As a visitor, I should experience FitForge as a real, production-ready fitness SaaS with fully connected frontend and backend functionality, not a static UI mockup.

  • Trigger: visiting the application.
  • Observable result: real data operations, authentication, subscriptions, and admin CRUD function end-to-end.
  • Failure/recovery: loading, success, error, empty, 404, and 500 states are provided.
  • Continuation: users proceed to discovery, signup, or subscription.

FR-02 — Tech stack (explicit) As a developer, I should build FitForge on 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, with all secrets stored in environment variables.

  • Observable result: the stack is used consistently across the application.
  • Constraint: secrets are never exposed.

FR-03 — Premium athletic design (explicit) As a visitor, I should see a premium athletic SaaS design that is modern, clean, professional, motivational, and mobile-first, with a dark theme by default and optional light mode, 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, kept clean and uncluttered.

  • Observable result: the interface matches the described visual language.

FR-04 — Landing page (explicit) As a visitor, I should see the landing page at / with the hero headline "Your Fitness Journey Starts Here.", a subheadline about personalized workouts, progress tracking, nutrition, and expert programs, CTAs "Start Free" and "Explore Programs", a fitness visual/video, statistics, features, how-it-works, popular programs, clearly marked demo testimonials, pricing, FAQ, and a final CTA.

  • Primary actions: "Start Free"; "Explore Programs".
  • Observable result: all listed sections render.

FR-05 — Program library (explicit) As a visitor, I should search and filter the program library at /programs by goal, difficulty, duration, equipment, and training type, with cards showing image, name, difficulty, duration, workout count, goal, description, and Free/Premium badge.

  • Observable result: filtered results render with all card fields.

FR-06 — Program detail (explicit) As a visitor or member, I should view full program details at /programs/[slug] including trainer, schedule, equipment, target areas, and workouts, and I should be able to start programs and save completed workouts.

  • Primary actions: start program; save completed workout.
  • Observable result: program started; completion saved.

FR-07 — Workout library (explicit) As a visitor, I should search and filter workouts at /workouts by muscle group, difficulty, equipment, duration, calories, and workout type.

  • Observable result: filtered results render.

FR-08 — Workout detail and execution (explicit) As a member, I should view a workout at /workouts/[slug] with video, trainer, duration, difficulty, equipment, target muscles, calories, and exercise list, where exercises include sets, reps, rest, and instructions, and I should use Start, Pause, Next, Previous, Rest Timer, and Complete Workout, with completion saved and a completion summary shown.

  • Primary actions: Start; Pause; Next; Previous; Rest Timer; Complete Workout.
  • Observable result: completion saved; summary displayed.
  • Failure/recovery: video/fetch error with retry.

FR-09 — Trainers (explicit) As a visitor, I should browse demo trainer profiles at /trainers and view trainer detail pages.

  • Observable result: trainer profiles and details render.

FR-10 — Nutrition education (explicit) As a visitor, I should read general educational content at /nutrition covering protein, carbohydrates, healthy fats, hydration, meal planning, balanced eating, and pre/post-workout nutrition.

  • Constraint: content must clearly state it is general education and not medical advice.

FR-11 — Recipes (explicit) As a visitor, I should browse a recipe library at /recipes with image, ingredients, instructions, preparation time, tags, and optional nutrition information.

  • Observable result: recipe cards and details render.

FR-12 — Public pages (explicit) As a visitor, I should access /pricing, /community, /faq, /contact, /privacy, /terms, /cookie-policy, and /disclaimer.

  • Observable result: each page renders its content.

FR-13 — Authentication pages (explicit) As a visitor, I should use login, signup, forgot-password, reset-password, and email-verification pages, with signup fields name, email, password, and confirmation.

  • Observable result: account created; email verified; password reset works.

FR-14 — Onboarding (explicit) As a new member, after signup I should complete onboarding asking primary goal, experience level, training location, available equipment, training days per week, workout duration, and preferred workout style, with goals strength, muscle building, fitness, mobility, and general wellness, and a personalized dashboard generated from onboarding data.

  • Observable result: personalized dashboard generated.
  • Constraint: no medical diagnosis or treatment.

FR-15 — User dashboard (explicit) As a member, I should see at /dashboard "Good morning, [Name]", today's workout, weekly goal, streak, completed workouts, training minutes, progress chart, weekly calendar, recent/recommended workouts, and quick actions.

  • Observable result: personalized dashboard renders.

FR-16 — Navigation (explicit) As a member, I should see a desktop sidebar with Dashboard, Workouts, Programs, Progress, Goals, Nutrition, Recipes, Community, and Settings, and a mobile bottom navigation with Home, Workouts, Programs, Progress, and Profile.

  • Observable result: navigation renders per viewport.

FR-17 — Premium upgrade modal (explicit) As a member, when I encounter a Premium-locked feature I should see a professional upgrade modal.

  • Observable result: modal displayed with upgrade path.

FR-18 — Progress tracking (explicit) As a member, I should track at /progress weight, workout completion, training time, personal records, measurements, and private progress photos, with charts for trends, workout frequency, training minutes, and program completion.

  • Constraint: progress photos remain private unless the user explicitly chooses to share them.
  • Observable result: entries and charts render.

FR-19 — Goals (explicit) As a member, I should create goals at /goals with target, current progress, percentage, deadline, and completion status.

  • Observable result: goals render with progress.

FR-20 — Free tier (explicit) As a member, I should access limited workouts/programs, basic tracking, and dashboard on the Free tier.

  • Observable result: Free-tier access enforced.

FR-21 — Premium tier (explicit) As a member, I should subscribe to Premium at $19.99/month for the full workout library, all programs, personalized plans, advanced tracking, nutrition content, workout history, and premium features.

  • Observable result: Premium access granted on active subscription.

FR-22 — Annual tier (explicit) As a member, I should subscribe to Annual at $149.99/year for all Premium features with annual billing.

  • Observable result: Annual access granted on active subscription.

FR-23 — Configurable prices (explicit) As an administrator, I should have prices configurable through database/environment settings.

  • Observable result: price changes reflect without code changes.

FR-24 — Stripe integration (explicit) As a member, I should complete real Stripe Checkout, manage billing through the Stripe Customer Portal, and have webhook handling for checkout completion, subscription creation/update/deletion, and successful/failed invoices, with Stripe customer ID, subscription ID, status, plan, billing period, and trial status stored, and Premium access depending on actual subscription status.

  • Constraint: never expose Stripe secret keys.
  • Observable result: subscription state synchronized; Premium access reflects actual status.

FR-25 — Account settings (explicit) As a member, I should manage at /settings profile, fitness preferences, subscription/billing, renewal date, notifications, password/security, logout-all-sessions, data export, and account deletion.

  • Observable result: each setting saves and takes effect.

FR-26 — Admin dashboard (explicit) As an administrator, I should access /admin with admin authorization, viewing total users, active users, Premium subscribers, revenue, growth, workout completions, and cancellations.

  • Constraint: /admin requires admin authorization.
  • Observable result: metrics render.

FR-27 — Admin CRUD (explicit) As an administrator, I should perform CRUD on users, workouts, exercises, programs, recipes, nutrition articles, trainers, FAQs, and testimonials.

  • Observable result: records created, updated, deleted.

FR-28 — Community moderation (explicit) As an administrator, I should perform community moderation, reporting, and blocking.

  • Observable result: content moderated; users blocked.

FR-29 — Prisma models (explicit) As a developer, I should 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 with proper relationships, primary keys, foreign keys, indexes, createdAt, and updatedAt fields.

  • Observable result: schema supports all features.

FR-30 — Exercise database (explicit) As a developer, I should store exercises with name, description, instructions, target muscles, equipment, difficulty, video, image, sets, reps, and rest, with categories chest, back, shoulders, arms, legs, glutes, core, full body, cardio, and mobility.

  • Observable result: exercises categorized and queryable.

FR-31 — Community features (explicit) As a member, I should create posts, like, comment, follow, report, and block in the community, with admin moderation.

  • Observable result: community interactions persist.

FR-32 — Global search (explicit) As a visitor or member, I should search globally across workouts, programs, exercises, recipes, articles, and trainers.

  • Observable result: grouped results render.

FR-33 — Notifications (explicit) As a member, I should receive notifications for workout reminders, milestones, completed goals, subscription updates, new programs, and community activity, both in-app and by email.

  • Observable result: notifications delivered in-app and via email.

FR-34 — Security (explicit) As a system owner, I should 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.

  • Constraint: never expose passwords, private user information, API keys, or secret keys.

FR-35 — SEO, performance, accessibility (explicit) As a visitor, I should benefit from SEO metadata, Open Graph, X cards, sitemap, robots.txt, canonical URLs, and structured data; optimized images, videos, lazy loading, database queries, caching, pagination, and SSR where useful; and semantic HTML, keyboard navigation, accessible labels, focus states, alt text, ARIA where needed, and good color contrast.

  • Observable result: pages are discoverable, fast, and accessible.

FR-36 — Legal pages (explicit) As a visitor, I should read Privacy, Terms, Cookie Policy, and Disclaimer pages, including "Fitness content is provided for general educational and informational purposes. Users should consider their individual circumstances and consult a qualified professional when appropriate."

  • Observable result: legal content renders.

FR-37 — Email templates (explicit) As a member, I should receive reusable email templates for Welcome, email verification, password reset, subscription confirmation, payment receipt, payment failure, cancellation, workout reminder, and goal achievement.

  • Observable result: emails sent via Resend.

FR-38 — Demo data (explicit) As a developer, I should seed 20 workouts, 10 programs, 50 exercises, 15 recipes, 10 nutrition articles, 5 trainers, 10 FAQs, and 6 demo testimonials, clearly separated from production data.

  • Observable result: demo data seeded and labeled.

FR-39 — Quality requirements (explicit) As a user, I should have every major button and form perform a real action, with authentication, database operations, workout completion, progress saving, subscriptions, Stripe webhooks, Premium protection, and Admin CRUD working, plus loading, success, error, empty, 404, and 500 states and reusable modular components.

  • Observable result: all interactions function.

FR-40 — Local fallback (explicit) As a developer, if third-party services are not configured, I should have clean integration layers and safe demo/mock data so the application still runs locally.

  • Observable result: app runs without external services.

FR-41 — Environment variables (explicit) As a developer, I should have a .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, and STORAGE_SECRET_KEY.

  • Observable result: .env.example present with all variables.

FR-42 — README (explicit) As a developer, I should have 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.

  • Observable result: README present and complete.

FR-43 — Self-service enrollment (required_inference) As a visitor, I should self-enroll through signup to independently start my FitForge journey.

  • Observable result: account created and identity established.

FR-44 — Returning verification (required_inference) As a returning member, community participant, Premium subscriber, or administrator, I should verify through login to resume my work.

  • Observable result: session established.

FR-45 — Email verification before activation (required_inference) As a new member, I should verify my email before my account is fully activated.

  • Observable result: account activated after verification.

FR-46 — Onboarding before dashboard (required_inference) As a new member, I should complete onboarding before my personalized dashboard is generated.

  • Observable result: dashboard personalized from onboarding data.

FR-47 — Admin authorization (required_inference) As an administrator, I should pass admin authorization before accessing /admin.

  • Observable result: unauthorized access denied.

FR-48 — Webhook synchronization (required_inference) As a system, I should synchronize verified Stripe webhooks before granting or removing Premium access.

  • Observable result: Premium access reflects verified subscription state.

FR-49 — Private-by-default photos (required_inference) As a member, my progress photos should be private by default, with explicit sharing required for visibility.

  • Observable result: photos visible only to the owner unless shared.

FR-50 — Backend persistence (required_inference) As a system, I should persist workouts, programs, completions, progress, goals, community records, notifications, and subscription state.

  • Observable result: data survives sessions.
Page 15 of 33

4. User Personas

Fitness Member (Free)

Product context: A visitor who signs up with email/password or Google, verifies email, and completes onboarding (goal, experience, location, equipment, days per week, duration, style) to get a personalized dashboard.

Primary goal: Train consistently with basic tracking on the Free tier.

Distinct accepted responsibilities: Browse the limited Free workout and program library; run workouts with Start/Pause/Next/Previous/Rest Timer/Complete; save completions; track basic progress and goals; read nutrition education and recipes; participate in community.

Relevant inputs or decisions: Onboarding answers; workout selection; progress entries; goal targets and deadlines; photo sharing decisions.

Interactions with other accepted participants: Sees demo trainers; interacts with Community Participants; encounters Premium upgrade modal; receives notifications.

Observable success: Consistent training with basic tracking on the Free tier.

Page 16 of 33

Premium Subscriber

Product context: A member who upgrades via Stripe Checkout to $19.99/month or $149.99/year.

Primary goal: Uninterrupted access to the full FitForge catalog and advanced progress analytics.

Distinct accepted responsibilities: Access the full workout library, all programs, personalized plans, advanced tracking, nutrition content, workout history, and premium features; manage billing through the Stripe Customer Portal; view renewal date and subscription status.

Relevant inputs or decisions: Plan selection (monthly vs annual); billing management; cancellation decisions.

Interactions with other accepted participants: Relies on Stripe (provider) for billing; receives subscription notifications; interacts with Community Participants.

Observable success: Premium access gated by actual subscription status; uninterrupted access.

Page 17 of 33

Administrator

Product context: An authorized admin who accesses /admin.

Primary goal: Maintain a healthy, moderated platform with accurate operational metrics and current content.

Distinct accepted responsibilities: View total users, active users, Premium subscribers, revenue, growth, workout completions, and cancellations; perform CRUD on users, workouts, exercises, programs, recipes, nutrition articles, trainers, FAQs, and testimonials; handle community moderation, reporting, and blocking.

Relevant inputs or decisions: Metric review; content edits; moderation decisions; blocking decisions.

Interactions with other accepted participants: Moderates Community Participants; manages all members; configures prices.

Observable success: Accurate metrics; current content; moderated community.

Page 18 of 33

Community Participant

Product context: A signed-in member who engages in the community.

Primary goal: An engaged, safe community experience with visible activity and moderation recourse.

Distinct accepted responsibilities: Create posts, like, comment, and follow other members; report or block others; receive in-app and email notifications for community activity, milestones, and completed goals.

Relevant inputs or decisions: Post content; reactions; follow/report/block decisions.

Interactions with other accepted participants: Interacts with other members; subject to Administrator moderation.

Observable success: Visible activity; safe experience; moderation recourse.

5. Core User Flows

Flow 1 — Visitor discovers FitForge and explores programs

  1. Visitor lands on / and reads the hero headline "Your Fitness Journey Starts Here.", subheadline, and fitness visual/video.
  2. Visitor reviews statistics, features, how-it-works, popular programs, clearly marked demo testimonials, pricing, FAQ, and final CTA.
  3. Visitor clicks "Explore Programs" and arrives at /programs.
  4. Visitor searches and filters by goal, difficulty, duration, equipment, and training type; cards show image, name, difficulty, duration, workout count, goal, description, and Free/Premium badge.
  5. Visitor opens /programs/[slug] to view full details, trainer, schedule, equipment, target areas, and workouts.
  6. Failure/recovery: if no programs match, an empty state appears with a clear-filters action; if fetch fails, an inline error with retry appears.
  7. Continuation: visitor clicks "Start Free" to sign up, or continues browsing /workouts, /trainers, /nutrition, or /recipes.
Page 19 of 33

Flow 2 — New member signs up, verifies email, and completes onboarding

  1. Visitor clicks "Start Free" and arrives at signup.
  2. Visitor enters name, email, password, and confirmation, or continues with Google OAuth.
  3. Failure/recovery: validation errors (including password/confirmation mismatch) appear inline; server errors show a retry.
  4. On success, the member is directed to email-verification; the member opens the verification link.
  5. Failure/recovery: if the token is invalid or expired, the member uses resend.
  6. After verification, the member completes Onboarding: primary goal, experience level, training location, available equipment, training days per week, workout duration, and preferred workout style (goals: strength, muscle building, fitness, mobility, general wellness).
  7. Failure/recovery: if saving fails, the member retries.
  8. Observable result: a personalized dashboard is generated from onboarding data.
  9. Continuation: member lands on /dashboard.

Flow 3 — Member runs a workout and saves completion

  1. Member navigates to /workouts and searches/filters by muscle group, difficulty, equipment, duration, calories, and workout type.
  2. Member opens /workouts/[slug] and reviews video, trainer, duration, difficulty, equipment, target muscles, calories, and exercise list with sets, reps, rest, and instructions.
  3. Member clicks Start; uses Pause, Next, Previous, and Rest Timer as needed.
  4. Member clicks Complete Workout.
  5. Observable result: completion is saved and a completion summary is shown.
  6. Failure/recovery: video/fetch errors show retry.
  7. Continuation: member returns to /dashboard or /progress.
Page 20 of 33

Flow 4 — Member follows a program and saves completed workouts

  1. Member opens /programs/[slug] and reviews trainer, schedule, equipment, target areas, and workouts.
  2. Member clicks start program.
  3. Member completes individual workouts and saves completed workouts.
  4. Observable result: program progress and completions persist.
  5. Failure/recovery: Premium-locked programs show the upgrade modal.
  6. Continuation: member continues the program or upgrades.

Flow 5 — Member tracks progress and goals

  1. Member opens /progress and adds weight, workout completion, training time, personal records, and measurements.
  2. Member uploads a progress photo; it remains private by default.
  3. Member explicitly chooses to share a photo if desired.
  4. Member views charts for trends, workout frequency, training minutes, and program completion.
  5. Member opens /goals and creates a goal with target, current progress, percentage, deadline, and completion status.
  6. Observable result: goals render with progress; completion status updates.
  7. Failure/recovery: upload/save errors show retry.
  8. Continuation: member returns to /dashboard.
Page 21 of 33

Flow 6 — Member upgrades to Premium or Annual via Stripe

  1. Member encounters a Premium-locked feature and sees the professional upgrade modal, or navigates to /pricing.
  2. Member reviews Free, Premium ($19.99/month), and Annual ($149.99/year) plans.
  3. Member selects a plan and completes Stripe Checkout.
  4. Stripe webhooks handle checkout completion, subscription creation/update/deletion, and successful/failed invoices; FitForge stores Stripe customer ID, subscription ID, status, plan, billing period, and trial status.
  5. Observable result: Premium access is granted based on actual subscription status.
  6. Failure/recovery: failed invoices trigger payment failure email; access reflects actual status.
  7. Continuation: member accesses the full workout library, all programs, personalized plans, advanced tracking, nutrition content, workout history, and premium features.

Flow 7 — Premium Subscriber manages billing

  1. Premium Subscriber opens /settings and views subscription/billing and renewal date.
  2. Subscriber opens the Stripe Customer Portal to manage billing.
  3. Observable result: billing changes synchronize via webhooks; subscription status updates.
  4. Failure/recovery: cancellation triggers cancellation email; access reflects actual status.
  5. Continuation: subscriber continues or resumes Premium features.

Flow 8 — Community Participant engages and moderates

  1. Member opens /community and creates a post.
  2. Member likes, comments, and follows other members.
  3. Member reports or blocks another member when needed.
  4. Observable result: interactions persist; notifications fire for community activity, milestones, and completed goals.
  5. Failure/recovery: post/action errors show retry.
  6. Continuation: member continues engaging; Administrator reviews reports and moderates.
Page 22 of 33

Flow 9 — Administrator manages the platform

  1. Administrator passes admin authorization and accesses /admin.
  2. Administrator views total users, active users, Premium subscribers, revenue, growth, workout completions, and cancellations.
  3. Administrator performs CRUD on users, workouts, exercises, programs, recipes, nutrition articles, trainers, FAQs, and testimonials.
  4. Administrator handles community moderation, reporting, and blocking.
  5. Observable result: metrics accurate; content current; community moderated.
  6. Failure/recovery: fetch/save errors show retry.
  7. Continuation: administrator continues monitoring and managing.

Flow 10 — Member manages account settings

  1. Member opens /settings and edits profile and fitness preferences.
  2. Member configures notifications, changes password, and uses logout-all-sessions.
  3. Member exports data or deletes account with confirmation.
  4. Observable result: settings save with toast notifications.
  5. Failure/recovery: save errors show retry.
  6. Continuation: member returns to /dashboard.

Flow 11 — Visitor searches globally

  1. Visitor or member enters a query in global search.
  2. Results are grouped across workouts, programs, exercises, recipes, articles, and trainers.
  3. Observable result: grouped results render.
  4. Failure/recovery: no results show an empty state; fetch errors show retry.
  5. Continuation: user opens a result.
Page 23 of 33

6. Visuals Colors and Theme

Muse: Karim Rashid — sensual pop minimalism for a fitness brand that feels like a reward, not a punishment. Rashid's organic curves, candy optimism, and glossy material language are re-cast in a graphite night-mode palette with a single electric green as the pulse.

Headline: Training as something you look forward to, not a chore.

Color Tokens (Dark Mode — Default)

RoleHexUsage
Background#0B0D0CNear-black graphite ground
Surface#161A18Charcoal capsule surfaces
Hairline#2A322D1px borders
Text#F4F7F4Body text at 92% opacity
Primary#C6FF3DElectric lime — CTAs, progress fills, streak flames, active nav, liquid hero form
Accent#FF4FA3Bubblegum magenta — micro-moments only (badge dots, hover glints, Premium modal rim light, chart secondary series)
Muted#7E8A82Labels and metadata
Page 24 of 33

Color Tokens (Light Mode — Optional)

RoleHex
Background#F6F5F2 (pearl-white)
Text#14161A (graphite)
Primary#C6FF3D (full saturation)
Accent#FF4FA3 (full saturation)

Lime on graphite reads at 14:1 contrast. Magenta is never used behind body text. Neither lime nor magenta is used as a large flat field behind body text.

Typography

  • Headings: Unbounded at 600–700 weight; mixed case for section titles; uppercase with +0.06em tracking for micro-labels and stat captions. Hero line: clamp(40px, 9vw, 132px) with 0.92 line-height and −0.02em tracking. Numerals (streaks, minutes, calories, PRs) set in Unbounded 700 at 2.2× surrounding body size.
  • Body: Quicksand.
  • Scale: 1.333 modular — 132/88/56/36/24/18/16/14. Body 16px at 1.65 line-height; mobile body 15px; hero clamp(40px→132px); section heads clamp(30px→56px); tile numerals clamp(34px→64px).

Shape Language

Organic capsule and blob geometry. Buttons are full pills (border-radius 999px). Cards are 28px-radius rounded rectangles with a 1px #2A322D hairline and a soft 0 18px 40px rgba(0,0,0,0.55) shadow. Section boundaries are shallow convex curves rather than hard rules. The lime hero form is a continuously deforming glossy blob — a liquid-metal dumbbell that morphs between a kettlebell silhouette and a ring. Progress bars are capsule tracks with a lime fill and a subtle glossy highlight along their top edge. Icons (Lucide) sit inside 44px circular chips. Nothing is square; nothing is sharp.

Page 25 of 33

Spacing Rhythm

Mobile-first single-column with a desktop 12-column grid. Public marketing pages alternate full-bleed colour-block sections separated by curved dividers. The app shell uses a 260px desktop sidebar with capsule active states and a 5-item pill-shaped mobile bottom nav that floats 12px above the safe area with a glass blur. Dashboard is a bento of capsule tiles. Filters on /workouts and /programs are horizontally scrollable pill rows on mobile and a sticky left rail on desktop. Every card, tile, and control stays fully inside its container at 375px, 768px, and 1280px.

Imagery Style

One crafted subject per surface, never stock gym photography. The hero is a real-time glossy 3D form (Three.js / React Three Fiber) — a liquid-metal dumbbell/kettlebell hybrid in lime and graphite with soft studio reflections. Workout and program cards use art-directed glossy 3D props (chrome kettlebell, matte-black hex dumbbell, lime resistance band coil, pink foam roller) on graphite grounds, rendered in a consistent studio light. Trainer portraits are duotone-treated — graphite shadows, lime rim light. Progress charts are soft, thick-stroke capsule lines with a lime-to-magenta gradient fill beneath. No gradient blobs, no generic abstract mesh wallpaper.

Page 26 of 33

7. Signature Design Concept

The Lime Colour Block Hero

The public entry (/) opens on a dark, full-bleed first screen that is not a centred SaaS stack. The left 6 columns carry the headline "Your Fitness Journey Starts Here." set in Unbounded 700 at clamp(40px→132px), stacked across four lines. The word "Journey" is rendered in lime as a solid colour block behind it — an offset lime capsule that bleeds 24px off the left viewport edge at mobile and 80px at desktop, with the white type sitting on top of it. The type and the block read as one sculptural object rather than a headline on a background.

Beneath the headline sit two pill CTAs: "Start Free" filled in lime with graphite text, and "Explore Programs" as a graphite capsule with a lime hairline.

The right 6 columns carry the glossy lime 3D dumbbell form floating over a graphite field, casting a soft magenta-tinted shadow, slowly morphing, bleeding off the right edge of the viewport. Behind everything, a faint 1px grid of hairlines and a single diagonal lime light streak.

The bottom strip is a horizontally scrolling ticker of real stats ("4.9★ • 12,000+ members • 340 workouts • 50 exercises") in Unbounded 500 uppercase at 14px, moving at 40s per loop, pausable on hover and wrapping into rows under prefers-reduced-motion.

On mobile the composition stacks: lime block + headline first, glossy form below at 60% viewport width, ticker pinned at the bottom.

This concept recomposes only accepted content, states, and controls — it introduces no new behaviour, page, or destination.

Page 27 of 33

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: webgl

Page 28 of 33

Landing Hero Motion Brief

Focal subject: A real-time glossy 3D liquid-metal dumbbell/kettlebell hybrid in lime and graphite with soft studio reflections, floating over a graphite field.

Input → transformation → outcome thesis: As the visitor arrives, the glossy form breathes and slowly morphs on a 9-second loop between a dumbbell, a kettlebell, and a ring, with a lime specular sweep travelling across its surface. The transformation communicates the product's promise — training that adapts and rewards — using only accepted behaviour (the hero visual and the "Start Free" / "Explore Programs" CTAs).

Motion vocabulary: Expressive, at the muse's ceiling but never bouncy-cartoonish. Cards enter with a 320ms cubic-bezier(0.22,1,0.36,1) rise-and-scale from 0.96, staggered 60ms. Tapping a completed set fires a liquid ripple that fills the capsule in lime. Progress rings sweep with a spring on value change. Hover on desktop raises a card 4px and slides a magenta glint across its top hairline. The mobile bottom nav's active pill stretches elastically between items.

Composed first frame: Left 6 columns — the lime capsule bleeding off the left edge with "Your Fitness Journey Starts Here." stacked across four lines, "Journey" in lime on the block; two pill CTAs beneath. Right 6 columns — the glossy lime form mid-morph, magenta-tinted shadow beneath, bleeding off the right edge. Faint 1px hairline grid and a single diagonal lime light streak behind. Bottom strip — the stats ticker at rest.

Reduced-motion state: All morphs and sweeps freeze to a static glossy form; entrance animations become instant opacity fades; the ticker wraps into rows or becomes horizontally scrollable so every item can be brought fully into view.

Page 29 of 33

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

A single crafted real-time object: a glossy liquid-metal dumbbell/kettlebell hybrid in lime (#C6FF3D) and graphite (#161A18) with soft studio reflections, rendered with Three.js / React Three Fiber. The object continuously morphs between a dumbbell silhouette, a kettlebell silhouette, and a ring on a 9-second loop, with a lime specular sweep. It floats over a graphite field (#0B0D0C) and casts a soft magenta-tinted shadow (#FF4FA3 at low opacity). The scene shows the product's defining state — adaptive training that rewards effort — and is the only 3D subject in the product, reused at smaller scale on program cards. Under prefers-reduced-motion, the object freezes to a static glossy form.

Page 30 of 33

9. Non-Functional Requirements

NFR-01 — Security (explicit) 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. Never expose Stripe secret keys. All secrets stored in environment variables.

NFR-02 — SEO (explicit) SEO metadata, Open Graph, X cards, sitemap, robots.txt, canonical URLs, and structured data.

NFR-03 — Performance (explicit) Optimized images, videos, lazy loading, database queries, caching, pagination, and SSR where useful.

NFR-04 — Accessibility (explicit) Semantic HTML, keyboard navigation, accessible labels, focus states, alt text, ARIA where needed, and good color contrast.

NFR-05 — Quality states (explicit) Loading, success, error, empty, 404, and 500 states across the application, using reusable modular components.

NFR-06 — Local resilience (explicit) If third-party services are not configured, clean integration layers and safe demo/mock data keep the application running locally.

NFR-07 — Demo/production separation (explicit) Demo data is clearly separated from production data.

NFR-08 — Responsive integrity (explicit, direction) Headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit. No other element covers any part of them. Moving and scrollable content may cross the viewport or container edge by design; every item becomes fully readable as it passes. Under prefers-reduced-motion, items wrap into rows or become horizontally scrollable.

NFR-09 — Premium access integrity (explicit) Premium access depends on actual subscription status synchronized from verified Stripe webhooks.

NFR-10 — Privacy of progress photos (explicit) Progress photos remain private unless the user explicitly chooses to share them.

NFR-11 — No medical diagnosis or treatment (explicit) FitForge does not provide medical diagnosis or treatment. Nutrition content clearly states it is general education and not medical advice.

NFR-12 — Configurable pricing (explicit) Prices are configurable through database/environment settings.

Page 31 of 33

10. Tech Stack

  • Framework: Next.js 15+ with TypeScript.
  • Styling: Tailwind CSS, shadcn/ui.
  • Animation: Framer Motion.
  • Icons: Lucide Icons.
  • Backend: Next.js API routes/server actions.
  • Database: PostgreSQL with Prisma.
  • Authentication: Secure authentication with email/password + Google OAuth + email verification + password reset.
  • Subscriptions: Stripe subscriptions (Checkout, Customer Portal, webhooks).
  • Email: Resend.
  • Storage: Cloud storage.
  • Deployment: Vercel.
  • Secrets: All secrets stored in environment variables.
Page 32 of 33

11. Assumptions and Constraints

Assumptions

  • A1 (required_inference): Application-owned identity is established through self-service signup, with email verification before full activation, and returning verification through login.
  • A2 (required_inference): Onboarding completion is required before the personalized dashboard is generated.
  • A3 (required_inference): Admin authorization is required before /admin access.
  • A4 (required_inference): Verified Stripe webhook synchronization is required before granting or removing Premium access.
  • A5 (required_inference): Progress photos are private by default, with explicit sharing required for visibility.
  • A6 (required_inference): Backend persistence covers workouts, programs, completions, progress, goals, community records, notifications, and subscription state.
  • A7 (explicit): If third-party services are not configured, clean integration layers and safe demo/mock data keep the application running locally.

Constraints

  • C1 (explicit): Do not provide medical diagnosis or treatment.
  • C2 (explicit): Nutrition content must clearly state it is general education and not medical advice.
  • C3 (explicit): Progress photos must remain private unless the user explicitly chooses to share them.
  • C4 (explicit): Never expose Stripe secret keys.
  • C5 (explicit): Never expose passwords, private user information, API keys, or secret keys.
  • C6 (explicit): Premium access must depend on actual subscription status.
  • C7 (explicit): /admin requires admin authorization.
  • C8 (explicit): Prices must be configurable through database/environment settings.
  • C9 (explicit): Store all secrets in environment variables.
  • C10 (explicit): Clearly separate demo data from production data.
  • C11 (explicit): Do not stop after the homepage and do not create only mockups.
  • C12 (explicit): Fitness content is provided for general educational and informational purposes; users should consider their individual circumstances and consult a qualified professional when appropriate.
  • C13 (explicit, direction): The generic indigo/blue-on-white SaaS template is forbidden. Blue/indigo primary or accent anywhere is forbidden. Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are forbidden for headings or body. Stock gym photography is forbidden as hero imagery. Sharp 0-radius corners and spreadsheet-style tables are forbidden in consumer surfaces. Glass is reserved for the mobile bottom nav and the Premium upgrade modal only.
Page 33 of 33

12. Glossary

  • FitForge: The fitness subscription SaaS product defined in this document.
  • Free tier: Limited workouts/programs, basic tracking, and dashboard.
  • Premium tier: $19.99/month — full workout library, all programs, personalized plans, advanced tracking, nutrition content, workout history, and premium features.
  • Annual tier: $149.99/year — all Premium features with annual billing.
  • Onboarding: The post-signup questionnaire capturing primary goal, experience level, training location, available equipment, training days per week, workout duration, and preferred workout style.
  • Program: A structured multi-week training plan composed of workouts.
  • Workout: A single training session composed of exercises with sets, reps, rest, and instructions.
  • Exercise: A movement with name, description, instructions, target muscles, equipment, difficulty, video, image, sets, reps, and rest.
  • WorkoutCompletion: A persisted record of a completed workout.
  • ProgressEntry: A persisted record of weight, measurements, or other progress metrics.
  • ProgressPhoto: A private-by-default photo record, visible only to the owner unless explicitly shared.
  • Goal: A user-defined target with current progress, percentage, deadline, and completion status.
  • Stripe Checkout: The provider-owned payment flow for subscribing to Premium or Annual.
  • Stripe Customer Portal: The provider-owned surface for managing billing.
  • Webhook: A verified Stripe event that synchronizes subscription state.
  • Upgrade modal: The professional modal shown when a Premium-locked feature is encountered.
  • Demo data: Seeded sample content (20 workouts, 10 programs, 50 exercises, 15 recipes, 10 nutrition articles, 5 trainers, 10 FAQs, 6 demo testimonials) clearly separated from production data.
  • Global search: Search across workouts, programs, exercises, recipes, articles, and trainers.
  • Notification: In-app and email messages for workout reminders, milestones, completed goals, subscription updates, new programs, and community activity.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

/: Go to login
login: 1. Sign in with admin credentials
forgot-password: 2. Request password reset
reset-password: 3. Submit new admin password
/admin: 1. Pass admin authorization
/admin: View users, revenue, growth metrics
/admin: CRUD workouts and exercises
/admin: CRUD programs and trainers
/admin: CRUD recipes and nutrition articles
/admin: CRUD FAQs and testimonials
/admin: Configure plan prices
/admin: Review reports and moderate posts
/admin: Block reported user
/admin: 2. Re-authorize session

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

/: Go to login
login: 1. Sign in with admin credentials
forgot-password: 2. Request password reset
reset-password: 3. Submit new admin password
/admin: 1. Pass admin authorization
/admin: View users, revenue, growth metrics
/admin: CRUD workouts and exercises
/admin: CRUD programs and trainers
/admin: CRUD recipes and nutrition articles
/admin: CRUD FAQs and testimonials
/admin: Configure plan prices
/admin: Review reports and moderate posts
/admin: Block reported user
/admin: 2. Re-authorize session