A comprehensive fitness tracking web application designed to help users monitor their workouts, nutrition, and fitness goals. Built with modern web technologies for a responsive and user-friendly experience.

• Features
• Tech Stack
• Project Structure
• Prerequisites
• Installation
• Running the Application
• API Endpoints
• Database Schema
• Components
• Contributing
• License

• User registration with secure password handling
• Login with session management
• Protected routes for authenticated users

• Real-time fitness summary for the current day
• 7-day workout trends with bar charts
• Nutrition tracking with calorie and macronutrient visualization
• Active goals overview
• Quick access buttons to log workouts and meals

• Log different types of workouts:
  • Calisthenics
  • Gym training
  • Running (with distance tracking)
  • Other exercises
• Track duration and add descriptions
• View complete workout history
• Delete previous workout logs

• Log meals with detailed macronutrient tracking:
  • Calories
  • Protein (grams)
  • Carbohydrates (grams)
  • Fats (grams)
• Categorize meals by type (breakfast, lunch, dinner, snack)
• View nutrition history
• Track daily calorie and macro intake

• Create and track multiple fitness goals:
  • Distance-based goals
  • Workout count goals
  • Weight loss/gain goals
  • Custom goals
• Set target values and track progress
• View active and completed goals
• Monitor goal progress over time

• Manage personal information:
  • Height
  • Weight
  • Age
  • Gender
• View and update profile details
• Account management

• Mobile-friendly interface
• Optimized for tablet and desktop viewing
• Dark mode support
• Smooth animations and transitions

• Framework: React 18 with TypeScript
• Build Tool: Vite
• Routing: React Router v6
• State Management: React Context API + React Query
• UI Components: shadCN UI (Radix UI primitives)
• Styling: Tailwind CSS
• Charts: Recharts
• Icons: Lucide React
• Forms: React Hook Form + Zod
• Notifications: Sonner Toast

• Runtime: Node.js
• Framework: Express.js
• Database: SQLite3 (per-user database isolation)
• Middleware: CORS enabled
• Server Port: 5000 (default)

motion-metric-monitor/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── ui/              # shadCN UI components
│   │   │   ├── profile/         # Profile-related components
│   │   │   ├── Logo.tsx
│   │   │   └── Navigation.tsx
│   │   ├── contexts/            # React Context providers
│   │   │   ├── AuthContext.tsx
│   │   │   └── FitnessDataContext.tsx
│   │   ├── hooks/               # Custom React hooks
│   │   ├── lib/                 # Utility functions
│   │   ├── pages/               # Page components
│   │   │   ├── Login.tsx
│   │   │   ├── Register.tsx
│   │   │   ├── Dashboard.tsx
│   │   │   ├── Workouts.tsx
│   │   │   ├── AddWorkout.tsx
│   │   │   ├── Nutrition.tsx
│   │   │   ├── AddMeal.tsx
│   │   │   ├── Goals.tsx
│   │   │   ├── AddGoal.tsx
│   │   │   ├── Profile.tsx
│   │   │   └── NotFound.tsx
│   │   ├── services/            # API services
│   │   │   └── api.ts
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   └── index.css
│   ├── public/
│   ├── vite.config.ts
│   ├── tsconfig.json
│   ├── tailwind.config.ts
│   └── package.json
│
├── backend/
│   ├── server.js                # Express server
│   ├── package.json
│   └── databases/               # SQLite DBs (per user)
│
├── components.json
├── eslint.config.js
├── postcss.config.js
└── package.json

• Node.js: v14 or higher
• npm: v6 or higher (or Bun package manager)
• Git: For version control

git clone https://github.com/yourusername/motion-metric-monitor.git
cd motion-metric-monitor

npm install
# or
bun install

cd backend
npm install
cd ..

cd backend
npm run dev
# or
npm start

The backend server will start on http://localhost:5000

npm run dev

The frontend will be available at http://localhost:8080

npm run build
# Optional: Preview production build
npm run preview

The backend is already ready for production as server.js

• POST /api/login - User login
• POST /api/register - User registration
• POST /api/logout - User logout

• POST /api/save-data - Save all user fitness data
• GET /api/get-data/:username - Retrieve user fitness data

• POST /api/workouts - Add new workout
• GET /api/workouts/:username - Get user workouts
• DELETE /api/workouts/:id - Delete workout

• POST /api/meals - Add new meal
• GET /api/meals/:username - Get user meals
• DELETE /api/meals/:id - Delete meal

• POST /api/goals - Add new goal
• GET /api/goals/:username - Get user goals
• PUT /api/goals/:id - Update goal progress
• DELETE /api/goals/:id - Delete goal

• POST /api/profile - Update user profile
• GET /api/profile/:username - Get user profile

CREATE TABLE user_profile (
  username TEXT PRIMARY KEY,
  height REAL,
  weight REAL,
  age INTEGER,
  gender TEXT
);

CREATE TABLE workouts (
  id TEXT PRIMARY KEY,
  date TEXT,
  type TEXT,
  duration INTEGER,
  description TEXT,
  distance REAL
);

CREATE TABLE meals (
  id TEXT PRIMARY KEY,
  date TEXT,
  name TEXT,
  calories INTEGER,
  protein REAL,
  carbs REAL,
  fat REAL,
  mealType TEXT
);

CREATE TABLE goals (
  id TEXT PRIMARY KEY,
  title TEXT,
  description TEXT,
  target REAL,
  current REAL,
  unit TEXT,
  startDate TEXT,
  endDate TEXT,
  type TEXT
);

CREATE TABLE user_data (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  timestamp TEXT,
  username TEXT,
  height REAL,
  weight REAL,
  age INTEGER,
  gender TEXT,
  data_json TEXT
);

• Dashboard: Main landing page showing fitness summary and charts
• Workouts: View all logged workouts
• AddWorkout: Form to log new workout sessions
• Nutrition: View meal history and nutrition data
• AddMeal: Form to log new meals with macros
• Goals: View all fitness goals and progress
• AddGoal: Form to create new fitness goals
• Profile: Manage user profile information
• Login/Register: Authentication pages
• NotFound: 404 error page

• AuthContext: Manages user authentication state
• FitnessDataContext: Manages all fitness-related data (workouts, meals, goals)

Comprehensive shadCN UI component library including:

• Buttons, inputs, forms
• Cards, dialogs, modals
• Tables, data display
• Navigation elements
• And 40+ more UI components

• User authentication with session management
• Per-user database isolation for data privacy
• Protected routes requiring authentication
• CORS protection
• Input validation and sanitization with React Hook Form + Zod

• Social features (friend challenges, leaderboards)
• Mobile app (React Native)
• Advanced analytics and reports
• Integration with fitness wearables
• Meal planning and recipes
• Push notifications
• Export data functionality (CSV, PDF)

Contributions are welcome! Please feel free to submit a Pull Request.

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

This project is licensed under the MIT License - see the LICENSE file for details.

For support, please open an issue on the GitHub repository or contact the development team.

Made with ❤️ for fitness enthusiasts