Ecommerce website ReactJs

[Nlaniyadav]

GlobalState.js

import React, { createContext, useReducer } from "react"; import AppReducer from "./AppReducer";

const initialState = { cart: [], orders: [], };

export const GlobalContext = createContext(initialState);

export const GlobalProvider = ({ children }) => { const [state, dispatch] = useReducer(AppReducer, initialState);

const addItemToCartList = (item) => { dispatch({ type: "ADD_ITEM_IN_CART", payload: item, }); };

const removeItemFromCartList = (item) => { dispatch({ type: "REMOVE_ITEM_IN_CART", payload: item, }); };

const clearCart = () => { dispatch({ type: "CLEAR_CART", }); };

const addItemToOrderList = (item) => { dispatch({ type: "ADD_ITEM_IN_ORDER", payload: item, }); };

const removeItemFromOrderList = (item) => { dispatch({ type: "REMOVE_ITEM_IN_ORDER", payload: item, }); };

return ( <GlobalContext.Provider value={{ cart: state.cart, orders: state.orders, addItemToCartList, removeItemFromCartList, clearCart, addItemToOrderList, removeItemFromOrderList, }}

{children} </GlobalContext.Provider> ); };

[Nlaniyadav]

App Reducer.js

{ "name": "chat-app", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "firebase": "^10.13.2", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.26.2", "react-toastify": "^10.0.5" }, "devDependencies": { "@eslint/js": "^9.9.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^9.9.0", "eslint-plugin-react": "^7.35.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.9", "globals": "^15.9.0", "vite": "^5.4.1" } }

[Nlaniyadav]

Index.js

import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import { GlobalProvider } from "./context/GlobalState";

const root = ReactDOM.createRoot(document.getElementById("root")); root.render(

);

[Nlaniyadav]

Apps.js

import "./App.css"; import HomePage from "./components/home/HomePage"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import ItemDetail from "./components/itemDetail/ItemDetail"; import Navbar from "./components/navbar/Navbar"; import Cart from "./components/cart/Cart"; import Orders from "./components/orders/Orders"; import Checkout from "./components/checkout/Checkout";

function App() { return (

} /> } /> } /> } /> } />

); }

export default App;

[Nlaniyadav]

Homepage.js

import React from "react"; //please get this json from our github repo import items from "../../mockData/items.json"; import ItemList from "../itemList/ItemList";

function HomePage() { return (

); }

export default HomePage;

[Nlaniyadav]

Itemlist.js

import React from "react"; import Item from "../item/Item"; import "./ItemList.css"; import { Link } from "react-router-dom";

function ItemList({ items }) { return (

{items.map((item) => ( ))}

); }

export default ItemList;

[Nlaniyadav]

Item.js

import React from "react"; import "./Item.css";

function Item({ name, rating, price, saleDiscount, image, brand }) { return (

{brand}

{name}

${price}

{rating}★

); }

export default Item;

[Nlaniyadav]

ItemDetails.js

import React, { useContext, useState } from "react"; import { Link, useParams } from "react-router-dom"; import "./ItemDetail.css"; import items from "../../mockData/items.json"; import { GlobalContext } from "../../context/GlobalState";

const getItemDetail = (id) => items.filter((item) => item.id === id)[0];

function ItemDetail() { const params = useParams(); const itemId = parseInt(params?.id); const item = !!itemId && getItemDetail(itemId); const { addItemToCartList, cart } = useContext(GlobalContext); const [isAdded, setIsAdded] = useState( cart.findIndex((c) => c.id === itemId) > -1 );

return (

← Back

{item.brand}

{item.name}

${item.price}

Select size (S) Select size (M) Select size (L) Select size (XL) { addItemToCartList(item); setIsAdded(true); }} > {isAdded ? Go to Cart : "Add To bag"}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

</div>

); }

export default ItemDetail;

[Nlaniyadav]

Cart.js

import React, { useContext } from "react"; import { Link } from "react-router-dom"; import { GlobalContext } from "../../context/GlobalState"; import "./Cart.css";

function Cart() { const { cart } = useContext(GlobalContext);

return (

Cart

{!cart.length ? (

No Item Added! Please add something to your cart

) : ( <>

{cart.map((item) => (

{item.price}

{item.name}

(Expected Delivery 3 - 6 days)

))}

Next )}

); }

export default Cart;

[Nlaniyadav]

Checkout.js

import React, { useContext, useState } from "react"; import { Link } from "react-router-dom"; import { GlobalContext } from "../../context/GlobalState"; import "./Checkout.css";

const Checkout = () => { const { cart, orders, addItemToOrderList, clearCart } = useContext(GlobalContext); const { discount, extraFees, tax } = { discount: 20, extraFees: 99, tax: 5 }; const subTotal = Math.floor(cart?.reduce((sum, curr) => sum + curr.price, 0)); const total = Math.floor(subTotal + 99 + 5 - (subTotal + 99 + 5) * 0.2); const [isOrdered, setIsOrdered] = useState(false); const handlePay = () => { addItemToOrderList({ orderId: orders.length + 1, buyerId: 1, items: [...cart], price: total, address: "7 Rusk Court", deliveryDate: "11/28/2022", isDelivered: false, }); clearCart(); setIsOrdered(true); }; return (

{isOrdered ? (

Yay! 🚀 Order placed successfully. Shop more!

) : ( <>

Order Review

{cart?.length} items in cart

Coupons

Not Available

Checkout Summary

Subtotal ${subTotal}

Discount {discount}%

Extra Fee ${extraFees}

Tax ${tax}

Total

${total}

Pay ${total} )}

); };

export default Checkout;

[Nlaniyadav]

Orders.js

import React, { useContext, useState } from "react"; import { GlobalContext } from "../../context/GlobalState";

function Orders() { const { orders } = useContext(GlobalContext); return (

{orders.map((order) => (

#ID-62Z-{order.orderId}

{order.items.map((item) => (

${item.price}

{item.name}

(Expected cash on delivery 3 - 6 days)

))}

))}

); }

export default Orders;

[Nlaniyadav]

Navbars.js

import React, { useContext } from "react"; import { Link } from "react-router-dom"; import "./Navbar.css"; import { GlobalContext } from "../../context/GlobalState";

const Navbar = () => { const { cart } = useContext(GlobalContext); return (

shopinn

• Womens
• Mens
• Clothing
• Brands
• 🛒{" "} ({cart.length})
• Orders
Hi, John

); };

export default Navbar;