THE LIVE LINK WON'T WORK ⚠️⚠️

The live link may not work as the project is utilizing Swiggiy's live API, and it keeps changing time to time so the code breaks. Therefore, it won't display resturants data live.

Therefore I have attached a video demonstrating the working functionalities hosted from localhost.

Video Demonstration Link: https://www.loom.com/share/38f40a7fffda4e459d29446e215cb506?sid=6c9a3382-4ae2-447c-a4bd-e2b7870800a1

IDEATION PHASE

• HEADER
  • Logo
  • Nav Items
• BODY
  • Search Bar
  • Resturant Container (contains lot of Resturant Cards)
  • Resturant Card ( Img, Name of Resturant, Star Rating, cuisine, delivery time )
• FOOTER
  • Copyright
  • Name, Address of company
  • Links

React Hooks -> Normal JS utility function written by facebook developers.

- Use state() => super powerful state variable in react
- Use effect() => 
- Use Params
- Own Custom Hooks

INITIAL APP PREVIEW and LAYOUT (conflict driven UI)

SHIMMER EFFECT | UPDATE 01

UPDATE 02

UPDATE : 03

Tailwind | UPDATE: 04

UI CHANGES | UPDATE: 05

ACCORDIANS | UPDATE: 06

TYPES OF TESTING

• Unit Testing
• Integration Testing
• End to End - e2e Testing

SETTING UP TESTING IN OUR APP

• Install React Testing Liberary
• Install Jest
• Install Babel Dependencies
• Configure Babel
• Configure Parcel Config file to disable default Babel transpilation
• Jest Configuration (npx jest --init)
• Install jsdom liberary
• Install @babel/preset-react to make JSX work in test cases
• Include @babel/preset-react inside my Babel config
• Install @testing-library/jest-dom

FOLDER STRUCTURE FOR TESTING

tests Headers.test.js Headers.test.ts Headers.spec.js Headers.spec.ts