FitFusion AI – Fitness & Diet Assistant

Smart fitness and nutrition partner to track meals, workouts, and progress.

A modern, responsive web application that helps users track meals, log workouts, view progress analytics, and receive motivational AI feedback — all in a sleek, animated interface with modern design aesthetics.

React 18 • TypeScript 5 • Tailwind 3 • Vite 5 • Zustand • Recharts

Pages

Home

Purpose: Landing experience and quick navigation to core flows.
Features: Animated hero, CTAs (Get Started, Track Meal, Log Workout), feature highlights, testimonials, gradient visuals.

Meals (Meal Logging)

Purpose: Log meals with text or images and get instant nutrition analysis.
Features: Photo upload, description input, simulated AI analysis (calories/macros), suggestions, today’s summary, recent meals list.

Workouts (Workout Tracking)

Purpose: Record workouts and estimate calories burned.
Features: Exercise selection, duration/intensity inputs, MET-based calorie calc, progress visuals, workout history.

Dashboard

Purpose: View progress analytics and insights at a glance.
Features: AI motivational message, key metrics (meals, workouts, streak, net calories), weekly calories chart, macro pie chart, goal progress, badges.

AI Chat

Purpose: Conversational fitness and nutrition guidance.
Features: Chat UI with typing/quick prompts, simulated responses for meals, workouts, nutrition, weight loss, hydration.

Profile

Purpose: Manage personal info and goals to personalize insights.
Features: User info, body metrics, daily calorie goal, goal selection, dietary preferences, personalized tips, stats cards.

Features

Home Page

Animated Hero Section with catchy tagline and gradient text
CTA Buttons for quick navigation (Get Started, Track Meals, Log Workout)
Smooth Scroll Animations to features and testimonials sections
Responsive Design with mobile-first approach

Meal Logging

Photo Upload for meal images
Text/Voice Input for meal descriptions
AI-Powered Analysis (simulated - ready for Nutritionix API integration)
- Estimates calories, protein, carbs, and fat
- Provides nutritional suggestions
Animated Meal Cards displaying nutrition breakdown
Today's Progress Summary with real-time calorie tracking
Meal History with visual meal cards

Workout Tracking

Exercise Type Selection with popular workout quick-select
Duration & Intensity Input (low, medium, high)
MET-Based Calorie Calculation using standard fitness formulas
- Calories = MET × weight(kg) × duration(hours)
Animated Progress Bars showing workout trends
Weekly Progress Visualization
Workout History with detailed activity logs

Progress Dashboard

AI Motivational Messages with typing animation
Key Metrics Cards:
- Total meals logged
- Total workouts completed
- Current streak (days)
- Net calories (consumed vs burned)
Interactive Charts (Recharts):
- Weekly calories overview (Bar chart)
- Macronutrient breakdown (Pie chart)
Goal Progress Tracking with visual progress bars
Badges & Achievements system with gamification

AI Chat Companion

Chat Interface with typing animations
Quick Prompts for common questions
AI Responses for:
- Meal suggestions and recipes
- Workout routines
- Nutrition advice
- Weight loss/gain tips
- Hydration guidelines
Simulated AI (ready for OpenAI API integration)
Message History with timestamps

Profile & Settings

User Profile Management
- Personal information (name, email)
- Body metrics (current weight, target weight)
- Daily calorie goals
Health Goal Selection:
- Weight Loss
- Weight Gain
- Maintenance
Dietary Preferences:
- Vegetarian, Non-Vegetarian, Vegan, Keto, Paleo
Personalized Tips based on selected goals
Stats Overview cards

Design & UI

Modern Pastel Gradients (teal, purple, coral)
Smooth Framer Motion Animations:
- Page transitions
- Card hover effects
- Button interactions
- Loading states
Dark/Light Mode Toggle with theme persistence
Shadcn/UI Components for consistent design
Lucide Icons throughout the app
Responsive Grid Layouts
Glass-morphism Effects
Typography: Inter, Poppins, Nunito fonts

Gamification

Badge System:
- 🔥 7-Day Streak
- 🥗 Healthy Eater
- 💪 Workout Warrior
- 🏆 Calorie Champion
- 🌅 Early Bird
Confetti Celebrations on milestones
Streak Tracking for consistency
Progress Animations

🛠️ Tech Stack

Frontend

React 18.2 - UI library
TypeScript 5.2 - Type safety
Vite 5.0 - Build tool & dev server
Tailwind CSS 3.3 - Utility-first styling
Framer Motion 10.16 - Animation library
React Router DOM 6.20 - Client-side routing

UI Components

Shadcn/UI - Accessible component library
Radix UI - Headless UI primitives
Lucide React - Icon library
Recharts 2.8 - Chart library

State Management

Zustand 4.4 - Lightweight state management
Zustand Persist - Local storage persistence

Utilities

React Hot Toast - Toast notifications
Canvas Confetti - Celebration animations
Axios - HTTP client (ready for API calls)
clsx & tailwind-merge - Class name utilities

Backend (Ready for Integration)

FastAPI (Python) or Express.js (Node.js)
Firebase - Authentication & database
MongoDB - Alternative database option

AI APIs (Integration Ready)

Nutritionix API - Meal nutrition analysis
OpenAI GPT API - AI chat responses
Google Vision API - Image recognition

🚀 Getting Started

Prerequisites

Node.js 18+ and npm/yarn
Git

Installation

Clone the repository

git clone <repository-url>
cd fitfusion

Install dependencies

npm install

Run development server

npm run dev

Open in browser

http://localhost:5173

Build for Production

npm run build
npm run preview

📁 Project Structure

fitfusion/
├── src/
│   ├── components/
│   │   ├── ui/              # Shadcn UI components
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   ├── input.tsx
│   │   │   ├── progress.tsx
│   │   │   └── label.tsx
│   │   └── Navbar.tsx       # Navigation component
│   ├── pages/
│   │   ├── Home.tsx         # Landing page
│   │   ├── MealLogging.tsx  # Meal tracking
│   │   ├── WorkoutTracking.tsx  # Workout logging
│   │   ├── Dashboard.tsx    # Analytics dashboard
│   │   ├── AIChat.tsx       # AI chat interface
│   │   └── Profile.tsx      # User profile
│   ├── store/
│   │   └── useStore.ts      # Zustand state management
│   ├── types/
│   │   └── index.ts         # TypeScript types
│   ├── lib/
│   │   └── utils.ts         # Utility functions
│   ├── App.tsx              # Main app component
│   ├── main.tsx             # Entry point
│   └── index.css            # Global styles
├── public/                  # Static assets
├── index.html               # HTML template
├── package.json             # Dependencies
├── tailwind.config.js       # Tailwind configuration
├── tsconfig.json            # TypeScript config
└── vite.config.ts           # Vite configuration

🔌 API Integration Guide

1. Nutritionix API (Meal Analysis)

// src/services/nutritionix.ts
import axios from 'axios';

const NUTRITIONIX_API_KEY = process.env.VITE_NUTRITIONIX_API_KEY;
const NUTRITIONIX_APP_ID = process.env.VITE_NUTRITIONIX_APP_ID;

export const analyzeMeal = async (query: string) => {
  const response = await axios.post(
    'https://trackapi.nutritionix.com/v2/natural/nutrients',
    { query },
    {
      headers: {
        'x-app-id': NUTRITIONIX_APP_ID,
        'x-app-key': NUTRITIONIX_API_KEY,
      },
    }
  );
  return response.data;
};

2. OpenAI API (AI Chat)

// src/services/openai.ts
import axios from 'axios';

const OPENAI_API_KEY = process.env.VITE_OPENAI_API_KEY;

export const getChatResponse = async (message: string) => {
  const response = await axios.post(
    'https://api.openai.com/v1/chat/completions',
    {
      model: 'gpt-3.5-turbo',
      messages: [
        {
          role: 'system',
          content: 'You are a helpful fitness and nutrition coach.',
        },
        { role: 'user', content: message },
      ],
    },
    {
      headers: {
        Authorization: `Bearer ${OPENAI_API_KEY}`,
      },
    }
  );
  return response.data.choices[0].message.content;
};

3. Firebase Setup

// src/lib/firebase.ts
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: process.env.VITE_FIREBASE_API_KEY,
  authDomain: process.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VITE_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

Environment Variables

Create .env file in root:

VITE_NUTRITIONIX_API_KEY=your_api_key
VITE_NUTRITIONIX_APP_ID=your_app_id
VITE_OPENAI_API_KEY=your_api_key
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

🎯 Key Features Implementation

MET-Based Calorie Calculation

// Calories = MET × weight(kg) × duration(hours)
const calculateCalories = (met: number, weight: number, duration: number) => {
  return Math.round(met * weight * (duration / 60));
};

Streak Tracking

// Check consecutive days
const checkStreak = (meals: Meal[]) => {
  const today = new Date().toISOString().split('T')[0];
  const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
  const hasYesterdayMeal = meals.some(m => 
    new Date(m.timestamp).toISOString().split('T')[0] === yesterday
  );
  if (hasYesterdayMeal) incrementStreak();
};

Confetti Celebrations

import confetti from 'canvas-confetti';

confetti({
  particleCount: 100,
  spread: 70,
  origin: { y: 0.6 },
  colors: ['#14b8a6', '#a855f7', '#fb923c'],
});

🎨 Customization

Color Scheme

Edit tailwind.config.js:

colors: {
  teal: { /* custom teal shades */ },
  coral: { /* custom coral shades */ },
  purple: { /* custom purple shades */ },
}

Fonts

Update src/index.css:

@import url('https://fonts.googleapis.com/css2?family=Inter&family=Poppins&family=Nunito&display=swap');

📱 Responsive Design

Mobile: Bottom navigation bar
Tablet: Optimized grid layouts
Desktop: Full sidebar navigation
Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)

🐛 Known Issues & Future Enhancements

Current Limitations

AI responses are simulated (not connected to real APIs)
No actual authentication (Firebase ready but not implemented)
Meal analysis uses mock data (Nutritionix integration pending)
No backend database (data stored in localStorage)

Planned Features

📄 License

MIT License - feel free to use this project for learning or commercial purposes.

👥 Contributing

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

🙏 Acknowledgments

Shadcn/UI for beautiful components
Framer Motion for smooth animations
Recharts for data visualization
Lucide for icon library
Tailwind CSS for styling system

📞 Support

For issues or questions, please open an issue on GitHub.

Built with ❤️ for the MET Hackathon

Transform your health journey with FitFusion! 💪✨

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
src		src
LICENSE		LICENSE
README.md		README.md
SETUP_GUIDE.md		SETUP_GUIDE.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

FitFusion AI – Fitness & Diet Assistant

Pages

Home

Meals (Meal Logging)

Workouts (Workout Tracking)

Dashboard

AI Chat

Profile

Features

Home Page

Meal Logging

Workout Tracking

Progress Dashboard

AI Chat Companion

Profile & Settings

Design & UI

Gamification

🛠️ Tech Stack

Frontend

UI Components

State Management

Utilities

Backend (Ready for Integration)

AI APIs (Integration Ready)

🚀 Getting Started

Prerequisites

Installation

Build for Production

📁 Project Structure

🔌 API Integration Guide

1. Nutritionix API (Meal Analysis)

2. OpenAI API (AI Chat)

3. Firebase Setup

Environment Variables

🎯 Key Features Implementation

MET-Based Calorie Calculation

Streak Tracking

Confetti Celebrations

🎨 Customization

Color Scheme

Fonts

📱 Responsive Design

🐛 Known Issues & Future Enhancements

Current Limitations

Planned Features

📄 License

👥 Contributing

🙏 Acknowledgments

📞 Support

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages