This app was created for my software engineering class at Siena College. It features a Semantic UI frontend, and a NodeJS/Express backend that pulls recipe data from Edamam's Recipe API. The flow of the app starts at the home page, which features a pure CSS animation that cross fades between a series of images in a loop. Clicking on a button on that page takes you to a form that lets you enter filter information for your recipe search (ingredients, calories, dietary restrictions, etc). Submitting the form makes a request to the recipe API, and returns twelve recipes that match the search criteria, or redirects back to the form if no recipes were found for the specified search criteria. The recipes are displayed via Semantic cards that show an image of the recipe, the source of the recipe, the title, and some health labels. Clicking on the card will take you to a view page for that recipe. The API doesn't provide the step-by-step instructions for preparing the recipe, so the page lists nutrition information and the list of ingredients, as well as providing a link to the recipe source.
A version of this app is hosted at Heroku at this link: https://software-engineering-recipeapp.herokuapp.com/.
If I was to expand on this project, I would add an option to view more recipes per search, add the ability to build a shopping list based on a selection of recipes, and add form validation on the search page.