IngrediGenie

Don't toss it, transform it!

Comment

IngrediGenie

Inspiration

My inspiration for IngrediGenie stems from the alarming global issue of food waste. I was motivated to create a practical, accessible solution that empowers individuals to be part of the change. I believe that by providing a tool that makes sustainable cooking effortless and engaging, I can help people reduce their environmental footprint, save money, and discover the joy of creative cooking. The project's slogan, "Makeovers for leftovers," reflects the goal of turning a user's existing ingredients into something new and exciting, making the task of cooking with leftovers feel less like a chore and more like a creative challenge.

What it Does

IngrediGenie is a web-based application designed to help users combat food waste by generating delicious and creative recipes from the ingredients they already have on hand. The platform addresses the common problem of unused food in the pantry by empowering users to make the most of their groceries. By simply listing available ingredients, a user can instantly receive a recipe tailored to their specific items, reducing waste and encouraging sustainable cooking habits. The application's intuitive user interface and AI-powered back-end make the process of finding a recipe both fun and efficient.

How It Works

The application is a full-stack project built with Python's Flask framework, as shown in the provided file structure. The core of the application is an AI-powered back-end that uses the OpenAI API to generate recipes.

  1. Front-end (User Interface): The user interface is built with HTML and CSS, with a custom styles.css file to provide a clean and professional look. It features a home page (home.html) and a recipe generation page (get_started.html).

  2. Back-end (Server Logic): The back-end is powered by app.py, a Flask application. This script handles the routing, serving of web pages, and processing user requests. It takes the list of ingredients submitted by the user and forwards it to the AI for processing.

  3. Dynamic Display: The AI-generated recipe output is then dynamically updated in the get_started.html page using JavaScript, providing the user with a customized recipe. The front-end also features smooth-scrolling and a dynamic FAQ section to enhance the user experience.

Team

As a solo contestant, this project was an opportunity to manage the entire development lifecycle from beginning to end. It required me to conceptualize the idea, design the user experience, and implement both the front-end and back-end without external support. This journey solidified my skills in problem-solving, time management, and a broad range of technologies. Ultimately, this solo endeavor not only resulted in a functional product but also provided me with a comprehensive understanding of what it takes to bring a project to life independently.

How I Built It

IngrediGenie is a full-stack project built with the Flask framework in Python. I structured the project to separate static assets (styles.css) from HTML templates (home.html, get_started.html). The front-end uses clean HTML and a custom CSS stylesheet to create a professional and responsive user interface with a warm color palette. The back-end, powered by app.py, handles the routing and serves the web pages. The core functionality is driven by the OpenAI API which generates recipes based on user-provided ingredients. I used JavaScript's Fetch API to send the user's input to the Flask back-end and dynamically update the HTML with the AI-generated recipe output without a full page reload.

Challenges I Ran Into

The most significant challenge I encountered was getting the output from the OpenAI API to dynamically update in the HTML. While the Flask back-end successfully called the API and received the recipe data, I struggled to pass this data to the front-end and render it in real-time. This required me to research and implement JavaScript's Fetch API to make an asynchronous request to the Flask back-end. I then had to write a JavaScript function to parse the JSON response from the server and dynamically create the HTML elements for the recipe card. Debugging the asynchronous calls and ensuring that the generated HTML was correctly formatted and injected into the DOM was a complex but ultimately rewarding task.

Accomplishments That I'm Proud Of

I am most proud of successfully integrating the front-end and back-end to create a seamless, dynamic user experience. The asynchronous communication between the JavaScript front-end and the Flask back-end, powered by the OpenAI API, was a complex challenge that I successfully overcame. I am also proud of the clean, professional design of the website, including the scroll animations and interactive FAQ section, which I was able to build entirely on my own.

What I Learned

This project deepened my understanding of several key technologies and concepts. I gained hands-on experience with the Flask framework, front-end development (HTML, CSS, and JavaScript), and responsive design. I also learned how to implement dynamic, scroll-based animations using the Intersection Observer API. Most importantly, I learned how to handle asynchronous data fetching and dynamic DOM manipulation in JavaScript, which is a crucial skill for modern web development.

What's Next for IngrediGenie

Next steps for IngrediGenie include:

  • User Accounts: Implementing user authentication to allow users to save their favorite recipes and ingredient lists.

  • Image Generation: Integrating a text-to-image API to generate a visual representation for each recipe.

  • Improved AI: Fine-tuning the recipe generation prompt to produce more varied, detailed, and creative recipes.

  • Mobile App: Exploring the creation of a mobile application to make the tool even more accessible for on-the-go users.

Built With

Share this project:

Updates