/Chief-Chef

A web app with over 300 food recipes from around the world with instructions and video tutorials of how to prepare. Live Site @ https://lumunge.github.io/Chief-Chef/

Primary LanguageJavaScript

FOOD RECIPE APP

ABOUT

A Web application made with react js for the front end and css for styling that uses https://www.themealdb.com/api.php to serve over 300 meals, their recipes, directions, ingredients list and a video tutorial for chefs who need to try new recipes for the taste buds. It uses firebase for (google signin) for user authentication.

TECHNOLOGIES USED:

* HTML5
* CSS3
* Bootstrap4
* React-bootstrap
* Reactjs
* Axios
* Firebase

FEATURES

* Real time on page recipe searching
* Get Recipe Information (name, country of origin, image, method of preparation video tutorial)
* Google Authentication
* Mobile Responsive

PROJECT VERSION 1

  • Home page Screenshot_20210410_171423
  • Details Page Screenshot_20210410_171405

PROJECT VERSION 1.1

  • Home Page -> Authenticate with google

    Screenshot_20210621_065727

  • Default Page -> Check authentication user authentication status

    Screenshot_20210621_065745

  • Meal Page -> Show all meals with search functionalities

    Screenshot_20210621_065833

  • Single Recipe -> Show methods of preparations of a single meal

    Screenshot_20210621_065858

    Screenshot_20210621_065907

HAVE A LOOK HERE

Chief-Chef-App

SETUP

* git clone https://github.com/lumunge/Chief-Chef.git
* Create a google account and get the required firebase credentials to implement in your app
* npm i
* npm start