recipe-cookbook

This is a Recipe cook-book created with ❤ using React.js

Tools used

Figma (UI wireframe and planning)
React.js
Flexbox
Spoonacular API and AXIOS
Context API
Hooks used : useState, useEffect, useContext, useReducer
React Router
Firebase Hosting

Version

1.0 (few design bugs and not so prominent functional bugs)

Learning Outcome

This project is purely data-fetching focused, especiallly focused on using the AXIOS api for getting data from the spoonacularAPI. Also getting a hold of global state management using the context api. So, this project deals with fetching data from the API, managing states between components.

There will be some additional features like "filters" and reponsive design (mobile version) added to this app in the future.

App Description

Inside of the app, you can search for recipes/cuisines/ingredients in the SearchBar - Which provides you with a maximum of 5 recipes relevant to the search. The result numbers are limited so as to not exhaust the API free calls quota (which will be fixed in the future).

Furthermore, you can get the details (ingredients needed and cooking instructions) of the recipe you love by clicking the Get Cooking Info button.

App website