MERN Stack Workout Tracker

A full-stack workout tracking application built while following The Net Ninja's MERN Stack Tutorial. This project demonstrates the implementation of a complete CRUD application using MongoDB, Express.js, React, and Node.js.

📚 About This Project

This is a learning project created by following The Net Ninja's comprehensive MERN Stack tutorial series. The application allows users to manage their workout routines with full Create, Read, Update, and Delete (CRUD) functionality, featuring a modern React frontend and a RESTful API backend.

🎯 Learning Objectives

Through this project, I gained hands-on experience with:

• Building RESTful APIs with Express.js and Node.js
• Database modeling and operations with MongoDB and Mongoose
• Creating interactive UIs with React and React Hooks
• Managing application state with Context API
• Implementing routing with React Router
• Connecting frontend and backend applications
• Environment variable management and security
• Modern JavaScript (ES6+) features and best practices

🚀 Features

• ✨ Create Workouts: Add new workout entries with title, reps, and load
• 📋 View Workouts: Display all workouts in a clean, organized list
• ✏️ Update Workouts: Edit existing workout information
• 🗑️ Delete Workouts: Remove workouts from the database
• ⚡ Real-time Updates: Instant UI updates using React Context
• 📱 Responsive Design: Mobile-friendly interface
• 🎨 Modern UI: Clean and intuitive user experience

🛠️ Tech Stack

Frontend

• - JavaScript library for building user interfaces
• - Declarative routing for React
• date-fns (v4.1.0) - Modern JavaScript date utility library
• Context API - State management solution

Backend

• - JavaScript runtime environment
• - Fast, minimalist web framework
• - NoSQL document database
• - Elegant MongoDB object modeling

Development Tools

• Nodemon (v3.1.10) - Auto-restart server during development
• dotenv (v17.2.3) - Load environment variables from .env file

📁 Project Structure

MERN-Stack-Project/
├── backend/
│   ├── controller/
│   │   └── workoutController.js    # Business logic for workout operations
│   ├── models/
│   │   └── workoutModel.js         # Mongoose schema for workouts
│   ├── routes/
│   │   └── workouts.js             # API route definitions
│   ├── server.js                   # Express server configuration
│   ├── package.json
│   └── .env                        # Environment variables (not tracked)
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── components/            # Reusable React components
│   │   ├── context/               # React Context for state management
│   │   ├── hook/                  # Custom React hooks
│   │   ├── pages/                 # Page components
│   │   ├── App.js                 # Main App component
│   │   ├── index.js               # React entry point
│   │   └── index.css              # Global styles
│   └── package.json
│
└── .gitignore

🔧 Installation & Setup

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14 or higher) - Download here
• MongoDB - Local installation or MongoDB Atlas account
• npm or yarn package manager

Step 1: Clone the Repository

git clone https://github.com/Tanathorn-Rin/MERN-Stack-Project.git
cd MERN-Stack-Project

Step 2: Backend Setup

1. Navigate to the backend directory:

cd backend

2. Install dependencies:

npm install

3. Create a .env file in the backend directory with the following variables:

PORT=4000
MONGODB_URI=mongodb://localhost:27017/workout-db
# Or use MongoDB Atlas connection string:
# MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/workout-db

4. Start the backend server:

# Development mode (with auto-restart)
npm run dev

# Production mode
npm start

✅ Backend server should be running on http://localhost:4000

Step 3: Frontend Setup

1. Open a new terminal and navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Start the React development server:

npm start

✅ Frontend application should automatically open at http://localhost:3000

🌐 API Documentation

Base URL

http://localhost:4000/api

Endpoints

Method	Endpoint	Description	Request Body
GET	/api/workouts	Retrieve all workouts	N/A
GET	/api/workouts/:id	Retrieve a specific workout	N/A
POST	/api/workouts	Create a new workout	{ title, reps, load }
PATCH	/api/workouts/:id	Update a workout	{ title, reps, load }
DELETE	/api/workouts/:id	Delete a workout	N/A

Example API Requests

Create a Workout

POST http://localhost:4000/api/workouts
Content-Type: application/json

{
  "title": "Bench Press",
  "reps": 10,
  "load": 60
}

Response

{
  "_id": "507f1f77bcf86cd799439011",
  "title": "Bench Press",
  "reps": 10,
  "load": 60,
  "createdAt": "2025-11-05T18:30:00.000Z",
  "updatedAt": "2025-11-05T18:30:00.000Z"
}

💡 Usage

1. Start MongoDB: Ensure your MongoDB server is running

   # If using local MongoDB
   mongod

2. Start Backend Server:

   cd backend && npm run dev

3. Start Frontend Server:

   cd frontend && npm start

4. Access the Application: Open your browser to http://localhost:3000

5. Add Workouts: Click the form to add your first workout!

🧪 Testing

Frontend Tests

cd frontend
npm test

Launch Test Runner

npm test -- --coverage

📦 Build for Production

Create Production Build

cd frontend
npm run build

This creates an optimized production build in the frontend/build folder, ready for deployment.

🚀 Deployment

The application can be deployed to various platforms:

• Frontend: Vercel, Netlify, GitHub Pages
• Backend: Heroku, Railway, Render, DigitalOcean
• Database: MongoDB Atlas (cloud-hosted)

🎓 What I Learned

• ✅ Setting up a full-stack MERN application from scratch
• ✅ Creating RESTful API endpoints with Express.js
• ✅ Database modeling with Mongoose schemas
• ✅ React hooks (useState, useEffect, useContext)
• ✅ Custom React hooks for reusable logic
• ✅ Context API for global state management
• ✅ Handling asynchronous operations with async/await
• ✅ CORS configuration for connecting frontend and backend
• ✅ Error handling in both client and server
• ✅ MVC (Model-View-Controller) architecture pattern

🙏 Acknowledgments

• The Net Ninja - For the excellent MERN Stack Tutorial
• YouTube Channel: The Net Ninja
• Tutorial source code: iamshaunjp/MERN-Stack-Tutorial

📚 Resources

• React Documentation
• Express.js Documentation
• MongoDB Documentation
• Mongoose Documentation
• The Net Ninja YouTube Channel

👤 Author

Tanathorn Rin

• GitHub: @Tanathorn-Rin
• Learning Project: Built while following The Net Ninja's MERN Stack Tutorial

📄 License

This project is licensed under the ISC License.

🤝 Contributing

This is a learning project, but suggestions and improvements are welcome! Feel free to:

1. Fork the project
2. Create your feature branch (git checkout -b feature/improvement)
3. Commit your changes (git commit -m 'Add some improvement')
4. Push to the branch (git push origin feature/improvement)
5. Open a Pull Request

📧 Contact

For questions or feedback, please open an issue on this repository.

---

⭐ If you found this project helpful for your learning journey, please give it a star!

This project was created as part of my journey to learn the MERN stack. Special thanks to The Net Ninja for the amazing tutorial!