Inspiration

We had the idea that a website should allow certain ingredients to be filtered out so that you can make something only with what you have. We tried to look for websites that implemented this functionality, but couldn’t find any, which is why we created Dish Up. With our website, you can specify the ingredients you have as well as set certain restrictions (such as dietary restrictions, allergies and ingredients you know you don't have or want).

What it does

User is able to hover over the options: vegetarian, meat, or vegan and then select the items of their choosing. After this they are able to click on the button “Generate recipe” to get a result which contains all the ingredients they’ll need as well as a link to the recipe and a picture of the dish. In the case that the user doesn’t like this result they can click “Get new recipe” which will prompt a new result with the same selected ingredients.

How we built it

We built it using HTML, CSS, JavaScript, Balsamiq for wireframes and Bootstrap

Challenges we ran into

We had trouble visualizing what our product would look like while coding so we created wireframes. We did not have enough time to implement all the functions we wanted to

Accomplishments that we're proud of

We successfully integrated the API in the code User can get recipes generated by the API

What we learned

We learned how to create and use and wireframes and the importance of them

What's next for DishUp

We wanted to implement a functionality that allows the user to filter ingredients based on preferences and dietary restrictions. We weren’t able to create this feature, but we would like to add this on to our product in the future. We would also like to implement a nutritional analysis for each recipe and also let the user set restrictions based on the number of calories they want to consume.

NOTE: run index.html to launch website

Built With

Share this project:

Updates