FitMate

A comprehensive fitness tracking and wellness management application built with React, TypeScript, and modern web technologies.

Features

• ** Interactive Dashboard**

  • Real-time fitness metrics
  • Daily progress tracking
  • Customizable widgets
  • Dark/Light mode support

• ** Exercise Management**

  • Workout planning and tracking
  • Exercise library
  • Progress monitoring
  • Custom workout creation

• ** Nutrition Tracking**

  • Meal planning and logging
  • Calorie tracking
  • Macronutrient monitoring
  • Water intake tracking

• ** Progress Visualization**

  • Interactive charts
  • Performance metrics
  • Goal tracking
  • Historical data analysis

Getting Started

Prerequisites

• Node.js 18.x or higher
• npm 8.x or higher
• Modern web browser

Installation

1. Clone the repository:

git clone https://github.com/celestialcracker/project-FitMate.git
cd project-FitMate/project

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to:

http://localhost:5173

Built With

• Frontend Framework: React 18.3.1
• Type System: TypeScript 5.5.3
• Build Tool: Vite 5.4.2
• Styling: Tailwind CSS 3.4.1
• Data Visualization: Recharts 2.12.2
• Animations: Framer Motion 11.0.8
• Icons: Lucide React 0.344.0
• Routing: React Router DOM 6.22.3
• Date Handling: date-fns 3.3.1

Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linting
npm run lint

Project Structure

project/
├── src/
│   ├── components/    # Reusable UI components
│   ├── pages/        # Page components
│   ├── utils/        # Utility functions
│   ├── types/        # TypeScript type definitions
│   ├── data/         # Static data and constants
│   ├── App.tsx       # Main application component
│   └── main.tsx      # Application entry point
├── public/           # Static assets
└── package.json      # Project dependencies

Features in Detail

Dashboard

• Real-time progress tracking
• Daily goals overview
• Workout completion status
• Nutrition summary
• Water intake monitoring

Exercise Tracking

• Comprehensive exercise library
• Custom workout creation
• Progress monitoring
• Performance analytics
• Exercise history

Nutrition Management

• Meal planning and logging
• Calorie tracking
• Macronutrient breakdown
• Water intake goals
• Dietary preferences

Progress Analytics

• Interactive performance charts
• Goal progression tracking
• Historical data analysis
• Achievement monitoring
• Trend visualization

Browser Support

• Google Chrome (90+)
• Mozilla Firefox (85+)
• Microsoft Edge (90+)
• Safari (14+)
• Mobile browsers (Chrome Android, Safari iOS)

Authors

• Umesh - Initial work - celestialcracker