[](https://reactjs.org/)
[](https://www.typescriptlang.org/)
[](https://nodejs.org/)
[](https://www.mongodb.com/)
[](https://www.docker.com/)
_A comprehensive full-stack fitness tracking application built by a 4-person development team_
---
## 🎯 Project Overview
**Shape Shift** is a modern, full-stack fitness tracking application designed to help users monitor their fitness journey through comprehensive tracking capabilities. The application provides tools for workout planning, nutrition tracking, progress monitoring, and fitness calculations.
### Team Information
- **Team Size**: 4 developers
- **Development Period**: Academic semester project
- **Contributors**: Parker, Diego, Jeremy, and Alex
---
## 🚀 Technology Stack
### Frontend
- **Framework**: React 18.2.0
- **Language**: JavaScript (ES6+)
- **Routing**: React Router DOM 6.10.0
- **State Management**: Redux Toolkit with React-Redux
- **UI Framework**: Material-UI (MUI) 5.14.3 + React Bootstrap 2.7.4
- **Styling**: CSS3 with component-scoped styles
- **Charts & Visualization**: Chart.js 4.4.0 with React-ChartJS-2, D3.js 7.8.5
- **HTTP Client**: Axios 1.4.0
- **Animations**: Framer Motion 9.0.7
- **Icons**: React Icons 4.7.1
### Backend
- **Runtime**: Node.js with TypeScript 4.9.5
- **Framework**: Express.js 4.18.2
- **Database**: MongoDB with native MongoDB driver 5.0.1
- **Authentication**: Express-Session with custom crypto implementation
- **Security**: CORS enabled, password hashing with scrypt
- **Development**: ts-node for TypeScript execution
- **Testing**: Mocha 10.2.0 with Chai 4.3.7 and Supertest 6.3.3
### DevOps & Deployment
- **Containerization**: Docker with Alpine Linux base
- **Web Server**: Nginx (reverse proxy)
- **Build Tools**: Custom shell scripts
- **Environment Management**: dotenv for configuration
### Development Tools
- **Package Management**: npm
- **Type Safety**: TypeScript with strict configuration
- **Testing**: Unit tests with Mocha/Chai
- **Code Organization**: Modular architecture with separation of concerns
---
## 🏗️ Architecture
### System Architecture
```
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ React Client │────│ Nginx Proxy │────│ Express API │
│ (Port 3000) │ │ (Port 80) │ │ (Port 3001) │
└─────────────────┘ └──────────────────┘ └─────────────────┘
│
▼
┌─────────────────┐
│ MongoDB Atlas │
│ (Cloud DB) │
└─────────────────┘
```
### Project Structure
```
fitness-tracker/
├── frontend/ # React application
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Route-based page components
│ │ ├── redux/ # State management
│ │ ├── styles/ # CSS stylesheets
│ │ └── test-data/ # Mock data for development
│ └── public/ # Static assets
├── api/ # Express.js backend
│ ├── src/
│ │ ├── models/ # Data models (TypeScript classes)
│ │ ├── routes/ # API endpoint handlers
│ │ ├── tests/ # Unit tests
│ │ ├── app.ts # Application entry point
│ │ ├── config.ts # Database and server configuration
│ │ └── middleware.ts # Custom middleware functions
│ └── schema/ # MongoDB validation schemas
├── etc/ # Configuration files
│ ├── nginx.conf # Nginx configuration
│ └── entrypoint.sh # Docker startup script
├── Dockerfile # Container definition
└── build.sh # Build automation script
```
---
## ✨ Core Features
### 1. User Management
- **User Registration & Authentication**: Secure account creation with password hashing
- **Session Management**: Persistent login sessions using Express-Session
- **User Profiles**: Personalized user data and preferences
### 2. Dashboard & Analytics
- **User Dashboard**: Comprehensive overview of fitness metrics
- **Data Visualization**: Interactive charts showing progress over time
- **Macro Tracking**: Detailed nutritional information display
- **Progress Monitoring**: Visual representation of fitness journey
### 3. Workout Management
- **Workout Library**: Extensive database of exercises with descriptions and diagrams
- **Custom Workout Creation**: Build personalized workout routines
- **Workout Splits**: Organize workouts by muscle groups or training days
- **Exercise Search**: Find specific workouts by muscle group or equipment
### 4. Calendar Integration
- **Workout Scheduling**: Plan workouts across weekly schedules
- **Split Management**: Assign different workout groups to specific days
- **Progress Tracking**: View historical workout data
### 5. Fitness Journal
- **Daily Entries**: Record daily fitness activities and measurements
- **Macro Tracking**: Log nutritional intake with calorie counting
- **Personal Records**: Track lifting PRs and fitness milestones
- **Body Measurements**: Monitor physical progress over time
- **Notes System**: Add personal observations and goals
### 6. Fitness Calculators
- **BMI Calculator**: Body Mass Index computation
- **BMR Calculator**: Basal Metabolic Rate estimation
- **Body Fat Percentage**: Body composition analysis
- **Protein Intake Calculator**: Nutritional requirement estimation
### 7. Data Management
- **Export Capabilities**: Save calculator results and progress data
- **Historical Data**: Access to past entries and measurements
- **Data Visualization**: Charts and graphs for trend analysis
---
## 🔌 API Documentation
### Base URL
```
Production: http://localhost/api
Development: http://localhost:3001/api
```
### Authentication Endpoints
| Method | Endpoint | Description | Body |
| ------ | ----------- | ---------------------- | -------------------------------------- |
| POST | `/sign-in` | User authentication | `{username: string, password: string}` |
| POST | `/sign-out` | Session termination | None |
| GET | `/` | Get current user info | None (requires auth) |
| GET | `/calendar` | Get user calendar data | None (requires auth) |
### User Management
| Method | Endpoint | Description | Body |
| ------ | --------------- | ----------------------- | -------------------------------------- |
| POST | `/users/create` | Create new user account | `{username: string, password: string}` |
### Workout Endpoints
| Method | Endpoint | Description | Query Parameters |
| ------ | ----------- | -------------------- | ------------------------------- |
| GET | `/workouts` | Get workout database | `skip?: number, limit?: number` |
### Workout Split Management
| Method | Endpoint | Description | Body |
| ------ | ----------------- | ------------------------- | -------------------- |
| GET | `/split` | Get user's workout split | None (requires auth) |
| GET | `/split/workouts` | Get user's workout groups | None (requires auth) |
| POST | `/split` | Update workout split | Split configuration |
### Journal Endpoints
| Method | Endpoint | Description | Body |
| ------ | -------------------------- | ----------------------------- | ---------------------------------- |
| GET | `/journal` | Get journal entries (last 30) | None (requires auth) |
| POST | `/journal/macro` | Add macro entry | `{macros: Macro[]}` |
| POST | `/journal/measurement` | Add body measurement | `{measurement: Measurement}` |
| POST | `/journal/personal-record` | Add personal record | `{personalRecord: PersonalRecord}` |
| POST | `/journal/note` | Add journal note | `{note: Note}` |
---
## 🗄️ Database Schema
### User Model
```typescript
class User {
username: string; // Unique identifier
password: string; // Hashed password
salt: string; // Password salt
journalEntries: JournalEntry[]; // Daily fitness logs
workoutGroups: WorkoutGroup[]; // Custom workout collections
workoutSplit: string[]; // 7-day workout schedule
_id?: ObjectId; // MongoDB document ID
}
```
### Workout Model
```typescript
class Workout {
workoutName: string; // Exercise name
description: string; // Exercise instructions
diagram: string; // Visual guide
muscle: string; // Target muscle group
equipment: string; // Required equipment
images: string[]; // Reference images
videos: string[]; // Tutorial videos
}
```
### Journal Entry Model
```typescript
class JournalEntry {
measurements: Measurement[]; // Body measurements
personalRecords: PersonalRecord[]; // Fitness PRs
calculatorResult: CalculatorResult[]; // Saved calculations
macros: Macro[]; // Nutritional data
notes: Note[]; // Personal notes
split: string; // Workout performed
date: string; // Entry date
}
```
---
## 🛠️ Development Setup
### Prerequisites
- Node.js (v16+)
- npm
- MongoDB Atlas account (or local MongoDB instance)
- Git
### Local Development
```bash
# Clone the repository
git clone