Full-stack (MERN) Gym Training Management App

Full-stack web app with authentication for managing personalized workouts, logging workouts, and tracking completed workouts and statistics!

---

Video Demo (Youtube)

Here is the full link to demo: https://youtu.be/xExpPqn2YX4

---

Tech Stack

• Frontend: React.js + Chakra UI
• Backend: Node.js + Express
• Database: MongoDB
• Authentication: JSON Web Tokens (JWT)
• Testing: Postman

Features

• Secure user authentication (login & registration)
• Create and manage custom workout templates (CRUD)
• Track exercises with sets, reps, and weights during active workouts
• View and manage your full workout history (CRUD)
• Create custom exercises or use built-in defaults (CRUD)
• Training statistics with interactive graphs (in progress)

Backend Architecture

The backend follows a clean, layered architecture commonly used in Node.js+ Express applications with MongoDB and JWT authentication. Each layer has a clear responsibility, making the system easier to maintain, scale, and test.

• Model Layer: Defines the MongoDB schemas and data models using Mongoose. This layer is responsible for structuring how data is stored and retrieved from the database.
• Controller Layer: Contains the application’s business logic. Controllers receive requests from the route layer, interact with the models, and return responses.
• Route Layer: Maps incoming HTTP requests to the appropriate controller functions. Routes also specify which endpoints are protected and apply the JWT authentication middleware when required.
• Server Layer Initializes the Express application, loads middleware, sets up routing, connects to MongoDB, and starts the server.
• Frontend Integration The frontend (React) communicates with the backend through REST API endpoints. State management (stores) handles API calls.

Frontend Architecture

The frontend follows a modular architecture that separates UI components, page-level views, and application state management. This keeps the codebase organized, scalable, and easy to maintain.

• /components: Contains reusable UI components, for example: Navbar, WorkoutForm, WorkoutCard, ActiveWorkoutBottomBar)
• /pages: Contains the page level views, for example: LoginPage, ExercisesPage, CreateWorkoutPage, HistoryPage
• /store: Contains the Global State Management, using Zustand, is responsible for communicating with the backend REST API, authentication tokens, active workouts.

Setup Instructions

After you have cloned the repository

# Install backend dependencies
cd backend
npm install


# Install frontend dependencies
cd ..
cd frontend
npm install

# Start the app in dev mode (you need to configure .env files for backend)
cd backend
npm run dev

cd ..
cd frontend
npm run dev

#Now you can view the app in your browser