Front-End Web Development Coursework

Author @ARazak200

Created using

Included in repo

• Video Demo
• Aadam's CookPages Web Application

Frameworks used

• React - Javascript Framework
• MUI material - External CSS
• MUI material Icons
• React-bootstrap - External CSS
• React-Icons

How to run the site

1. Clone this Repo

git clone https://github.com/ARazak200/recipeapp.git

1. Go into the root directory of the project

cd recipeapp 

1. run the site

npm start

A link to an local version of the site

http://localhost:3000

A live link to the web application

https://recipeapp-pi.vercel.app/

Features that have been Implemented

• Home Page
• About Page
• No Page
• View Recipes
• Search recipes by name and ingredients
• View Nutritional information from API
• Rate recipes
  • only Frontend, Functionality does not run

Features that have NOT been Implemented

• Add to Shopping List
  • only Frontend, Functionality does not run
• Add To Menu
  • only Frontend, Functionality does not run
• Filter recipes by diet requirement
  • only Frontend, Functionality part run

Sources

Listed below are the open-sources elements used for the web application

Image Directory

Used for the recipes

 cd recipeapp\public\images

Used for miscellaneous images

 cd recipeapp\src\assets

Home

• Fork Icon Click Here
• Chef Gif Click Here
• Star Rating Gif Click Here

About

Row 1

• Chef Kiss Gif Click Here
• Glasgow Skyline Click Here
• Jalebi gif Click Here

Row 2

• GCU Gif
• Computing Gif
• Kebab Gif

No Page

• No Page Icon

Recipe Item Images

All the recipes are sourced from BBC Foods

1. Aloo Tiki
2. Pakora
3. Chicken Biryani Pilau
4. Chicken hish Kebabs
5. Kheer
6. Sweet Rice