Hoo's Hungry

Inspiration

We were inspired to build a fridge tracker during a hackathon after learning about the staggering amount of food waste that occurs each year. It's estimated that nearly one-third of all food produced in the world is wasted, which is not only a financial burden but also has significant environmental consequences.

We realized that a major contributor to food waste is the lack of organization and visibility in our refrigerators. Often, we buy more food than we need or forget about items that are close to expiration, leading to them being thrown away. We wanted to create a tool that would help people better track and manage their fridge contents, reducing food waste and saving money in the process.

What it does

Your project is a fridge tracker that helps users keep track of the items in their fridge, their expiration dates, and reduce food waste. The project provides a web interface where users can easily add and remove items from their fridge, set reminders for upcoming expirations, and view statistics on their food consumption habits.

How we built it

We built the app mainly using HTML, CSS and Vanilla JavaScript. We used both TailwindCSS and regular CSS to style the website. We used a library called two.js to draw the fridge that would give visual feedback to the user. To map food categories to expiration times, we used a JSON file that stored a list of mappings. Our JavaScript code fetched this file and used it to determine the expiration date for each user input.

Challenges we ran into

We had some trouble with combining our work. We worked individually, with one of us writing the code for the input and table that showed the user what was in their fridge. One of us worked with two.js to create the drawing of the fridge that changed as the user input new items. When we combined our work, the styling was messed up and the formatting was wrong. We had to learn CSS Flexbox to fix this.

Accomplishments that we're proud of

We’re pretty proud of how we split up the work and were able to overcome the challenges of combining html/css/js built by different people into one page.

What we learned

We improved our CSS and HTML skills and also got to work with libraries like two.js.

What's next for Hoo's Hungry

Our next step for this project is to incorporate the OpenAI API to recommend recipes based on the ingredients that are currently in the fridge and to classify food into categories dynamically. This will help users to minimize food waste by making use of the ingredients they have on hand, and also provide them with new ideas for meals that they might not have considered before. We are excited to explore the possibilities that this integration will bring to our fridge tracker application.

Built With

• css
• html
• javascript
• tailwindcss