Fitness

Open http://localhost:3000 with your browser to see the result.

SkyFitnessPro

SkyFitnessPro is a Next.js application for online fitness courses, workouts, and progress tracking.

Features

• User login and registration
• Course catalog
• Course details page
• Workout selection flow
• Workout progress tracking and saving
• Profile page with selected courses and progress
• Modal routes for auth, workout selection, and progress entry
• Responsive layout for desktop, tablet, and mobile
• User-facing error handling for key API flows

Stack

• Next.js 16
• React 19
• TypeScript
• Redux Toolkit
• redux-toastify
• CSS Modules
• jest

Requirements

• Node.js 20+
• npm 10+

Installation

npm install

Run Locally

Development mode:

npm run dev

Production build:

npm run build
npm run start

Lint:

npm run lint

Tests:

npm test

Environment

The app uses BASE_URL for API requests.

Example:

BASE_URL=https://wedev-api.sky.pro

Testing

The project uses Jest for unit tests.

Test files:

• utils\calculatingProgress.test.ts
• utils\croppingLines.test.ts
• utils\FetchRightCover.test.ts
• utils\fetchSelectedCourses.test.ts

Error Handling

API calls are located in \services\.

The app uses a shared pattern:

• API functions display error messages
• User interface components display error messages encountered by the user

This is applied to:

• catalog loading
• auth flows
• add/remove course actions
• workout loading
• workout progress loading and saving

Project Structure

App

• app\courses\main\page.tsx: Main page
• app\courses\course\[id]\page.tsx: course page
• app\courses\workouts\[course]\page.tsx: workout selection page
• app\courses\workout\[id]\page.tsx: workout page
• app\courses\profile\page.tsx: profile page

Components

• components\AuthModal: auth modal
• components\FitnessCourse: course card
• components\FitnessCourseBottom: lower block on course card
• components\SelectWorkouts: workout picker
• components\Workout: workout exercises and progress
• components\ProgressModal: progress entry modal

Store

• store\store.ts: Redux store setup
• store\features\AuthSlice.ts: auth state
• store\features\CourseSlice.ts: course state

Notes

• State for auth and progress is persisted with localStorage.