donut - more than meets the label

Inspiration

We wanted to make nutritional information more engaging and intuitive. Traditional nutrition labels are hard to understand and often ignored. By visualizing sugar content through falling donuts, we make the abstract concept of "grams of sugar" immediately tangible and memorable.

What it does

Donut transforms food photos into instant nutritional insights. Users snap a photo, and our app analyzes it to display detailed nutritional information. The standout feature is our 3D visualization where each 10g of sugar becomes a falling donut, creating an immediate, visceral understanding of sugar content. Users can save foods as "eaten" or "avoided," track their history, and learn about every ingredient in their food.

How we built it

Frontend: React with modern animations and 3D graphics using Three.js
Backend: Python with FastAPI for efficient API endpoints
AI Integration: Google's Gemini API for food analysis and ingredient insights
3D Physics: Rapier.js for realistic donut falling animations
Authentication: JWT-based system for user accounts
Responsive Design: Mobile-first approach with seamless camera integration

Challenges we ran into

Optimizing image compression for faster uploads while maintaining analysis accuracy
Creating smooth transitions between states (landing → analysis → donut animation)
Implementing realistic physics for the falling donuts without impacting performance
Balancing information density with user experience in the results display
Managing state across multiple views while keeping the UI responsive

Accomplishments that we're proud of

Created an engaging, physics-based visualization that makes nutrition data memorable
Built a seamless user experience from photo capture to analysis
Developed a clean, modern UI that makes complex nutritional data approachable
Implemented detailed ingredient analysis with health insights
Successfully integrated AI for accurate food recognition and analysis