🍏 CalcuLite

A modern, bilingual web application for calculating daily calorie needs, macro breakdowns, and personalized workout plans. Built with React, TypeScript, and Tailwind CSS.

🚀 Live Demo: https://fatoomre.github.io/CalcuLite/

🔗 Live Demo

Use it here: https://fatoomre.github.io/CalcuLite/

📋 Table of Contents

• Features
• Quick Start
• Tech Stack
• Project Structure
• Configuration
• Calculation Formulas
• Usage Examples
• Contributing
• Security
• Documentation
• License
• Roadmap

✨ Features

🧮 Advanced Calorie & Macro Calculator

• Multiple BMR Formulas: Choose between Harris-Benedict (1919), Mifflin-St Jeor (1990), or Katch-McArdle (2005)
• Unit System Support: Metric (cm/kg) and Imperial (inches/lbs) measurement systems
• Enhanced Activity Levels: 5 detailed activity levels from "Very Low" to "Very Intensive"
• Precise Weight Goals: Specific weight change targets (-1kg to +1kg per week with 0.25kg increments)
• Professional Macro Distributions:
  • Balanced (40% Protein, 20% Fat, 40% Carbs)
  • Cutting/Fat Loss (50% Protein, 20% Fat, 30% Carbs)
  • Bulking/Muscle Gain (30% Protein, 20% Fat, 50% Carbs)
  • Custom Distribution (user-defined percentages)
• Body Fat Percentage: Optional input for more accurate Katch-McArdle calculations
• Pregnancy & Breastfeeding Support: Specialized calorie adjustments for expecting and nursing mothers
• ⚖️ Ideal Weight Calculator: Multiple scientific methods (Robinson, Miller, Hamwi, Devine formulas) plus BMI-based ranges with current BMI analysis
• 💧 Enhanced Water Calculator: Improved hydration recommendations based on gender, age, weight, activity level, and unit system

🏋️ Workout Planning

• Multiple Split Programs: 3-day, 4-day, 5-day, and 6-day workout routines
• Exercise Database: Integrated with free-exercise-db for exercise details
• Visual Guides: Exercise illustrations and proper form instructions
• Progressive Overload: Sets and reps recommendations
• Flexible Plans: Beginner to Advanced difficulty levels

🌍 Bilingual Support

• English & Arabic: Full RTL support for Arabic
• Seamless Switching: Toggle between languages instantly
• Localized Content: All text, numbers, and UI elements

🎨 Modern UI/UX

• Dark/Light Mode: Toggle between themes
• Responsive Design: Works on desktop, tablet, and mobile
• Green Theme: Beautiful green gradient color scheme
• Smooth Animations: Hover effects and transitions

📄 Export Features

• PDF Export: Download your complete plan
• Print Support: Print-friendly layouts
• Data Persistence: Save your calculations

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/FatoomRe/CalcuLite.git
   cd CalcuLite

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser

   http://localhost:5173
   

Build for Production

npm run build

🛠️ Tech Stack

• Frontend Framework: React 18
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• Build Tool: Vite
• PDF Generation: jsPDF
• Exercise Database: Free Exercise DB API
• Linting: ESLint

📁 Project Structure

src/
├── components/          # React components
│   ├── CalculatorForm.tsx    # Main calculator interface
│   ├── Header.tsx           # App header with theme/language toggle
│   ├── ResultsDisplay.tsx   # Calculation results display
│   ├── MacroChart.tsx       # Visual macro distribution chart
│   ├── WorkoutPlan.tsx      # Workout planning interface
│   ├── ExerciseCard.tsx     # Individual exercise display card
│   ├── SplashScreen.tsx     # Loading/welcome screen
│   └── ui/                  # Reusable UI components
│       ├── Button.tsx
│       ├── Card.tsx
│       ├── Badge.tsx
│       └── index.ts
├── data/                    # Static data and translations
│   ├── translations.ts      # EN/AR text translations
│   └── workoutPlans.ts     # Exercise routines and plans
├── hooks/                   # Custom React hooks
│   ├── useLanguage.ts      # Language switching logic
│   └── useTheme.ts         # Theme management
├── types/                   # TypeScript type definitions
│   └── index.ts            # All interface definitions
├── utils/                   # Utility functions
│   ├── calculations.ts     # BMR/TDEE/Macro calculations
│   ├── exerciseApi.ts      # Exercise database integration
│   └── pdfExport.ts        # PDF generation utilities
├── constants/               # App constants
│   └── index.ts            # Configuration constants
├── App.tsx                 # Main app component
└── main.tsx               # App entry point

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

VITE_APP_NAME="CalcuLite"
VITE_APP_VERSION="1.0.0"

Tailwind Configuration

The project uses a custom green color scheme. Modify tailwind.config.js to customize colors:

colors: {
  primary: {
    // Green shades
    500: '#22c55e',
    600: '#16a34a',
    // ...
  },
  accent: {
    // Emerald shades
    500: '#10b981',
    600: '#059669',
    // ...
  }
}

🧮 Calculation Formulas

BMR (Basal Metabolic Rate) Formulas

Harris-Benedict Formula (1919)

• Men: BMR = 88.362 + (13.397 × weight in kg) + (4.799 × height in cm) - (5.677 × age)
• Women: BMR = 447.593 + (9.247 × weight in kg) + (3.098 × height in cm) - (4.330 × age)

Mifflin-St Jeor Formula (1990) - Default

• Men: BMR = (10 × weight in kg) + (6.25 × height in cm) - (5 × age) + 5
• Women: BMR = (10 × weight in kg) + (6.25 × height in cm) - (5 × age) - 161

Katch-McArdle Formula (2005)

• All Genders: BMR = 370 + (21.6 × lean body mass in kg)
• Lean Body Mass: weight × (1 - body fat percentage / 100)

TDEE (Total Daily Energy Expenditure)

• Very Low Activity: BMR × 1.2 (desk job, no exercise)
• Low Activity: BMR × 1.375 (light exercise 1-3 days/week)
• Moderate Activity: BMR × 1.55 (moderate exercise 3-5 days/week)
• High Activity: BMR × 1.725 (hard exercise 6-7 days/week)
• Very High Activity: BMR × 1.9 (daily exercise + physical job)

Weight Goal Calculations

• Slow Weight Loss (-0.25 kg/week): TDEE - 275 calories
• Moderate Weight Loss (-0.5 kg/week): TDEE - 550 calories
• Fast Weight Loss (-1 kg/week): TDEE - 1100 calories
• Slow Weight Gain (+0.25 kg/week): TDEE + 275 calories
• Moderate Weight Gain (+0.5 kg/week): TDEE + 550 calories
• Fast Weight Gain (+1 kg/week): TDEE + 1100 calories

Professional Macro Distributions

• Balanced: 40% Protein, 20% Fat, 40% Carbs
• Cutting/Fat Loss: 50% Protein, 20% Fat, 30% Carbs
• Bulking/Muscle Gain: 30% Protein, 20% Fat, 50% Carbs
• Custom: User-defined percentages (must total 100%)

Special Adjustments

• Pregnancy: +300 calories to BMR (2nd & 3rd trimester)
• Breastfeeding: +500 calories to BMR

⚖️ Ideal Weight Calculation

Calculate your ideal weight using multiple scientific methods:

Formulas Available:

• BMI-based Range: Normal weight (BMI 18.5–24.9), Optimal weight (BMI 22)
• Robinson Formula (1983): Men: 52 + 1.9 × (height_cm - 152.4)/2.54, Women: 49 + 1.7 × (height_cm - 152.4)/2.54
• Miller Formula (1983): Men: 56.2 + 1.41 × (height_cm - 152.4)/2.54, Women: 53.1 + 1.36 × (height_cm - 152.4)/2.54
• Hamwi Formula (1964): Men: 48 + 2.7 × (height_cm - 152.4)/2.54, Women: 45.5 + 2.2 × (height_cm - 152.4)/2.54
• Devine Formula (1974): Men: 50 + 2.3 × (height_cm - 152.4)/2.54, Women: 45.5 + 2.3 × (height_cm - 152.4)/2.54

Additional Features:

• Current BMI calculation and category classification
• Results displayed in your selected unit system (kg/lbs)
• Bilingual BMI categories (English/Arabic)

💧 Water Intake Calculation

Base Formula: 35ml per kg of body weight

Gender Adjustments:

• Men: Base × 1.1 (higher muscle mass requires more hydration)
• Women: Base × 1.0 (standard requirement)

Age Adjustments:

• 65+ years: Additional 10% (decreased kidney function)
• 50-64 years: Additional 5% (metabolic changes)
• Under 50: No adjustment

Activity Level Adjustments:

• Sedentary: No additional water
• Moderately Active: +15% for exercise recovery
• Highly Active: +30% for intense training and sweat replacement

🎯 Usage Examples

Basic Calculation

const results = calculateMacros({
  age: 25,
  gender: 'male',
  height: 175,
  weight: 70,
  activityLevel: 'moderate',
  goal: 'build'
});

// Results include:
// {
//   bmr: 1654,
//   tdee: 2564,
//   goalTdee: 3064,
//   protein: { grams: 112, calories: 448, percentage: 15 },
//   carbs: { grams: 383, calories: 1532, percentage: 50 },
//   fat: { grams: 102, calories: 920, percentage: 30 },
//   water: { liters: 2.7, milliliters: 2695 }
// }

Water Intake Calculation

const waterIntake = calculateWaterIntake({
  age: 25,
  gender: 'male',
  weight: 70,
  activityLevel: 'moderate'
});

// Returns: { liters: 2.7, milliliters: 2695 }

Ideal Weight Calculation

const idealWeight = calculateIdealWeight({
  height: 175,
  weight: 70,
  gender: 'male',
  unitSystem: 'metric'
});

// Returns:
// {
//   bmi: { normal: 60, optimal: 67 },
//   robinson: 67,
//   miller: 68,
//   hamwi: 70,
//   devine: 71,
//   currentBmi: 22.9,
//   bmiCategory: 'Normal weight',
//   bmiCategoryAr: 'وزن طبيعي'
// }

Language Switching

const { language, switchLanguage } = useLanguage();
// Switch to Arabic
switchLanguage('ar');

🤝 Contributing

We welcome contributions! Please read our Contributing Guidelines for detailed information.

Quick Start:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m "Add amazing feature"
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use semantic commit messages
• Add tests for new features
• Ensure responsive design
• Support both languages (EN/AR)

🛡️ Security

This project is 100% safe for open source because:

• ✅ Frontend-only application - No server-side secrets
• ✅ Public APIs only - Uses free, open exercise database (no API keys required)
• ✅ No sensitive data stored or transmitted
• ✅ Client-side calculations - All processing happens in your browser
• ✅ Fallback system - Robust error handling with local fallback images

API Integration

• Exercise Database: Uses the free-exercise-db hosted on GitHub
• No Rate Limits: Public API with no authentication required
• Error Handling: Graceful fallbacks when API is unavailable

Privacy

• No data collection - Your personal information never leaves your device
• No tracking - No analytics or user behavior monitoring
• No cookies - No persistent data storage beyond your current session

📚 Documentation

• 📚 User Documentation - Detailed usage guide
• 🤝 Contributing Guidelines - How to contribute

📝 License

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

🗺️ Roadmap

• Mobile app version (React Native)
• User accounts and data sync
• Integration with fitness trackers
• Multiple language support beyond EN/AR
• Nutrition database integration
• Progress tracking and analytics
• 💧 Daily water intake calculator (Recently Added)
• ⚖️ Ideal weight calculator (Recently Added)
• Hydration reminders and tracking
• Weather-based water intake adjustments

🙏 Acknowledgments

• Built with 💚 by Fatimah Alabbas
• Inspired by modern fitness and nutrition science
• Icons by Lucide
• Color palette inspired by nature's green tones
• Exercise data from Free Exercise DB

---

🍏 Start your fitness journey today! 🍏
_{Calculate • Plan • Achieve}