APOLLOFIT
A fitness web app built with Vue 3 and Vite. It works out your health metrics from a few measurements, then creates a diet or workout plan that fits your body type, goals and lifestyle.
Overview
APOLLOFIT is an innovative platform that provides users with personalized diet and workout plans tailored to their unique body type and lifestyle. Users can also browse and search through a wide selection of pre-made plans to find the perfect fit.
To build a diet plan, users enter a few details such as their gender, age, height, weight, body measurements and activity level. APOLLOFIT then calculates their health metrics and builds a weekly meal plan around their daily calorie needs. For workouts, users choose their goal and body type to get a matching training plan.
Key Features
🥗 Diet Plans
- Personalised weekly meal plans
- Breakfast, lunch, dinner and snacks for every day
- Based on daily calorie needs and activity level
🏋️ Workout Plans
- Goals: build strength, muscle or endurance
- Body types: ectomorph, mesomorph or endomorph
- A training plan matched to both
📊 Health Metrics
- BMI and weight category
- BMR and total daily calorie needs
- Body fat percentage
- Searchable library of pre-made plans
How It’s Built
- Frontend: Vue 3 single-file components using the Composition API, with Vue Router handling pages for home, workouts, diet plans, search, about and contact.
- Health calculations: All metrics are calculated in the browser using standard formulas: the Mifflin-St Jeor equation for BMR, activity multipliers for total daily calories, and the U.S. Navy method for body fat percentage.
- Forms: Reactive form state with input validation, so users see clear errors before a plan is generated.
- Search: Computed properties filter the plan library instantly as the user types.
- Styling: Hand-written CSS with custom colour variables and page transitions.
- Tooling and hosting: Built with Vite, linted with ESLint and formatted with Prettier. Deployed on Vercel with Vercel Analytics.
Tech Stack
Vue 3 · Vue Router · Vite · JavaScript · HTML · CSS · Node.js · Vercel
