Components of a Ecom Website

1) Header
2) Carousel(Slider)
3) Product Card
4) Product listing
5) Search
6) Cart
7) AddToCart
8) Checkout page
9) Wishlist
10)Categories
11) Payment

Can I build it completely using HTML Css and JS

Yes(Absolutely hard)

API call to the backend

Get the data and display the data on the frontend

Javascript- Creation of DOM using JS

document.createElement(div)

React

Advantages
Virtual DOM
Code Reusability
Component(Part of point 2)
Uni Directional
Single page application(React router)
Disadvantages
Bad SEO(Search Engine optimisation)

Search Engine optimisation

Bots would crawl your website and check for

1) Tags
a) Heading
b) Paragraphs
2) Meta tags to tell the bot about your website

Next js - (https://nextjs.org/)

Npx create-react-app <name>

Vite
Webpack

https://codesandbox.io/

Component in React
1) function
2) Html written inside javascript is known as JSX(Javascript xml notation)
3) Return jsx
4) Export the function to be used wherever it is needed
JSX and js can be used interchangeably both work JSX is better so that you know it is
a react component

Add function

function add() {
return 2+3;
}

Making it dynamic

function add(a,b) {
return a+b;
}

Arguments in react are passed using something known as Props

props would be passed as on object

When you want to get the data you would have to create an API and the API would be
returning the data to the frontend from the backend

https://designer.mocky.io/design/confirmation

Mock api creation website

How to make an API call?

1) Fetch
 2) Axios
3) AJAX (https://www.w3schools.com/js/js_ajax_http.asp)
Interview question
1) Build your own fetch

JSON

[
{
"id": 1,
"category": 1,
"title": "Apple iPhone 14",
"price": 100000
},
{
"id": 2,
"category": 1,
"title": "Apple iPhone 13",
"price": 70000
},
{
"id": 3,
"category": 1,
"title": "Google Pixel 7",
"price": 50000
},
{
"id": 4,
"category": 1,
"title": "Nokia 1100",
"price": 2000
},
{
"id": 5,
"title": "Samsung Galaxy S10",
"price": 100000
},
{
"id": 6,
"category": 1,
"title": "Sony Xperia S10",
"price": 100000
},
{
"id": 7,
"category": 2,
"title": "Apple Macbook Air M1",
"price": 120000
},
{
"id": 8,
"category": 2,
"title": "HP Pavilion E5",
"price": 70000
},
{
"id": 9,
"category": 3,
"title": "Tshirt",
"price": 1000
},
{
"id": 10,
"category": 3,
"title": "Jeans",
"price": 7000
}
]

How to get the data to be printed on the screen

1) Wait for the data (you are not taking advantage of the async behaviour of
js)
2) Rerender the component once data arrives

Hooks in JS
Helper function
Helper

Is used to remove the redundant tasks and provide them in a simple function

Something that is going to happen again and again would be put in a hook

useState hook

Lets you create a state variable

State
1) Once set it would be retained over the rerenders
2) Once set it would cause a rerender

let [products, setProducts] = useState([]);

useState would return a state variable and a function to set that state variable

Products = []; // wrong

setProducts([]) // correct

I want to call the fetch function only one on the first function call and not again and
again

In order to achieve the above you have another hook

useEffect- This is going to control the amount of times a function would be called basis
a dependency array

Only once
useEffect(function(){

}, [])

everytime
useEffect(function(){

})

every time the state variable is changed

useEffect(function(){

}, [products])

Every time products is changes the function inside useEffect would be called again and
again

Folder structure of our application

1) Components
a) ComponentName
i) ComponentName.jsx
ii) ComponentName.css
iii) index.js
2) Pages
a) PageName
i) PageName.jsx
ii) PageName.css
iii) index.js
3) Utils
4) Context
5) Hooks

What advantage does index.js bring?

import Products from './components/Products/';

Find products.js or products.jsx

If this is not found then
Find folder with name Products
index.js

https://www.freecodecamp.org/news/javascript-modules/

AddToCart Component
Two buttons + and -
Show quantity

Single button when quantity is 0

Create a state of cart

I would create this state variable in the top most parent that is app.js in our case

Data structure of the cart?

Array of objects

Object of objects

let cart = {
1: {
Id: 1,
title: “samsung”,
Price: “20000”,
Quantity: 2,
},
2: {
Id: 2,
title: “samsung2”,
Price: “30000”,
Quantity: 1,
}

cart[product.id].quantity += 1
Prop drilling: Process of passing a prop from the top most parent down to the place
where it is needed to be used is known as prop drilling

Context:

I will provide you with a wrapper (psuedo parent) which could be used to provide all the
global state and functions to all the children.

Features needed from context

1. Psuedo Parent(Provider)
2. Access the values set in the context
3. Way to set these values

Redux, MobX

Things to be done in increasing and decreasing quantity ?

If the quantity of product is 0

1) Show add to cart button
2) Once value is greater than 0 show + and - with quantity
3) If value is 0 in the add to cart function create an object for that particular
product and add to cart
4) If the value is greater than 0 then just increment the quantity of the product
available in cart
5) Decrease the value of quantity by 1 till it not 0
6) Once it is 0 remove the product(object) from the cart.

If you are changing anything in the state variable then the component would be
rerendered?

State variable having a value 10 a is 10

20
Rerender

A is 10 and you change to 10

State variable is
let cart = {
1: {
Id: 1,
title: “samsung”,
Price: “20000”,
Quantity: 2,
},
2: {
Id: 2,
title: “samsung2”,
Price: “30000”,
Quantity: 1,
}
}

let newCart = cart;

Passed by reference

let newCart = {...cart};

React wont know for change of a key that something in the object has changed because
the object keys cant be compared for rerendered

In case of object you need to change the reference

https://javascript.info/currying-partials
https://www.thatjsdude.com/
https://www.toptal.com/javascript/interview-questions
 1) Keys
2) Virtual dom
3) Hooks
4) Context
5) Redux
6) State management
7) Custom hook

https://github.com/siddharthInterviewbit/Ecom-Masterclass