MealFit

Introducing MealFit, an AI-powered chatbot that makes healthy eating effortless. Simply type what you ate and MealFit instantly analyzes your meal. MealFit brings smart nutrition to everyone.

Comment 1

Inspiration 🌟

The idea for MealFit came from a simple question: "Why isn't there a quick, fun, and intelligent way to understand the nutrition of the food we eat every day?" Most nutrition apps feel overwhelming or require tedious manual entry. I wanted to create a lightweight, chat-style experience where users could casually type what they ate and immediately get nutritional feedback — plus some fun facts and recipe ideas to keep the experience lively.

What We Built 🛠️ MealFit is a friendly AI-powered chatbot that:

Takes a casual food description ("2 eggs and toast") and returns detailed nutrition info (calories, protein, carbs, fat).

Displays a doughnut chart to visually represent macronutrient breakdown.

Speaks back responses using web speech synthesis.

Shares fun facts about different foods automatically.

Provides short food history tidbits when users ask.

Suggests recipes if users want to cook something based on what they ate.

How We Built It ⚙️ Frontend: Built with HTML, Tailwind CSS for styling, and JavaScript for functionality.

Nutrition Data: Fetched real-time from the Nutritionix API using fetch() and processed user queries.

Charts: Integrated Chart.js to create beautiful, responsive doughnut charts.

Voice Output: Used Web Speech API for natural-sounding text-to-speech responses.

Food Facts and History: Implemented a lightweight internal facts database that triggers based on keywords.

Recipes: Provided recipe links by querying external resources and matching food names.

What We Learned 📚 How to interact with real-world APIs (Nutritionix) and handle authentication securely.

How to integrate third-party libraries like Chart.js and Tailwind CSS to create a polished UI quickly.

How to add text-to-speech capabilities to web applications to create a more immersive experience.

How to think about user engagement: adding small extras like facts, history, and recipes makes the chatbot much more fun and stickier.

Challenges We Faced 🚧 API Limitations: Some APIs were not truly free (like Edamam), so we had to pivot to find an affordable and accessible nutrition API (Nutritionix).

Speech Synthesis Tuning: Getting the chatbot's voice to sound "human-like" took some experimentation, especially balancing different browser support for speech engines.

Food Recognition: Parsing free-form food input is tricky. Users can describe food in many unpredictable ways ("two slices of whole wheat toast with peanut butter" vs "toast and pb").

What's next for MealFit

Share this project:

Updates