FoodMood

FoodMood turns your meals into an entertaining science show—instantly revealing how food hits your organs with interactive visuals that make anatomy addictive.

Comment

Inspiration

Diabetes runs deep in my family—watching my grandfather struggle with food decisions and insulin inspired me to explore how what we eat affects our bodies at the organ level. I realized there's a gap between medical knowledge and public understanding of our own anatomy. Nowadays, we are constantly bombarded with what to and what not to eat, but almost nobody truly understands what goes on beneath our skin. I wanted to create something that was both educational and visually engaging, especially for young people and curious minds. That's how FoodMood was born—a tool that transforms food into insight.

What it does

FoodMood takes user input about a food item and a health condition, then analyzes how that food might affect various organs in the body. The site returns color-coded visualizations mapped onto an interactive human body diagram, representing the degree of impact on each organ. Additionally, it generates tailored textual explanations powered by AI, helping users understand the physiological reasoning behind each score. For those who are still curious and excited to learn, we have implemented an AI Chatbot that will answer all of your questions! This combination of visuals and contextual information transforms nutrition education from dry facts into an immersive experience.

How we built it

We developed FoodMood as a full-stack site with a clear separation of concerns. The frontend is built using HTML, CSS, and vanilla JavaScript, with SVG graphics representing organs and event-driven interactivity for highlighting and selecting them. The backend uses Node.js with Express and is hosted on Render. It handles AI calls to OpenAI’s API, processes user inputs, and returns organ impact data and AI-generated explanations. We deployed the frontend separately on Vercel for fast, scalable delivery. This architecture allows independent updates and efficient debugging on each side, improving maintainability and performance.

Challenges we ran into

Our first challenge took form as we tried implementing an beautiful and understandable solution in code. We realized the only way to get a truly engaging and stunning website would be to use SVG mapping through iterative refinement. Though it took a while, it got us the best result we were looking for. As we got close to completing our projecting, deploying two connected services presented many obstacles. Initially, our backend deployment failed due to incorrect repository structures and missing package files, which delayed progress. We also encountered CORS policy errors when the frontend tried to communicate with the backend, requiring configuration fixes. Coordinating asynchronous calls to the AI API proved tricky, as users needed real-time feedback during sometimes slow responses.

Accomplishments that we're proud of

We successfully built and deployed a fully functional web app that integrates AI-powered insights with interactive anatomy visualization—a combination not commonly seen in educational tools. Our approach makes learning about nutrition and physiology engaging, personalized, and visually intuitive. The modular codebase separates frontend and backend concerns clearly, enabling independent scaling and maintenance. We also designed user feedback features, like loading indicators and error handling, to maintain a smooth experience despite network delays. By far we are most proud of how we connected three distinct topics of anatomy and physiology, education, and entertainment into one solution for a tangible problem millions face. Combining my interests to solve a problem so close to home was truly rewarding and fun!

What we learned

This project taught us the importance of solid deployment workflows and directory organization when managing multi-repo projects. We gained experience handling asynchronous API interactions and integrating AI-generated content responsibly in a user interface. Additionally, we deepened our understanding of SVG manipulation for complex interactive graphics. We also saw firsthand how designing educational tools requires balancing scientific accuracy with user engagement, making content digestible without oversimplifying.

What's next for FoodMood

Looking forward, we plan to add user accounts and a food history log to personalize recommendations over time. We want to integrate external nutrition databases and APIs to broaden the scope and precision of food-organ impact data. Introducing 3D anatomical models will enhance immersion and deepen users’ connection with their bodies. We aim to pilot FoodMood in classrooms and healthcare settings as a supplement to traditional nutrition education. Finally, optimizing mobile usability and refining AI explanations will make the tool more accessible and impactful for diverse audiences.

Built With

Share this project:

Updates