The Hungry Guide

From hunger to happiness, one recipe at a time.

Comment

Inspiration

As college students living in dorms, we’re learning to take care of ourselves without relying on our parents. One of the daily challenges we face is figuring out what to eat. We often spend too much time deciding on meals. That’s why we wanted to create something that could help with this problem. Eventually, we came up with the idea of designing a website that lets users select ingredients they have and find recipes they can make.

What it does

The Hungry Guide is a recipe generator website. Users can choose the ingredients, and the website will suggest recipes that can be made using those ingredients. With this tool, people no longer have to struggle with the question, "What should I eat next?"

How we built it

  1. Planning & Design We designed the entire UI/UX flow in Figma.
  2. Frontend Development Tech Stack: HTML/CSS for structure and styling, JavaScript for dynamic interactions Implementation: We built interactive category buttons with active-state toggling and embedded static JSON data directly into the frontent code.
  3. Backend Attempt Our initial goal was to build a Node.js/Express server to handle Recipe data and use MongoDB for the database. Several challenges we met and time constraints led to a decision to mock data instead.

Challenges we ran into

One of the challenges was agreeing on a project idea. Everyone had different suggestions, and we had to consider what was actually doable. Another challenge was turning our ideas into working code. It’s one thing to understand a concept, but another to bring it to life with JavaScript and HTML. Through this, we learned a lot about web development. Lastly, communication was key. When different opinions came up, we needed to clearly explain our thoughts and listen to others to reach a mutual understanding.

Accomplishments that we're proud of

We feel accomplished having built a working website. This hackathon taught us that even a simple website takes a lot of effort, and it helped us understand how much work goes into web development.

What we learned

During this project, we initially attempted to build a backend server and collaborate between the backend API and frontend. However, we encountered challenges in resolving issues related to data formatting, security, and error handling. As a result, we temporarily embedded JSON data directly into the HTML for development. Through this experience, we learned that frontend-only development with mock data allows for rapid prototyping without backend dependencies. However, we also recognized its limitations—particularly in speed, maintainability, and scalability—making API communication essential for real-world applications. This process helped us understand the critical role of the backend in efficiently managing data and business logic.

What's next for The Hungry Guide

We’d love to add more features in the future! Some ideas include letting users leave reviews after trying a recipe, organizing recipes by category, and improving the design of the site to make it more visually appealing.

Built With

Share this project:

Updates