Inspiration Kitchen

Artisan Cooking with What You Have

Comment

Inspiration

I always buy food weekly with some dishes in mind to cook. However, at the end of each week, the leftover ingredients never seem suitable for a proper dish. There are websites that suggest dishes and tutorial links based on ingredients. However, they rely heavily on manual effort in data integration, therefore offering limited choices. One day, it occurred to me: why not use AI to analyze ingredients, generate proper dish options, and provide tutorials as well?

What it does

It analyzes your ingredient inputs to generate suitable dish options and recipes, including necessary and optional ingredients and cooking steps, along with built-in timers. Basically, users type in what's in their fridge or what they want to cook with, including meat, vegetables, and staples. The AI then provides three possible dish options for them to choose from. Once the user selects an option, the AI generates the recipe for them. Users can simply click on ingredients they already have or set timers according to the steps. All recipes are showcased in a clean and easy-to-read layout.

How we built it

I built it with React as the frontend framework, Tailwind CSS for styling, and Lucide React for iconography. The languages I used are TypeScript, HTML5, and CSS3. The Google Gemini API is incorporated into the two main functions—suggesting dishes and generating recipes—and the model used in this project is Gemini 1.5 Flash. The website is deployed using GitHub Pages. The model's output is structured in JSON schema, which is further formatted to suit the website layout instead of displaying raw text content.

Challenges we ran into

  1. The idea was initially ambiguous. The first thought that came to my mind was "I wish AI could help me figure out how to turn these leftover ingredients into a proper dinner without having to prompt it all the time." After several brainstorming sessions, I decided to start small: simply provide suggestions based on what users have, display a few options nicely on screen, and show the recipe in a clean and easy-to-read layout, because people can't extract key information from a wall of text while cooking.
  2. Managing API rate limits and response times was also tricky. During development, I had to implement proper loading states and error handling to manage cases where the API was slow or failed to respond.

Accomplishments that we're proud of

  1. Successfully prompted the Gemini AI to generate consistent content conforming to a specific structure, which required understanding of both the API capabilities and JSON schema design.
  2. Provided a practical solution to an everyday minor annoyance.

What we learned

I learned how to apply the Gemini API in a real-world application, involving understanding API authentication, request formatting, and response handling. Working with JSON schema outputs taught me how to structure AI prompts to get parsable results rather than freeform text. I also gained experience in integrating AI-generated content into a React application, like how to manage asynchronous API calls, handle loading states, and deal with unexpected responses. Beyond the technical skills, I learned the importance of starting with a minimum viable product. My initial vision was quite ambitious, but by focusing on the core functionality first, I was able to build something functional that could be iterated upon. Finally, I deepened my understanding of user experience design, particularly how to present AI-generated information in a way that's actually useful in a real-world context like cooking, where users need quick, scannable information rather than lengthy paragraphs.

What's next for Smart Kitchen

  1. A history function will be added. When users want to review their previous dishes, they can easily access them without spending extra tokens.
  2. A photo uploading function will be added. Once users finish their dishes, they can take a photo to memorialize the moment and their achievement, creating a positive feedback loop that contributes to user retention.
  3. A feature to shuffle nearby restaurants will also be added to help users make better and quicker food decisions. This also provides an opportunity to collaborate with local restaurants.

Built With

Share this project:

Updates