Namaste React

Live Link

Installation

npm install
npm start - localhost:1234
npm build

If you face a CORS issue - Please use a disabled version of CORS browser

For Chrome Windows chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security
For Chrome MacOS - open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security
For Brave MacOS - open -n -a /Applications/Brave\ Browser.app/Contents/MacOS/Brave\ Browser --args --user-data-dir="/tmp/brave_dev_sess_1" --disable-web-security

Description

This project I made while learning React from Namaste-React by Akshay Saini.
This App is not made using Creat React App.

We have used Parcel as bundler. We used Browserslist to allow App to support only last 2 Chrome & FireFox version.

This App is inspired by Swiggy, We even use actual Swiggy API to get data for Restaurants and it's menu.

• Home
- Fetch the data from Swiggy API to get list of Restaurants.
- Use RTK Query to fetch data and cache it, to prevent making multiple API calls when navigating away.
- Give option to Search for Restaurant & Filter Restaurants.
- Username input update the user's name, made using React Context.
• Restaurant Menu
- Fetch the data from Swiggy API, to get Menu Items.
• About us
- Displays data of Developer (me), fetched using GitHub API.
• Grocery
- Created using Lazy Loading concept.
- The (code of )component gets loaded only when we navigate to it.
• Add to Cart
- We use Redux to centralised the data for the items added to cart.

Parcel

• Dev Build
• Local Server
• HMR = Hot Module Replacement (Refresh page)
• File Watching Algorithm - in C++
• Caching -> Faster Builds
• Image Optimization
• Minification of Files
• Bundling of Files
• Compress
• Consistent Hashing
• Code Splitting
• Differential Bundling - support older browsers
• Diganostic
• Error Handling
• Host on HTTPs
• Tree Shaking - remove unused code
• Different Dev & Prod Bundles

Foody

Header

• Logo
• Nav items Body
• Search
• RestaurantContainer - Restaurant Card - Img - Name of the Restaurant - Rating (star) - Cuisine - ETA Footer
• Copyright
• Links
• Address
• Contact
  

Two Types of Export/Import

• Default Export/Import export default Component import Component from "./path"
• Named Export/Import export const Component import { Component } from "./path"
  
  

Redux Toolkit

• Install @reduxjs/tookit & react-redux
• Build our Store
• Connect our Store to our App
• Slice (cartSlice)
• Dispatch (action)
• Selector