oracularzebra / nutripe

A recipe search webapp which also tells about the nutritions present in it.

This is a recipe webapp

Overview

This webapp was build as a project while learning web development. The app uses all the latest front-end stacks.

Technologies used

• HTML
• CSS
• NPM
• Reactjs
• tailwindcss
• Material UI
• Axios
• react-router
• Font awesome icons

ReactJs concepts used

• Axios
• Fetch Api
• Hooks used

  • useState()

  • useEffect()

  • useContext()

  • useRef()

  • createContext()

  • useReducer()

Features

• Favorites

  Recipes can be added to favorites, localStorage is used for this. The stored recipes can accessed later.

• Checkbox

  Checkboxes are provided after each ingredient, when checked line-through the ingredient text.

Resources

• RapidAPI

  • recipe-by-api-ninjas

    For fetching recipes

  • CalorieNinja

    For fetching nutritional info

  • icons8

    For all the icons

  • pexels

    For all the food item images

  • Material Ui

    For home page food items alignment and loading in result page and loading nutritional value loading.

Hosting

The project was hosted on cloudfare pages. Here is the link