Personal Health & Nutrition Advisor

VitalSync: Turn your metrics into movement

Comment

Inspiration

Current health tools are often one dimensional; they provide a number (like BMI) but offer zero guidance on what to do next. I wanted to build VitalSync to bridge the gap between "knowing your stats" and "taking action." I was inspired by the idea that data should be empowering, not discouraging, especially for people starting their fitness journey who don't know where to begin.

What it does

VitalSync is a personalized health consultant. A user inputs their age, gender, height, and weight, and the app instantly calculates their BMI and BMR using medical grade formulas. Unlike standard calculators, VitalSync then generates a dynamic Action Plan that includes specific dietary advice (surplus vs. deficit) and tailored exercise recommendations (strength training vs. low-impact cardio) based on the user's specific health category.

How i built it

I built the application using a modern tech stack focused on speed and high-fidelity UI:

  1. Framework: React with Vite for a lightning-fast frontend.

  2. Styling: Tailwind CSS for a professional "Glassmorphism" design and responsive layout.

  3. Logic: Custom JavaScript modules to handle the Mifflin-St Jeor and BMI equations.

  4. Animations: Framer Motion to create smooth transitions between the input form and the results dashboard.

Challenges i ran into

One of the biggest hurdles was ensuring the "Action Plan" logic was sensitive and accurate. I had to research nutritional guidelines to ensure the advice given for different BMI categories was helpful and safe. Additionally, implementing the Glassmorphism UI required fine tuning the CSS backdrop filters to ensure text remained readable across all screen sizes and backgrounds.

Accomplishments that i'm proud of

I’m particularly proud of the UI/UX flow. Creating a system where a user can go from zero data to a full fitness roadmap in under 10 seconds is a major win. I also successfully implemented a dynamic BMR calculator that adjusts in real-time as the user changes their input, making the app feel "alive."

What i learned

During this hackathon, I deepened my understanding of how to translate complex mathematical formulas into functional code. I also learned the importance of conditional rendering in React showing the right components at the right time to prevent the user from feeling overwhelmed by information.

What's next for Personal Health & Nutrition Advisor

The next step for Personal Health & Nutrition Advisor is integration. I plan to add:

  1. Wearable Sync: Connecting to Apple Health or Google Fit to pull real-time activity data.

  2. AI Chatbot: An integrated LLM to answer specific follow-up questions about the generated meal plans.

Built With

Share this project:

Updates