Why I Chose Next.js Over Flask

1. Full-Stack Capabilities

• Next.js API Routes provide Flask-like backend functionality
• Handles routing, middleware, and HTTP requests similar to Flask
• Unified TypeScript across frontend and backend
• File-based routing (like Flask's decorators)
• Built-in API route handlers
• Much easier to deploy to Vercel as Next JS project, unlike Flask

2. Modern Development Experience

• Hot reload for faster development
• Built-in TypeScript support
• I have previous experience in Next JS framework.

Project Overview

Fitness Tracker is a full‑stack web app where authenticated users can log workouts, add exercises and sets, and view simple stats.

Tech Stack

• Next.js 14 (App Router, API Routes)
• TypeScript
• Tailwind CSS
• NextAuth.js (Credentials provider)
• MongoDB Atlas + Mongoose ( Database )
• Zod ( Data Validation )

Repository Overview

• API Routes: src/app/api/**/route.ts
• Pages: src/app/**
• Models: models/
• DB connection: lib/mongodb.ts
• Auth config: lib/auth.ts
• Auth middleware: src/middleware.ts

API Endpoints

• GET /api/workouts — List current user’s workouts
• POST /api/workouts — Create workout
• GET /api/workouts/[id] — Get specific workout
• PUT /api/workouts/[id] — Update workout
• DELETE /api/workouts/[id] — Delete workout
• GET /api/exercises — List exercises
• POST /api/exercises — Create exercise
• GET /api/stats — Basic totals

All workout routes require authentication via NextAuth middleware.

Validation Strategy (Why Zod + Mongoose)

• Zod validates incoming request bodies at the API boundary (clear error messages and types).
• Mongoose enforces schema constraints at the database level (persistence safety).
• This two‑layer approach ensures invalid data is caught before DB writes and keeps the DB consistent.

Where it lives:

• Create: src/app/api/workouts/route.ts defines Zod schemas for sets, exercises, and workouts
• Update: src/app/api/workouts/[id]/route.ts validates partial updates (title, date, notes, duration)

Authentication

• Uses NextAuth Credentials provider for simple email/password auth.
• Session: JWT for stateless requests across API routes.
• Middleware (src/middleware.ts) protects pages and APIs so only logged‑in users can use core features.
• Client Navbar uses useSession() so UI reflects auth state instantly.

Data Models (Mongoose)

• User: email, password, name, createdAt
• Workout: userId, date, title, notes, duration, exercises[]
• Exercise: workoutId, name, category, sets[]

Local Setup

1. Create .env.local in the project root with:

MONGODB_URI="your-mongodb-connection-string"
NEXTAUTH_SECRET="openssl rand -base64 32"
NEXTAUTH_URL="http://localhost:3000"

2. Install and run:

npm install
npm run dev

---