<!– Hero –>

▲ Next.js Template

Fitova — Fitness PWA

Premium fitness app template built with
Next.js 16, TypeScript,
Tailwind CSS v4, and Framer Motion. Pixel-perfect dark UI with
lime-green accents — production-ready architecture, zero backend
required.

Next.js 16
React 19
TypeScript 5
Tailwind v4
Framer Motion 12
PWA Ready

<!– Features –>

✅ 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 –>

Tech Stack

<thead>

</thead>
<tbody>

</tbody>

Package	Version	Purpose
next	16.1.6	App framework — App Router, middleware, SSR
react / react-dom	19.2.3	UI library
typescript	5	Type safety throughout
tailwindcss	4	Utility-first CSS — CSS-first config, no tailwind.config.js
framer-motion	12	Page transitions and animations
chart.js + react-chartjs-2	4	Statistics charts and sparklines
react-hook-form	7	Form state management
@hookform/resolvers	—	Zod schema resolver for forms
zod	4	Schema validation
sonner	2	Toast notifications
date-fns	4	Date formatting and utilities
lucide-react	latest	Icon library

<!– 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
centralised 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 –>

Getting Started

Install dependencies

npm install

Run development server

npm run dev

Build for production

npm run build && npm start

Node.js requirement

Requires Node.js 18.18 or later. Tested on Node 20 LTS.

<!– Footer –>

Get Fitova — Next.js today

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