🏋️‍♂️ MERN Workout Tracker App

A full-stack, responsive web application designed to help users log, track, and manage their daily workout routines efficiently. Built using the MERN stack (MongoDB, Express.js, React, Node.js), this project features secure user authentication, global state management, responsive UI design, and full CRUD operations.

---

🚀 Live Demo & Links

• GitHub Repository: https://github.com/CSS-styles/Workout_Tracking_App
• Live Demo: https://workout-tracker-igvo.onrender.com

⚠️ Note on Free Tier Hosting (Render):
The backend service is hosted on Render's free tier. If the app hasn't been accessed recently, the backend server goes into a spin-down state. Please allow 50–60 seconds for the initial request to wake up the server. Once awake, the application will respond smoothly!

---

✨ Features

• 🔐 User Authentication & Authorization: Secure signup and login using JWT (JSON Web Tokens) and bcrypt password hashing. Protected API routes ensure users can only view and manage their own workouts.
• ⚡ CRUD Operations:
  • Create: Add new workout entries specifying exercise name, load (kg), and repetitions.
  • Read: Display dynamic list of logged workouts ordered chronologically.
  • Delete: Remove workout logs instantly with real-time state updates.
• 📱 Fully Responsive UI/UX: Built with a mobile-first approach using Flexbox and CSS Grid to ensure a smooth experience on mobile devices, tablets, and desktops.
• 🧠 Global State Management: Powered by React's Context API to prevent prop-drilling and maintain fast, synchronized UI updates without full page reloads.
• 🛡️ Form Validation & Error Handling: Highlights empty or invalid inputs on the client side before sending data to the server.

---

🛠️ Tech Stack

Frontend

• Library: React.js
• State Management: React Context API & useReducer
• Styling: CSS3 (Flexbox & Grid, CSS Modules/Custom Styles)

Backend

• Runtime Environment: Node.js
• Framework: Express.js
• Database: MongoDB Atlas (NoSQL)
• Object Data Modeling (ODM): Mongoose

Security & Utilities

• Authentication: JSON Web Tokens (jsonwebtoken)
• Password Hashing: bcrypt / bcryptjs
• Cross-Origin Handling: cors
• Environment Variables: dotenv

---

📐 Architecture & Key Concepts Learned

1. State Synchronization: Implemented React Context (WorkoutsContext & AuthContext) alongside useReducer to seamlessly sync backend database mutations with frontend components in real-time.
2. RESTful API Architecture: Designed scalable, decoupled backend controllers and routes adhering to HTTP protocols (GET, POST, PATCH, DELETE).
3. Environment Security: Secured sensitive database credentials and secret keys using .env files and .gitignore practices to avoid exposing production keys.
4. CORS & Multi-Platform Deployment: Managed cross-origin resource sharing between a decoupled React client and Express API across production server environments.

---

🗂️ Project Structure

Workout_Tracking_App/
│
├── backend/                  # Express API Server
│   ├── controllers/          # Route logic & DB transactions
│   ├── middleware/           # Auth verification middleware
│   ├── models/               # Mongoose schemas (Workout, User)
│   ├── routes/               # Express routing handlers
│   └── server.js             # Server entry point
│
└── frontend/                 # React UI Client
    ├── src/
    │   ├── components/       # Reusable UI elements (Navbar, Forms, Details)
    │   ├── context/          # React Context API providers & hooks
    │   ├── pages/            # Page layouts (Home, Login, Signup)
    │   └── App.js            # Main React routing component
    └── package.json