Fitova - Fitness & Workout Tracker — PWA Mobile Nextjs Template

Core Features

• Next.js 16 App Router — File-based routing, server components, layouts, and streaming — no pages directory.
• PWA Ready — Installable on iOS & Android with manifest, service worker, and offline fallback page.
• Tailwind CSS v4 — Latest Tailwind with CSS-first config, custom design tokens, and dark theme throughout.
• Context + localStorage — Auth, user profile, language, and favorites persisted via React Context + localStorage. No Redux needed.
• TypeScript — Fully typed codebase with interfaces for all data models, props, and context values.
• Form Validation — React Hook Form + Zod schema validation on all auth, onboarding, and profile forms.
• Charts & Statistics — Chart.js 4 + react-chartjs-2 for workout statistics, heart rate sparklines, and progress rings.
• Toast Notifications — Sonner for success, error, and info feedback. Custom dark theme matching the app palette.
• Auth Middleware — Next.js middleware guards all protected routes using a cookie token. Auth routes redirect when logged in.
• Framer Motion — Page transitions, staggered list animations, and micro-interactions throughout.
• Date Utilities — date-fns 4 for workout scheduling, DOB formatting, and relative time display.
• Developer Friendly — Well-commented code, clean folder structure, ESLint, Prettier, and path aliases configured.

Tech Stack

Pages

35+ App Screens

• Splash & Onboarding
  • Splash Screen
  • Onboarding Slides (1–3)
• Authentication
  • Sign In
  • Sign Up
  • Forgot Password
  • Reset Password
  • New Password
  • Reset Success
• Setup Flow
  • Gender Selection
  • Date of Birth
  • Weight
  • Sport Preferences
  • Plan Selection
• Core App
  • Home Dashboard
  • Notifications
  • Favorites
  • Scan Food
  • Workouts
  • Workout List
  • Workout Detail
  • Trainer Profile
  • Today’s Best
  • Statistics
  • Statistics Dashboard
  • Heart Rate Chart
  • Progress Rings
  • Weekly Summary
  • User Profile
  • Profile / Settings
  • Edit Profile
  • Language Picker
  • Log Out
• Utility
  • Payment / Upgrade
  • 404 Error Page
  • Offline Fallback
  • PWA Install Banner

LocalStorage & Cookies

Storage — localStorage & Cookies. No backend required. All state is stored client-side. Auth uses a cookie for middleware route protection; everything else uses localStorage. All keys are centralized in src/lib/utils/constants.ts under STORAGE_KEYS, SESSION_KEYS, and COOKIE_KEYS.

localStorage Keys

• fitova_user_profile Name, email, avatar, DOB, weight, gender, sports, goal
• fitova_auth_token Auth token (mirrors cookie)
• fitova_favorites Array of saved workout IDs
• fitova_language Selected UI language code

Cookie Keys & Session

• fitzen-token Auth cookie read by middleware to protect routes
• fitova_pwa_dismissed sessionStorage — hides PWA install banner for session
• fitova_setup_* sessionStorage — guards each onboarding step (gender, dob, weight, sports)

Getting Started

1. Install dependencies — npm install
2. Run development server — npm run dev
3. Build for production — npm run build & npm start
4. Node.js requirement — Requires Node.js 18.18 or later. Tested on Node 20 LTS.

Get Fitova — Next.js today

Launch your fitness app with a solid foundation — built on the most powerful React framework.