Capstone Project Documentation

Capstone Project Documentation

Recipe App

Ezeilo Maureen's photo
Ezeilo Maureen
·

3 min read

Before I dive into the project documentation, I want to use this opportunity to thank the team behind the She Code Africa Mentorship program (cohort 4 ) JavaScript track. The past three months have been very productive and my learning has also been progressive. To my mentor, thank you so much for your time and listening ears. And the journey wouldn't have been complete without my smart and purpose-driven colleagues and my POC. Practice is indeed the real test of knowledge. This opportunity helped me learn as well as expose the areas I still need to work on.

My project is a food recipe web application, which is a clone of Jonas Schmedtmann's forkify app. I Re-created the JavaScript recipe search and storage app using vanilla JavaScript, HTML, CSS, and SASS. The application searches out over one million recipes from different recipe blogs. The API in use was taken from the forkify API which has two endpoints. The first endpoint is a is search query and the other is the recipe IDs.

The Functionalities implemented:

  • Displays random recipes.

  • Searches out recipes by recipe name asynchronously.

  • Displays no recipe found if a particular recipe search is not included as a recipe.

  • Fetches full details about a particular recipe when clicked asynchronously.

  • Directions button links to the main publisher's recipe blog.

  • Pagination.

  • Adds to favorites.

-Deletes from favorites.

  • Increases and decreases servings

Programming Approach

In this project, I incorporated both a functional programming approach and also object-oriented programming (OOP) approach.

Firstly, the list of possible search queries was added to an array. When a particular query inputted in the search bar is invalid, the app outputs no recipe found, and when the result from the search query is valid, the side-nav outputs paginated result of recipes with a minimum of ten recipes per page. If a particular recipe is clicked, there is an API fetch with is asynchronous. The app fetches out full details of that recipe, which includes ingredients, image, number of servings, title, a favorite button which is used to add and remove from favorites, and also a link to the direction of how to cook the recipe.

Secondly, my app gets to display random recipes of the moment on window load. And I did this by getting a random recipe category name from the array of possible search queries. Then do an API call with the search query endpoint to get the list of recipes for that category. Thereafter, get a random recipe id from the list of that category and following that, another API call to get that particular recipe object. Iterated over the object to get the values of the keys which are the values to display the HTML elements.

Conclusion

The learning resources I used are:- StackOverflow, youtube videos, and articles. The project is an eye-opener and a welcome note to writing logics in the programming world.