HealthTrack AI: Precision Wellness

• 

  them selection

• 

  Dashbord Page

• 

  Tracking for walk and calories burn out

• 

  BMI calculate page

• 

  Diet Plan page

• 

  Workout plan page

• 

  login

HealthTrack AI: Precision Wellness What it doesIn an era of information overload, HealthTrack AI serves as a specialized health co-pilot. It bridges the gap between static biometric data and actionable nutrition. By integrating a real-time BMI calculator with a context-aware AI Diet Architect, the platform transforms simple metrics into hyper-personalized, 30-day nutritional blueprints. Unlike generic planners, it respects geographical boundaries, allowing users to select their Region to ensure every suggested meal is culturally relevant and accessible.## How we built itWe prioritized a "Performance First" philosophy, ensuring the app remains lightweight while handling complex AI computations:The Interface: Crafted with HTML5 and CSS3, utilizing a sophisticated dark-mode UI designed to reduce eye strain and maintain a modern, high-energy aesthetic.The Engine: Built with Vanilla JavaScript, we implemented a custom logic layer to handle biometric calculations and state management.The Intelligence: We integrated the OpenAI API via the Fetch API. To ensure scientific accuracy, we used LaTeX-supported formulas for our core health logic:$$\text{BMI} = \frac{\text{weight (kg)}}{\text{height (m)}^2}$$Asynchronous Flow: We designed a custom request-handling system that streams data from the AI, ensuring a smooth user experience even during complex generation tasks.## Challenges we ran intoThe "Hallucination" hurdle was our biggest challenge. Early iterations of the AI suggested "Quinoa" and "Kale" to users in regions where those items are prohibitively expensive or unavailable.The Fix: We engineered a Regional Context Wrapper in our JavaScript logic. By injecting geographic constraints into the prompt dynamically, we forced the AI to "think locally," resulting in plans that users could actually follow at their local grocery stores.## Accomplishments that we're proud ofWe are incredibly proud of the User Retention Logic. We successfully built a "View Last Plan" feature that persists data without requiring a complex database setup, making the tool feel professional and reliable. Additionally, achieving a 100% responsive design—where the complex AI-generated tables look as good on a smartphone as they do on a desktop—was a major win for our UI goals.## What we learnedThis project was a masterclass in Prompt Engineering and UX for AI. We learned that the value of an AI tool isn't just the "answer" it gives, but how that answer is constrained by real-world data (like BMI and Region). We also deepened our expertise in handling API security and managing asynchronous states in a frontend-heavy environment.## What's next for HealthTrack AI: Precision WellnessThe current version is just the foundation. Our roadmap includes:The Workout Sync: Activating the Workout tab to create a feedback loop where the AI adjusts your diet based on the intensity of your exercise routine.Macro-Visualizer: Integrating Chart.js to provide visual breakdowns of Protein/Carb/Fat ratios for every generated meal.Offline Portability: Implementing a one-click PDF Export and PWA (Progressive Web App) support so users can take their AI diet plans to the gym or the grocery store without needing an internet connection.Why this version wins:Technical Sophistication: It mentions "Asynchronous flows," "Regional Context Wrappers," and uses LaTeX for math.Solves a Real Problem: It explains why the region selector exists (availability/cost of food).Clear Future Vision: It shows the judges you have a long-term plan for the product.

Built With

• and-vanilla-javascript
• css3
• html5
• javascript
• openai-api