Cuisine Quest

Your adventure in flavor begins here.

Comment

Inspiration

I've always found that the biggest barrier to cooking at home is the "what to make?" question. Standard recipe websites can be overwhelming with endless options, and their search bars often require you to know exactly what you're looking for. I wanted to create a more personal and guided experience, something that felt less like a search engine and more like a helpful friend suggesting a meal. The idea was to turn the chore of finding a recipe into a fun, simple quest.

What it does

Cuisine Quest is an interactive recipe recommender that helps users discover new meals through a quick, three-step quiz. Instead of a generic search, the user first chooses a cuisine, then a meal type, and finally enters an optional main ingredient. The app then fetches data from TheMealDB API and displays a curated list of matching recipes.

The standout feature is its smart fallback logic. If a perfect match for all three criteria doesn't exist, the app automatically broadens its search to find the next best alternatives, ensuring the user never hits a dead end with a "no results" message.

How I built it

I built Cuisine Quest from the ground up using 100% vanilla HTML, CSS, and JavaScript, staying true to the core challenge of the CodeSprout Hackathon.

HTML was used to create the semantic structure of the application.

CSS was used for all styling, with a mobile-first approach. I used modern features like CSS Grid and Flexbox to create a clean, responsive layout that works on all devices, from phones to desktops.

Vanilla JavaScript (ES6) is the engine of the entire application. I used the fetch API to make asynchronous calls to TheMealDB API. All the logic for the multi-step quiz, the dynamic creation of recipe cards, the recipe modal, and the complex multi-tiered fallback search was written in pure JavaScript without any frameworks or libraries.

Challenges I ran into

My biggest challenge was working with the limitations of the free API. My initial plan was to allow users to search for recipes using multiple ingredients, but I quickly discovered the API primarily searches by recipe name. This forced me to rethink my entire approach.

Instead of giving up on a guided search, I pivoted to the quiz format and developed the smart fallback system. Implementing this multi-tiered search logic was complex, requiring careful handling of multiple asynchronous API calls and filtering the results on the client side. It was a challenging but incredibly rewarding problem to solve.

Accomplishments that I'm proud of

I'm most proud of the smart fallback feature. Turning an API limitation into a robust, user-friendly feature that prevents dead ends was a huge win. I'm also proud of building a complete, dynamic, and polished single-page application experience using only vanilla JavaScript. It proved to me that you can create complex, interactive applications without relying on frameworks, which was a huge confidence booster. Finally, I'm happy with the clean and fully responsive UI, which I believe makes the app enjoyable to use.

What I learned

This project was a deep dive into asynchronous JavaScript. I learned a great deal about managing multiple fetch requests with Promise.all and handling the flow of data. I also gained invaluable experience in DOM manipulation and structuring an application's logic without a framework. Most importantly, I learned the importance of adaptability in development, when the initial plan doesn't work, pivoting to a new solution is a critical skill.

What's next for Cuisine Quest

I have many ideas for the future of Cuisine Quest! The next logical step would be to add a "Favorites" feature that uses localStorage to allow users to save recipes they love. I would also like to explore integrating a more powerful API, like Spoonacular, to eventually implement a true multi-ingredient search. Finally, adding a simple "Surprise Me!" button for a completely random recipe could be a fun and easy addition.

Built With

Share this project:

Updates