Clear Recipes

• 

  Example of a recipe page

Inspiration

Since we started living alone, both of us have struggled to learn to cook due to our dietary restrictions. One of us has four common food allergies, and the other has a stomach ulcer, which makes a lot of recipes unavailable for us. In addition, we struggled to find free resources online that would provide users with _ both _ allergen information and detailed ingredients and cook instructions. For that reason, we wanted to create a service for people like us to easily find recipes they can cook.

What it does

Clear Recipes allows users to search a database of recipes by filtering for 5 common dietary restrictions and the top 9 common allergens, as well as any provided keywords. It then displays recipes that match the provided search query with links to each one. When accessed, recipes will display their name, a brief description, the time and yield, the recipe author, an image, a list of ingredients, and a list of instructions.

Clear Recipes also allows users to upload their own personal recipes. These recipes are treated the same as public recipes, but are not viewable by any other user. Users can also see their own private recipes in a separate tab. If the user wants to make their recipe private, they may submit their recipe for a manual approval process, and if it passes it will be added to the public database of recipes.

How we built it

We used NextJS and Material UI to build our website's frontend and backend. We also built our own personal API to connect with our database on PlanetScale.

Challenges we ran into

We ran into various challenges throughout the project, most notably related to connecting the frontend, backend, and database together. For example, we struggled with pulling certain data from the database, like the image and author. We also struggled with pushing our product to production, as there were some issues with logins through hosting on CloudFlare that we had to resolve.

Accomplishments that we're proud of

We are very proud of Clear Recipes for actually working (hopefully). Jokes aside, both of us had to learn and do quite a bit of work to get Clear Recipes to its minimum viable product state. One of us had to fully learn React while using it to build the frontend, and the other had to grapple with some incredibly aggravating SQL queries. We're both honestly shocked we managed to put this together.

What we learned

We were able to learn a lot through this project. As mentioned above, one of us had to fully teach themselves React and Material UI just to work on the frontend. We also learned about how to use NextJS's router, build our own APIs, use dynamic routing, and build custom input validation using MUI.

What's next for Clear Recipes

There is quite a lot that we had to scale down for a minimum viable product that we could build in 24 hours, meaning that there are plenty of things that we still plan to implement. We want to build a popularity feature that would display popular meals on the home page, social features to follow other authors, a share feature for recipes, and a feature for creating private group cookbooks. We also wanted to create a way of searching not just by allergen and diet, but by ingredients you have available, so that a user can find recipes that they both can eat and have the ability to make.

Built With

• cloudflare
• mui
• nextjs
• python
• react