Dream Recipe Generator

Inspiration

Since this is my first hackathon, I started brainstorming ideas by thinking of problems in my real life that I can solve with software. Recently, I've been getting into watching baking shows with my sister. Often, participants on the shows will come up with super interesting flavor combinations that we want to recreate ourselves at home, but we can't find any recipes online. With this project, I was inspired to create a tool that allows users to make their exciting and creative recipe ideas into a reality.

What it does

First, the user enters the description of a recipe that they'd like to generate. After they click the submit button, I use OpenAI's GPT-4o model to generate a recipe based on their description. Above the recipe, I also include an image visualization of the recipe description, as generated using Dalle-3.

How we built it

I built this project in Javascript using React, with API calls to OpenAI models Dalle-3 and GPT-4o.

Challenges we ran into

One major challenge I ran into was figuring out how to coordinate asynchronous functions to make sure everything displays correctly and all code executes in the right order. As someone who has coded mainly in Java and Python, asynchronous functions in Javascript were a very new concept to me. I had to work hard to debug issues where certain variables were not updating at the correct times, or null was being printed to the console. Over time, by reading lots of articles online, I was able to deepen my understanding of how asynchronous functions work and where exactly my code was going wrong.

Accomplishments that we're proud of

Since this is my first ever web app, I'm very proud of the entire project. I'm especially proud of how I debugged asynchronous function issues and wrote my first ever API calls.

What we learned

I definitely learned a ton through this process. I improved my frontend skills and worked with new libraries like bootstrap, and also learned a lot about how to make API calls, specifically skills like how to generate a token, add api calls to my code, and prevent security issues with a .env file.

What's next for Dream Recipe Generator

I hope to develop more backend features like introducing persistent user accounts, and adding features that allow people to post recipes and like/save other people's recipes.

Built With

• bootstrap
• javascript
• openai
• react