AI FIFO Cook What You Got

Inspiration

The inspiration for "FIFO - Fridge in Food Out" stemmed from a universal kitchen dilemma: staring into a full fridge and still not knowing what to cook. We recognized the significant issue of food waste that arises from this indecision, where fresh ingredients are often forgotten and spoil. We wanted to create a smart, intuitive, and fun solution that not only inspires creativity in the kitchen but also empowers users to make the most of what they already have, ultimately reducing waste and simplifying the daily question of "what's for dinner?"

What it does

FIFO is an intelligent kitchen assistant that transforms your available ingredients into delicious, easy-to-follow recipes. Users simply enter a primary ingredient they have on hand and select any applicable dietary restrictions (like Vegan, Keto, or Dairy-free). The application then leverages a powerful AI to instantly generate a custom recipe tailored to their input. The user interface is designed around an interactive "smart fridge" which "opens" to reveal the generated recipe, creating an engaging and delightful user experience.

How we built it

We built FIFO as a full-stack web application using a combination of modern technologies:

Frontend: The user-facing interface was crafted with HTML5, CSS3, and vanilla JavaScript. We focused on creating a responsive and visually appealing design, using custom CSS for styling the interactive elements like the navigation bar, options panel, and the smart fridge itself.

Backend: We developed a server using Node.js and the Express.js framework. This backend acts as a bridge between our frontend and the generative AI, securely handling API requests.

AI & Recipe Generation: The core of our project is Google's Gemini API (gemini-1.5-flash). We engineered specific prompts that take the user's ingredient and dietary preferences to generate unique, well-structured recipes in real-time.

API Communication: We used fetch API on the frontend and cors middleware on the backend to ensure smooth and secure communication for our POST requests.

Challenges we ran into

Throughout the development process, we encountered a few key challenges:

Prompt Engineering: Crafting the perfect prompt for the Gemini API was an iterative process. It took several attempts to get the AI to consistently return recipes in a clean, easy-to-read format while strictly adhering to all the specified dietary restrictions.

Asynchronous JavaScript: Managing the asynchronous nature of API calls was crucial. We had to implement logic to handle loading states (showing the user that a recipe is being generated) and gracefully display error messages if the API call failed, ensuring the user experience was never broken.

UI/UX Design: Designing the interactive fridge was a fun but complex challenge. We used CSS transitions and class manipulation in JavaScript to create the "opening" effect, which required careful positioning and styling to look seamless and feel intuitive.

Responsive Design: Ensuring the application looked and worked well across all devices, from mobile phones to desktops, required meticulous use of media queries to adjust layouts, font sizes, and element positioning.

Accomplishments that we're proud of

We are incredibly proud of several accomplishments with this project:

Full-Stack Integration: We successfully built and deployed a full-stack application that seamlessly integrates a frontend, backend, and a powerful third-party AI service.

Engaging User Experience: We created a unique and memorable UI with the interactive fridge. It’s more than just a form; it’s an experience that makes the process of finding a recipe enjoyable.

Practical, Real-World Solution: FIFO solves a common, everyday problem. We're proud to have built a tool that is not only technologically interesting but also genuinely useful for reducing food waste and making life easier.

Effective AI Implementation: We successfully harnessed the power of generative AI to provide dynamic, personalized content to our users, going beyond static recipe databases.

What we learned

This project was a significant learning experience for our team. We gained hands-on experience in:

Full-Stack Development: Deepening our understanding of how the frontend, backend, and APIs work together in a complete web application.

Working with Generative AI: Learning the fundamentals of prompt engineering and how to integrate AI services to create dynamic and intelligent applications.

Advanced CSS and JavaScript: We honed our skills in creating complex layouts, responsive designs, and interactive DOM manipulation.

Collaborative Development: Working as a team on a multi-faceted project taught us a great deal about version control, task management, and effective communication.

What's next for GemiKnights Summer Hackathon

We believe FIFO has tremendous potential to grow. Our vision for the future includes: Multi-Ingredient Input: Allowing users to enter a list of all their available ingredients for even more accurate and comprehensive recipe suggestions.

Image Recognition: Integrating a feature where users can upload a photo of their fridge or pantry, and the application will use computer vision to automatically identify the ingredients.

User Accounts: Introducing user authentication to allow for saving favorite recipes, creating shopping lists, and tracking pantry inventory.

Meal Planning Features: Expanding the tool to help users plan their meals for the week based on the ingredients they have, further promoting efficiency and reducing waste.