Recipe app is a simple react application that utilizes spoonacular API based on YouTube Tutorial of developedbyed.
When you launch the application, you will be taken to the homepage, where the recipes are grouped into their respective categories. If you select a recipe, you will be redirected to the recipe details page where you can view the ingredients and the step-by-step instructions for preparing the dish.
Furthermore, at the top of every page, you will find a category selection feature that enables you to browse various regional cuisines. Additionally, there is a search bar where you can enter a specific query, and if the API detects a match, it will retrieve and display the relevant recipe.
During the development of this application, I had the opportunity to explore and implement several new technologies, including styled-components, framer-motion, and splideJS. Using styled-components allowed me to create reusable components with styling that was easy to manage and maintain. The use of framer-motion added a new level of interactivity and animation to the user interface, making the application feel more engaging and dynamic. Additionally, the integration of splideJS enabled the creation of a smooth and responsive carousel for displaying recipe images.
In the tutorial provided by Developedbyed, I also learned how to leverage the power of local storage to save items and reduce the number of API hits required to retrieve data. By implementing local storage, the application was able to load previously viewed recipes more quickly and efficiently, enhancing the overall user experience. Overall, this project provided an excellent opportunity for me to learn and practice new technologies and techniques that I can apply to future development projects.
Since the tutorial is straightforward, few challenges was encountered.
Very few codebase was initiated which mostly revolves on styling.
A fairly simple project that served its purpose to make me understand react concepts, there will be no future improvement in this app.
Please don't forget to leave a ⭐🙏🏻!
In order to run this application on your local machine, you can run the following commands on the terminal:
Installs the required package dependencies
Runs the client in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.