Battle Bites

Battle Bites turns your meal into power ups in a Street Fighter style game. Snap, upload, and play! Nutrition boosts damage, taste boosts jump height, and balanced meals boosts speed. Ready up!

Comment

Inspiration

Our inspiration comes from wanting to make nutrition engaging at any age, so what better way than to make it a game! Our goal was to take a daily task and turn it into a unique and competitive experience.

What it does

Battle Bites is a Street Fighter-style game where your meals can fuel your performance in-game, and simultaneously fuel your real-life performance. Just snap a picture of your food, upload it, and the game analyzes it using AI.

  • Nutritional value boosts your damage output
  • Taste and indulgence affect your jump height
  • Meal balance impacts your speed and agility

Every meal is unique, and your scores will vary, as not every great meal fits into a rigid box. Play casually with default foods, or create an account to upload your meals and turn them into fighters! No downloads, just your browser.

How we built it

  • We used Auth0 to handle secure user login and state persistence across sessions, integrating Auth0 login hooks and getAccessTokenSilently.
  • We integrated the Gemini API to generate food nutrition breakdowns and scores. We optimized prompts and parameters to balance nutritional accuracy, achieve a fair result randomness, and efficient token usage.
  • Food images uploaded by the user are stored in an Amazon S3 bucket, which is tied to user accounts and their character builds.
  • MongoDB Atlas stores user data, nutrition metadata, image URLs, and recipe statistics that power the fighters in-game!
  • Built with Node.js and Express for the backend, with REST for API endpoints and file uploads.
  • Socket.io to handle real-time game state via WebSockets.
  • Developed in ReactJS to manage the game loop, sprite-based animations, matchmaking, and maintaining those WebSocket connections.

Challenges we ran into

  • State management with WebSockets was a pain, since real-time gaming is crucial for seamless user experiences.
  • Balancing game logic, animation rendering, and network communication within the game loop required a more testable architecture.

Accomplishments that we're proud of

We’re proud of how we’ve merged nutrition with gaming in a fun way, where meals impact gameplay performance. We also tackled real-time multiplayer synchronization using Socket.io, ensuring smooth battles. Plus, by building a no-download web app, we made it easily accessible to anyone.

What we learned

We gained valuable experience in managing WebSocket state for real time multiplayer synchronization and fine-tuning game loops for smooth gameplay. We also improved our skills with sprite based animations in React and refined state management across the game. Additionally, we learned how to handle authentication with Auth0, ensuring the game’s mechanics respond directly to user input.

What's next for Battle Bites

We plan to integrate AI powered food recognition models to automate meal analysis and reduce the need for manual input. We'll definitely do a mobile-friendly version for a seamless experience across devices. We also look forward to expanding gameplay by introducing advanced player actions like combo moves for deeper strategy. Finally, we aim to scale more efficiently, ensuring we make private rooms for secure matches.

Share this project:

Updates