A premium, mobile-first fitness planner built with Next.js 14, featuring personalized workouts, meal plans, and a brand manager console.
- Personalized Home Dashboard - Tailored workout recommendations based on your profile
- Workout Library - Browse workouts by difficulty, muscle group, and equipment
- Workout Detail - Step-by-step exercise guides with progress tracking
- Meal Plans - Nutrition plans for various dietary preferences
- Weekly Planner - Automated weekly schedule generation
- Progress Tracking - Track calories, minutes, streaks, and achievements
- Profile Setup - Customize goals, equipment, and preferences
- Brand Dashboard - Overview of all campaigns and metrics
- Campaign Manager - Create and manage advertising campaigns
- Sponsored Challenges - Fitness challenges with brand rewards
- Product Placements - Manage in-app product placements
- Coupons & Offers - Create discount codes for promotions
- Analytics Dashboard - Track impressions, clicks, and conversions
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: TailwindCSS
- UI Components: shadcn/ui + Radix UI
- State Management: Zustand
- Animations: Framer Motion
- Icons: Lucide React
src/
├── app/ # Next.js App Router pages
│ ├── admin/ # Admin console pages
│ ├── meals/ # Meal plan pages
│ ├── planner/ # Weekly planner
│ ├── profile/ # User profile
│ ├── progress/ # Progress tracking
│ └── workouts/ # Workout pages
├── cms/ # CMS integration layer
│ ├── client.ts # Fetching utilities
│ ├── data.ts # Demo data
│ └── types.ts # TypeScript types
├── components/
│ ├── layout/ # Layout components
│ ├── shared/ # Reusable components
│ └── ui/ # UI primitives
├── personalization/ # Personalization engine
│ ├── engine.ts # Recommendation logic
│ ├── rules.ts # Rule definitions
│ └── types.ts # Type definitions
├── automations/ # Automation engine
│ ├── engine.ts # Automation runner
│ └── types.ts # Type definitions
├── store/ # Zustand stores
│ ├── brandStore.ts # B2B state
│ ├── plannerStore.ts # Weekly planner state
│ ├── progressStore.ts # User progress state
│ ├── themeStore.ts # Theme state
│ └── userStore.ts # User profile state
└── lib/ # Utilities
└── utils.ts # Helper functions
- Node.js 18+
- npm or yarn
- Clone the repository:
cd fitness-planner- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
/- Home (personalized dashboard)/workouts- Workout listing/workouts/[id]- Workout detail/meals- Meal plan listing/meals/[id]- Meal plan detail/planner- Weekly planner/progress- Progress dashboard/profile- Profile setup
/admin- Admin dashboard/admin/campaigns- Campaign manager/admin/challenges- Sponsored challenges/admin/placements- Product placements/admin/coupons- Coupons & offers/admin/analytics- Analytics dashboard
- Primary: Emerald green (
#10B981) - Energy: Amber/Orange gradient
- Strength: Rose/Red gradient
- Calm: Violet/Purple gradient
- Sans: Inter (body text)
- Display: Space Grotesk (headings, mono)
- Rounded cards with subtle shadows
- Soft gradients and glass effects
- Smooth animations via Framer Motion
- Dark mode support
Replace the demo data in src/cms/data.ts with actual CMS API calls in src/cms/client.ts. The project is pre-configured with TypeScript types for:
- Workouts
- Workout Programs
- Meal Plans
- Goals
- Brand Campaigns
- Product Placements
- Coupons
Customize the personalization rules in src/personalization/rules.ts to match your business logic.
Configure automated triggers in src/automations/engine.ts for:
- Daily workout reminders
- Streak celebrations
- Progress adaptations
- Goal nudges
MIT License - feel free to use this project for your own purposes.
Built with ❤️ using Next.js, TypeScript, and TailwindCSS