MoodBite

• 

  Meet MoodBite. Emotion to food suggestion product

• 

  Type or Tap Your Mood. Users can describe their mood or choose from expressive emotion characters for a personalized match

• 

  Mood Selection. A mood-first interface lets users select their current emotional state to begin the comfort food journey.

• 

  Featured Mood Dishes. Explore curated meals thoughtfully paired with emotional states

• 

• 

  Comfort Food Result. Based on the mood selected, MoodBite recommends a cozy meal with local delivery or restaurant options

• 

  Sometimes Food Isn’t Enough. Gentle self-care actions are suggested when comfort needs go beyond the plate.

🧠 Inspiration

MoodBite was born from a simple but powerful idea: food is emotional. We wanted to create a gentle experience that doesn't try to fix your feelings — just to sit with them and offer a warm suggestion. Whether you're feeling sad, anxious, or peaceful, there's a comfort bite waiting for you.

🍽️ What it does

MoodBite lets users select or type how they feel. Based on that emotion, it offers a visually matching comfort food suggestion, paired with a short description and a generated image. Users can also explore where to find that food nearby via Google Maps.

🛠️ How we built it

We built MoodBite using:

• React with Vite for fast performance
  
• Tailwind CSS for a soft, pastel UI
  
• Lucide icons for clean visuals
  
• Google Maps API for location-based food discovery
  
• Hugging Face emotion detection using j-hartmann/emotion-english-distilroberta-base
  
• Stable Diffusion XL via Hugging Face Inference API to generate food images that match the user’s mood
  
• Pexels API fallback for consistent visual quality if generation fails
  
• Fixed emotion–food pairings to keep the experience intentional and non-random
  

🧩 Challenges we ran into

• Balancing emotional sensitivity with playful UX
  
• Ensuring WCAG-compliant color contrast using pastel tones
  
• Making AI-generated images visually align with emotional intent
  
• Handling location permissions gracefully across browsers
  

🏆 Accomplishments that we're proud of

• Created a complete MVP with emotion detection and image generation
  
• Designed an experience that feels both comforting and intentional
  
• Delivered accessible UI with emotional clarity and calm aesthetics
  
• Avoided toxic positivity while keeping the tone light and human
  

📚 What we learned

• Simplicity can be powerful — users respond well to emotionally intelligent design
  
• Even small tone changes in copy can shift the emotional weight of a product
  
• Building for emotion requires extra empathy, not extra features
  

🚀 What's next for MoodBite

• Expand multi-language support for emotional nuance
  
• Explore AI-powered journaling or mood tracking features
  

Built With

• google-maps
• huggingface-transformers
• lucide-icons
• netlify
• openai-api
• pexels-(for-preset-food-images)
• pexels-api
• react
• stable-diffusion-xl
• tailwind-css
• typescript
• vite