-
-
Home Page
-
Learn Page
-
Learn Page - All food
-
Learn Page - After filtering
-
When you click on a label
-
Shows additional information
-
-
-
-
-
-
-
-
-
-
-
-
Inspiration
In today's world, we're more health-conscious than ever, yet essential food safety knowledge is often scattered. We were inspired by the simple question: "Am I preparing this correctly?" We wanted to create a single, reliable platform that replaces kitchen uncertainty with confidence. Our goal was to build a website that makes learning food safety an interactive and fun experience for everyone, from college students to home cooks.
What it does
SafeBite is an interactive web platform designed to make food safety education accessible and engaging. It has two primary features:
The Info/Learning Page: A comprehensive, searchable database of over 50+ common food items. Users can quickly find detailed information on 10+ critical data points, including proper defrosting, cooking temperatures, and preservation methods.
The Virtual Kitchen: A gamified learning experience where users can apply their knowledge. By embedding a Scratch game that communicates with a Python backend, we've created an interactive simulator where users practice food safety rules in a virtual environment.
How we built it
SafeBite is a full-stack application built with a modern tech stack in under 30 hours.
Frontend: We used React with Vite to create a fast and responsive Single-Page Application (SPA). The component-based architecture allowed us to build a modular and maintainable user interface.
Database: We chose Firebase as our backend-as-a-service (BaaS) to store and manage our extensive food data. This allowed us to have a real-time, scalable database without the need to build and manage a traditional backend server.
Data Pipeline: A one-time Node.js script was written to parse and upload our curated food data from a local JSON file directly into Firestore.
Interactive Game: An embedded Scratch project was developed to simulate a virtual cooking environment where players can drag, drop, and combine ingredients to complete recipe-based challenges, while also learning to identify which foods may cause food poisoning and should be avoided. The game makes learning about food safety more engaging and helps users apply their knowledge of healthy and unsafe foods interactively and enjoyably.
Collaboration: We used GitHub for version control, managing over 50+ commits across 5 feature branches to ensure smooth collaboration.
Challenges we ran into
Integrating a diverse set of 4 major technologies (React, Firebase, Scratch, and Python) was a hard challenge. We also spent considerable time modeling our data, transforming raw text into a structured JSON format. We navigated the complexities of Git, resolving merge conflicts to keep our codebase consistent. Finally, in this Hackathon, we tried to limit our use to AI in order to learn coding and actually build something by ourselves.
Accomplishments that we're proud of
We are incredibly proud of successfully building a full-stack application that fetches real-time data from a cloud database. We learnt Scratch literally from "scratch", trying to hardcore code without the help of AI as much as possible. Our biggest accomplishment is the innovative concept of the Virtual Kitchen—bridging an accessible tool like Scratch with the power of a Python backend.
What we learned
This project was a deep dive into full-stack web development. We learned how to structure and build a modern React frontend, the power and convenience of using a BaaS like Firebase, and the importance of proper data modeling. On the backend, we learned how to create and run scripts with Node.js for data management. Most importantly, we strengthened our collaborative skills through Git, learning how to manage branches and resolve conflicts effectively as a team.
What's next for Hellth Kitchen
The future for SafeBite is exciting! We plan to:
Expand our food database to include 500+ more items.
Build out the Virtual Kitchen with 10+ more complex scenarios and challenges.
Launch a pilot program by partnering with 3-5 local schools to use SafeBite as an educational tool.
Inspiration
In today's world, we're more health-conscious than ever, yet essential food safety knowledge is often scattered. We were inspired by the simple question: "Am I preparing this correctly?" We wanted to create a single, reliable platform that replaces kitchen uncertainty with confidence. Our goal was to build a website that makes learning food safety an interactive and fun experience for everyone, from college students to home cooks.
What it does
SafeBite is an interactive web platform designed to make food safety education accessible and engaging. It has two primary features:
The Info/Learning Page: A comprehensive, searchable database of over 50+ common food items. Users can quickly find detailed information on 10+ critical data points, including proper defrosting, cooking temperatures, and preservation methods.
The Virtual Kitchen: A gamified learning experience where users can apply their knowledge. By embedding a Scratch game that communicates with a Python backend, we've created an interactive simulator where users practice food safety rules in a virtual environment.
How we built it
SafeBite is a full-stack application built with a modern tech stack in under 30 hours.
Frontend: We used React with Vite to create a fast and responsive Single-Page Application (SPA). The component-based architecture allowed us to build a modular and maintainable user interface.
Database: We chose Firebase as our backend-as-a-service (BaaS) to store and manage our extensive food data. This allowed us to have a real-time, scalable database without the need to build and manage a traditional backend server.
Data Pipeline: A one-time Node.js script was written to parse and upload our curated food data from a local JSON file directly into Firestore.
Interactive Game: An embedded Scratch project was developed to simulate a virtual cooking environment where players can drag, drop, and combine ingredients to complete recipe-based challenges, while also learning to identify which foods may cause food poisoning and should be avoided. The game makes learning about food safety more engaging and helps users apply their knowledge of healthy and unsafe foods interactively and enjoyably.
Collaboration: We used GitHub for version control, managing over 50+ commits across 5 feature branches to ensure smooth collaboration.
Challenges we ran into
Integrating a diverse set of 4 major technologies (React, Firebase, Scratch, and Python) was a hard challenge. We also spent considerable time modeling our data, transforming raw text into a structured JSON format. We navigated the complexities of Git, resolving merge conflicts to keep our codebase consistent. Finally, in this Hackathon, we tried to limit our use to AI in order to learn coding and actually build something by ourselves.
Accomplishments that we're proud of
We are incredibly proud of successfully building a full-stack application that fetches real-time data from a cloud database. We learnt Scratch literally from "scratch", trying to hardcore code without the help of AI as much as possible. Our biggest accomplishment is the innovative concept of the Virtual Kitchen—bridging an accessible tool like Scratch with the power of a Python backend.
What we learned
This project was a deep dive into full-stack web development. We learned how to structure and build a modern React frontend, the power and convenience of using a BaaS like Firebase, and the importance of proper data modeling. On the backend, we learned how to create and run scripts with Node.js for data management. Most importantly, we strengthened our collaborative skills through Git, learning how to manage branches and resolve conflicts effectively as a team.
What's next for Hellth Kitchen
The future for SafeBite is exciting! We plan to:
Expand our food database to include 500+ more items.
Build out the Virtual Kitchen with 10+ more complex scenarios and challenges.
Launch a pilot program by partnering with 3-5 local schools to use SafeBite as an educational tool.
Log in or sign up for Devpost to join the conversation.