├── public
    ├── robots.txt
    ├── favicon.ico
    ├── assets
    │   └── main.png.jpg
    └── index.html
├── src
    ├── redux
    │   ├── reducer
    │   │   ├── index.js
    │   │   └── handleCart.js
    │   ├── store.js
    │   └── action
    │   │   └── index.js
    ├── components
    │   ├── index.js
    │   ├── Footer.jsx
    │   ├── main.jsx
    │   ├── Navbar.jsx
    │   └── Products.jsx
    ├── pages
    │   ├── Home.jsx
    │   ├── Products.jsx
    │   ├── index.js
    │   ├── PageNotFound.jsx
    │   ├── Login.jsx
    │   ├── ContactPage.jsx
    │   ├── Register.jsx
    │   ├── AboutPage.jsx
    │   ├── Product.jsx
    │   ├── Cart.jsx
    │   └── Checkout.jsx
    └── index.js
├── .gitignore
├── README.md
└── package.json


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Crypto27dev/react_eCommerce/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/assets/main.png.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Crypto27dev/react_eCommerce/HEAD/public/assets/main.png.jpg


--------------------------------------------------------------------------------
/src/redux/reducer/index.js:
--------------------------------------------------------------------------------
1 | import handleCart from './handleCart'
2 | import { combineReducers } from "redux";
3 | const rootReducers = combineReducers({
4 |     handleCart,
5 | })
6 | export default rootReducers


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as Navbar } from './Navbar';
2 | export { default as Main } from './main';
3 | export { default as Product } from './Products';
4 | export { default as Footer } from './Footer';


--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import {configureStore} from '@reduxjs/toolkit';
2 | import rootReducers from './reducer';
3 | const store = configureStore({
4 |     reducer: rootReducers,
5 | 
6 | })
7 | 
8 | export default store;
9 | 


--------------------------------------------------------------------------------
/src/pages/Home.jsx:
--------------------------------------------------------------------------------
 1 | import { Navbar, Main, Product, Footer } from "../components";
 2 | 
 3 | function Home() {
 4 |   return (
 5 |     <>
 6 |       <Navbar />
 7 |       <Main />
 8 |       <Product />
 9 |       <Footer />
10 |     </>
11 |   )
12 | }
13 | 
14 | export default Home


--------------------------------------------------------------------------------
/src/pages/Products.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Footer, Navbar, Product } from "../components"
 3 | 
 4 | const Products = () => {
 5 |   return (
 6 |     <>
 7 |       <Navbar />
 8 |       <Product />
 9 |       <Footer />
10 |     </>
11 |   )
12 | }
13 | 
14 | export default Products


--------------------------------------------------------------------------------
/src/redux/action/index.js:
--------------------------------------------------------------------------------
 1 | // For Add Item to Cart
 2 | export const addCart = (product) =>{
 3 |     return {
 4 |         type:"ADDITEM",
 5 |         payload:product
 6 |     }
 7 | }
 8 | 
 9 | // For Delete Item to Cart
10 | export const delCart = (product) =>{
11 |     return {
12 |         type:"DELITEM",
13 |         payload:product
14 |     }
15 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | export { default as Home } from './Home';
 2 | export { default as Products } from './Products';
 3 | export { default as Product } from './Product';
 4 | export { default as AboutPage } from './AboutPage';
 5 | export { default as ContactPage } from './ContactPage';
 6 | export { default as Cart } from './Cart';
 7 | export { default as Login } from './Login';
 8 | export { default as Register } from './Register';
 9 | export { default as Checkout } from './Checkout';
10 | export { default as PageNotFound } from './PageNotFound';


--------------------------------------------------------------------------------
/src/pages/PageNotFound.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | import { Navbar } from "../components";
 4 | 
 5 | const PageNotFound = () => {
 6 |   return (
 7 |     <>
 8 |       <Navbar />
 9 |       <div className="container my-3 py-3">
10 |         <div className="container">
11 |           <div className="row">
12 |             <div className="col-md-12 py-5 bg-light text-center">
13 |               <h4 className="p-3 display-5">404: Page Not Found</h4>
14 |               <Link to="/" className="btn  btn-outline-dark mx-4">
15 |                 <i className="fa fa-arrow-left"></i> Go Back to Home
16 |               </Link>
17 |             </div>
18 |           </div>
19 |         </div>
20 |       </div>
21 |     </>
22 |   );
23 | };
24 | 
25 | export default PageNotFound;
26 | 


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Footer = () => {
 4 |   return (
 5 |     <>
 6 |       <footer className="mb-0 text-center">
 7 |         <div className="d-flex align-items-center justify-content-center pb-5">
 8 |           <div className="col-md-6">
 9 |             <p className="mb-3 mb-md-0">Made with ❤️ by {" "}
10 |               <a  href="https://sahibsingh.vercel.app" className="text-decoration-underline text-dark fs-5" target="_blank" rel="noreferrer">Sahib Singh</a>
11 |             </p>
12 |             <a className="text-dark fs-4" href="https://github.com/ssahibsingh" target="_blank" rel="noreferrer">
13 |               <i className="fa fa-github"></i>
14 |             </a>
15 |           </div>
16 |         </div>
17 |       </footer>
18 |     </>
19 |   );
20 | };
21 | 
22 | export default Footer;
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # E-Commerce Website
 2 | 
 3 | A Ecommerce Website made with React.js Framework.
 4 | 
 5 | 
 6 | ## Demo
 7 | 
 8 | https://reactjs-ecommerce-app.vercel.app/
 9 | 
10 | 
11 | ## Features
12 | 
13 | - Easy to integrate with Backend
14 | - Fully Responsive
15 | 
16 | 
17 | ## Run Locally
18 | 
19 | Clone the project
20 | 
21 | ```bash
22 |   git clone https://github.com/ssahibsingh/React_E-Commerce
23 | ```
24 | 
25 | Go to the project directory
26 | 
27 | ```bash
28 |   cd React_E-Commerce
29 | ```
30 | 
31 | Install dependencies
32 | 
33 | ```bash
34 |   npm install
35 | ```
36 | 
37 | Start the server
38 | 
39 | ```bash
40 |   npm start
41 | ```
42 | 
43 | 
44 | ## Screenshots
45 | 
46 | ![App Screenshot](https://i.ibb.co/fQ293tm/image.png)
47 | 
48 | 
49 | ## Tech Stack
50 | 
51 | * [React](https://reactjs.org/)
52 | * [Redux](https://redux.js.org/)
53 | * [Bootstrap](https://getbootstrap.com/)
54 | * [Fake Store API](https://fakestoreapi.com/)
55 | 
56 | 
57 | 


--------------------------------------------------------------------------------
/src/components/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Home = () => {
 4 |   return (
 5 |     <>
 6 |       <div className="hero border-1 pb-3">
 7 |         <div className="card bg-dark text-white border-0 mx-3">
 8 |           <img
 9 |             className="card-img img-fluid"
10 |             src="./assets/main.png.jpg"
11 |             alt="Card"
12 |             height={500}
13 |           />
14 |           <div className="card-img-overlay d-flex align-items-center">
15 |             <div className="container">
16 |               <h5 className="card-title fs-1 text fw-lighter">New Season Arrivals</h5>
17 |               <p className="card-text fs-5 d-none d-sm-block ">
18 |                 This is a wider card with supporting text below as a natural
19 |                 lead-in to additional content. This content is a little bit
20 |                 longer.
21 |               </p>
22 |             </div>
23 |           </div>
24 |         </div>
25 |       </div>
26 |     </>
27 |   );
28 | };
29 | 
30 | export default Home;
31 | 


--------------------------------------------------------------------------------
/src/redux/reducer/handleCart.js:
--------------------------------------------------------------------------------
 1 | const cart = []
 2 | 
 3 | const handleCart = (state=cart, action) =>{
 4 |     const product = action.payload
 5 |     switch(action.type){
 6 |         case "ADDITEM":
 7 |             // Check if product already in cart
 8 |             const exist = state.find((x) => x.id === product.id)
 9 |             if(exist){
10 |                 // Increase the quantity
11 |                 return state.map((x)=>x.id ===product.id?{...x, qty: x.qty+1}:x)
12 |             }
13 |             else{
14 |                 return [...state, {...product, qty:1}]
15 |             }
16 |             break;
17 |         case "DELITEM":
18 |             const exist2 = state.find((x) => x.id === product.id)
19 |             if(exist2.qty === 1){
20 |                 return state.filter((x)=>x.id!==exist2.id)
21 |             }
22 |             else{
23 |                 return state.map((x)=> x.id===product.id?{...x, qty:x.qty-1}:x)
24 |             }
25 |             break;
26 | 
27 |         default:
28 |             return state
29 |             break;
30 |     }
31 | }
32 | 
33 | export default handleCart


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ecommerce",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@reduxjs/toolkit": "^1.8.5",
 7 |     "@testing-library/jest-dom": "^5.16.5",
 8 |     "@testing-library/react": "^13.4.0",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "bootstrap": "^5.2.1",
11 |     "font-awesome": "^4.7.0",
12 |     "react": "^18.2.0",
13 |     "react-dom": "^18.2.0",
14 |     "react-fast-marquee": "^1.3.5",
15 |     "react-loading-skeleton": "^3.1.0",
16 |     "react-redux": "^8.0.2",
17 |     "react-router-dom": "^6.4.0",
18 |     "react-scripts": "5.0.1",
19 |     "redux": "^4.2.0",
20 |     "web-vitals": "^2.1.4"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import '../node_modules/font-awesome/css/font-awesome.min.css';
 4 | import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 5 | import { BrowserRouter, Routes, Route } from 'react-router-dom';
 6 | import { Provider } from 'react-redux';
 7 | import store from './redux/store';
 8 | 
 9 | 
10 | import { Home, Product, Products, AboutPage, ContactPage, Cart, Login, Register, Checkout, PageNotFound } from "./pages"
11 | 
12 | const root = ReactDOM.createRoot(document.getElementById('root'));
13 | root.render(
14 |   <BrowserRouter>
15 |     <Provider store={store}>
16 |       <Routes>
17 |         <Route path="/" element={<Home />} />
18 |         <Route path="/product" element={<Products />} />
19 |         <Route path="/product/:id" element={<Product />} />
20 |         <Route path="/about" element={<AboutPage />} />
21 |         <Route path="/contact" element={<ContactPage />} />
22 |         <Route path="/cart" element={<Cart />} />
23 |         <Route path="/login" element={<Login />} />
24 |         <Route path="/register" element={<Register />} />
25 |         <Route path="/checkout" element={<Checkout />} />
26 |         <Route path="*" element={<PageNotFound />} />
27 |         <Route path="/product/*" element={<PageNotFound />} />
28 |       </Routes>
29 |     </Provider>
30 |   </BrowserRouter>
31 | );


--------------------------------------------------------------------------------
/src/pages/Login.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | import { Footer, Navbar } from "../components";
 4 | 
 5 | const Login = () => {
 6 |   return (
 7 |     <>
 8 |       <Navbar />
 9 |       <div className="container my-3 py-3">
10 |         <h1 className="text-center">Login</h1>
11 |         <hr />
12 |         <div class="row my-4 h-100">
13 |           <div className="col-md-4 col-lg-4 col-sm-8 mx-auto">
14 |             <form>
15 |               <div class="my-3">
16 |                 <label for="display-4">Email address</label>
17 |                 <input
18 |                   type="email"
19 |                   class="form-control"
20 |                   id="floatingInput"
21 |                   placeholder="name@example.com"
22 |                 />
23 |               </div>
24 |               <div class="my-3">
25 |                 <label for="floatingPassword display-4">Password</label>
26 |                 <input
27 |                   type="password"
28 |                   class="form-control"
29 |                   id="floatingPassword"
30 |                   placeholder="Password"
31 |                 />
32 |               </div>
33 |               <div className="my-3">
34 |                 <p>New Here? <Link to="/register" className="text-decoration-underline text-info">Register</Link> </p>
35 |               </div>
36 |               <div className="text-center">
37 |                 <button class="my-2 mx-auto btn btn-dark" type="submit" disabled>
38 |                   Login
39 |                 </button>
40 |               </div>
41 |             </form>
42 |           </div>
43 |         </div>
44 |       </div>
45 |       <Footer />
46 |     </>
47 |   );
48 | };
49 | 
50 | export default Login;
51 | 


--------------------------------------------------------------------------------
/src/pages/ContactPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Footer, Navbar } from "../components";
 3 | const ContactPage = () => {
 4 |   return (
 5 |     <>
 6 |       <Navbar />
 7 |       <div className="container my-3 py-3">
 8 |         <h1 className="text-center">Contact Us</h1>
 9 |         <hr />
10 |         <div class="row my-4 h-100">
11 |           <div className="col-md-4 col-lg-4 col-sm-8 mx-auto">
12 |             <form>
13 |               <div class="form my-3">
14 |                 <label for="Name">Name</label>
15 |                 <input
16 |                   type="email"
17 |                   class="form-control"
18 |                   id="Name"
19 |                   placeholder="Enter your name"
20 |                 />
21 |               </div>
22 |               <div class="form my-3">
23 |                 <label for="Email">Email</label>
24 |                 <input
25 |                   type="email"
26 |                   class="form-control"
27 |                   id="Email"
28 |                   placeholder="name@example.com"
29 |                 />
30 |               </div>
31 |               <div class="form  my-3">
32 |                 <label for="Password">Message</label>
33 |                 <textarea
34 |                   rows={5}
35 |                   class="form-control"
36 |                   id="Password"
37 |                   placeholder="Enter your message"
38 |                 />
39 |               </div>
40 |               <div className="text-center">
41 |                 <button
42 |                   class="my-2 px-4 mx-auto btn btn-dark"
43 |                   type="submit"
44 |                   disabled
45 |                 >
46 |                   Send
47 |                 </button>
48 |               </div>
49 |             </form>
50 |           </div>
51 |         </div>
52 |       </div>
53 |       <Footer />
54 |     </>
55 |   );
56 | };
57 | 
58 | export default ContactPage;
59 | 


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { NavLink } from 'react-router-dom'
 3 | import { useSelector } from 'react-redux'
 4 | 
 5 | const Navbar = () => {
 6 |     const state = useSelector(state => state.handleCart)
 7 |     return (
 8 |         <nav className="navbar navbar-expand-lg navbar-light bg-light py-3 sticky-top">
 9 |             <div className="container">
10 |                 <NavLink className="navbar-brand fw-bold fs-4 px-2" to="/"> React Ecommerce</NavLink>
11 |                 <button className="navbar-toggler mx-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
12 |                     <span className="navbar-toggler-icon"></span>
13 |                 </button>
14 | 
15 |                 <div className="collapse navbar-collapse" id="navbarSupportedContent">
16 |                     <ul className="navbar-nav m-auto my-2 text-center">
17 |                         <li className="nav-item">
18 |                             <NavLink className="nav-link" to="/">Home </NavLink>
19 |                         </li>
20 |                         <li className="nav-item">
21 |                             <NavLink className="nav-link" to="/product">Products</NavLink>
22 |                         </li>
23 |                         <li className="nav-item">
24 |                             <NavLink className="nav-link" to="/about">About</NavLink>
25 |                         </li>
26 |                         <li className="nav-item">
27 |                             <NavLink className="nav-link" to="/contact">Contact</NavLink>
28 |                         </li>
29 |                     </ul>
30 |                     <div className="buttons text-center">
31 |                         <NavLink to="/login" className="btn btn-outline-dark m-2"><i className="fa fa-sign-in-alt mr-1"></i> Login</NavLink>
32 |                         <NavLink to="/register" className="btn btn-outline-dark m-2"><i className="fa fa-user-plus mr-1"></i> Register</NavLink>
33 |                         <NavLink to="/cart" className="btn btn-outline-dark m-2"><i className="fa fa-cart-shopping mr-1"></i> Cart ({state.length}) </NavLink>
34 |                     </div>
35 |                 </div>
36 | 
37 | 
38 |             </div>
39 |         </nav>
40 |     )
41 | }
42 | 
43 | export default Navbar


--------------------------------------------------------------------------------
/src/pages/Register.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Footer, Navbar } from "../components";
 3 | import { Link } from 'react-router-dom';
 4 | const Register = () => {
 5 |     return (
 6 |         <>
 7 |             <Navbar />
 8 |             <div className="container my-3 py-3">
 9 |                 <h1 className="text-center">Register</h1>
10 |                 <hr />
11 |                 <div class="row my-4 h-100">
12 |                     <div className="col-md-4 col-lg-4 col-sm-8 mx-auto">
13 |                         <form>
14 |                             <div class="form my-3">
15 |                                 <label for="Name">Full Name</label>
16 |                                 <input
17 |                                     type="email"
18 |                                     class="form-control"
19 |                                     id="Name"
20 |                                     placeholder="Enter Your Name"
21 |                                 />
22 |                             </div>
23 |                             <div class="form my-3">
24 |                                 <label for="Email">Email address</label>
25 |                                 <input
26 |                                     type="email"
27 |                                     class="form-control"
28 |                                     id="Email"
29 |                                     placeholder="name@example.com"
30 |                                 />
31 |                             </div>
32 |                             <div class="form  my-3">
33 |                                 <label for="Password">Password</label>
34 |                                 <input
35 |                                     type="password"
36 |                                     class="form-control"
37 |                                     id="Password"
38 |                                     placeholder="Password"
39 |                                 />
40 |                             </div>
41 |                             <div className="my-3">
42 |                                 <p>Already has an account? <Link to="/login" className="text-decoration-underline text-info">Login</Link> </p>
43 |                             </div>
44 |                             <div className="text-center">
45 |                                 <button class="my-2 mx-auto btn btn-dark" type="submit" disabled>
46 |                                     Register
47 |                                 </button>
48 |                             </div>
49 |                         </form>
50 |                     </div>
51 |                 </div>
52 |             </div>
53 |             <Footer />
54 |         </>
55 |     )
56 | }
57 | 
58 | export default Register


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 
 9 |   <meta name="theme-color" content="#000000" />
10 |   <meta name="author" content="Sahib Singh">
11 |   <meta name="keywords" content="Sahib Singh, reactjs, ecommerce, react ecommerce website, ecommerce website, sahibsingh.vercel.app">
12 |   <!-- Primary Meta Tags -->
13 |   <title>Ecommerce Website</title>
14 |   <meta name="title" content="Ecommerce Website">
15 |   <meta name="description" content="A Ecommerce Website made with React.js Framework.">
16 | 
17 |   <!-- Open Graph / Facebook -->
18 |   <meta property="og:type" content="website">
19 |   <meta property="og:url" content="https://reactjs-ecommerce-app.vercel.app/">
20 |   <meta property="og:title" content="Ecommerce Website">
21 |   <meta property="og:description" content="A Ecommerce Website made with React.js Framework.">
22 |   <meta property="og:image"
23 |     content="https://i.ibb.co/fQ293tm/image.png">
24 | 
25 |   <!-- Twitter -->
26 |   <meta property="twitter:card" content="summary_large_image">
27 |   <meta property="twitter:url" content="https://reactjs-ecommerce-app.vercel.app/">
28 |   <meta property="twitter:title" content="Ecommerce Website">
29 |   <meta property="twitter:description" content="A Ecommerce Website made with React.js Framework.">
30 |   <meta property="twitter:image"
31 |     content="https://i.ibb.co/fQ293tm/image.png">
32 | 
33 | 
34 | 
35 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
36 |     integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
37 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
38 |     integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
39 |     crossorigin="anonymous" referrerpolicy="no-referrer" />
40 | </head>
41 | 
42 | <body>
43 |   <noscript>You need to enable JavaScript to run this app.</noscript>
44 |   <div id="root"></div>
45 | 
46 | 
47 |   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
48 |     integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
49 |     crossorigin="anonymous"></script>
50 |   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
51 |     integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
52 |     crossorigin="anonymous"></script>
53 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
54 |     integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
55 |     crossorigin="anonymous"></script>
56 | </body>
57 | 
58 | </html>


--------------------------------------------------------------------------------
/src/pages/AboutPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Footer, Navbar } from "../components";
 3 | const AboutPage = () => {
 4 |   return (
 5 |     <>
 6 |       <Navbar />
 7 |       <div className="container my-3 py-3">
 8 |         <h1 className="text-center">About Us</h1>
 9 |         <hr />
10 |         <p className="lead text-center">
11 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
12 |           facere doloremque veritatis odit similique sequi. Odit amet fuga nam
13 |           quam quasi facilis sed doloremque saepe sint perspiciatis explicabo
14 |           totam vero quas provident ipsam, veritatis nostrum velit quos
15 |           recusandae est mollitia esse fugit dolore laudantium. Ex vel explicabo
16 |           earum unde eligendi autem praesentium, doloremque distinctio nesciunt
17 |           porro tempore quis eaque labore voluptatibus ea necessitatibus
18 |           exercitationem tempora molestias. Ad consequuntur veniam sequi ullam
19 |           tempore vel tenetur soluta dolore sunt maxime aliquam corporis est,
20 |           quo saepe dolorem optio minus sint nemo totam dolorum! Reprehenderit
21 |           delectus expedita a alias nam recusandae illo debitis repellat libero,
22 |           quasi explicabo molestiae saepe, dolorem tempore itaque eveniet quam
23 |           dignissimos blanditiis excepturi harum numquam vel nihil? Ipsum
24 |         </p>
25 | 
26 |         <h2 className="text-center py-4">Our Products</h2>
27 |         <div className="row">
28 |           <div className="col-md-3 col-sm-6 mb-3 px-3">
29 |             <div className="card h-100">
30 |               <img className="card-img-top img-fluid" src="https://images.pexels.com/photos/298863/pexels-photo-298863.jpeg?auto=compress&cs=tinysrgb&w=600" alt="" height={160} />
31 |               <div className="card-body">
32 |                 <h5 className="card-title text-center">Mens's Clothing</h5>
33 |               </div>
34 |             </div>
35 |           </div>
36 |           <div className="col-md-3 col-sm-6 mb-3 px-3">
37 |             <div className="card h-100">
38 |               <img className="card-img-top img-fluid" src="https://images.pexels.com/photos/7679720/pexels-photo-7679720.jpeg?auto=compress&cs=tinysrgb&w=600" alt="" height={160} />
39 |               <div className="card-body">
40 |                 <h5 className="card-title text-center">Women's Clothing</h5>
41 |               </div>
42 |             </div>
43 |           </div>
44 |           <div className="col-md-3 col-sm-6 mb-3 px-3">
45 |             <div className="card h-100">
46 |               <img className="card-img-top img-fluid" src="https://images.pexels.com/photos/1927259/pexels-photo-1927259.jpeg?auto=compress&cs=tinysrgb&w=600" alt="" height={160} />
47 |               <div className="card-body">
48 |                 <h5 className="card-title text-center">Jewelery</h5>
49 |               </div>
50 |             </div>
51 |           </div>
52 |           <div className="col-md-3 col-sm-6 mb-3 px-3">
53 |             <div className="card h-100">
54 |               <img className="card-img-top img-fluid" src="https://images.pexels.com/photos/356056/pexels-photo-356056.jpeg?auto=compress&cs=tinysrgb&w=600" alt="" height={160} />
55 |               <div className="card-body">
56 |                 <h5 className="card-title text-center">Electronics</h5>
57 |               </div>
58 |             </div>
59 |           </div>
60 |         </div>
61 |       </div>
62 |       <Footer />
63 |     </>
64 |   )
65 | }
66 | 
67 | export default AboutPage


--------------------------------------------------------------------------------
/src/components/Products.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { useDispatch } from "react-redux";
  3 | import { addCart } from "../redux/action";
  4 | 
  5 | import Skeleton from "react-loading-skeleton";
  6 | import "react-loading-skeleton/dist/skeleton.css";
  7 | 
  8 | import { Link } from "react-router-dom";
  9 | 
 10 | const Products = () => {
 11 |   const [data, setData] = useState([]);
 12 |   const [filter, setFilter] = useState(data);
 13 |   const [loading, setLoading] = useState(false);
 14 |   let componentMounted = true;
 15 | 
 16 |   const dispatch = useDispatch();
 17 | 
 18 |   const addProduct = (product) => {
 19 |     dispatch(addCart(product))
 20 |   }
 21 | 
 22 |   useEffect(() => {
 23 |     const getProducts = async () => {
 24 |       setLoading(true);
 25 |       const response = await fetch("https://fakestoreapi.com/products/");
 26 |       if (componentMounted) {
 27 |         setData(await response.clone().json());
 28 |         setFilter(await response.json());
 29 |         setLoading(false);
 30 |       }
 31 | 
 32 |       return () => {
 33 |         componentMounted = false;
 34 |       };
 35 |     };
 36 | 
 37 |     getProducts();
 38 |   }, []);
 39 | 
 40 |   const Loading = () => {
 41 |     return (
 42 |       <>
 43 |         <div className="col-12 py-5 text-center">
 44 |           <Skeleton height={40} width={560} />
 45 |         </div>
 46 |         <div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
 47 |           <Skeleton height={592} />
 48 |         </div>
 49 |         <div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
 50 |           <Skeleton height={592} />
 51 |         </div>
 52 |         <div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
 53 |           <Skeleton height={592} />
 54 |         </div>
 55 |         <div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
 56 |           <Skeleton height={592} />
 57 |         </div>
 58 |         <div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
 59 |           <Skeleton height={592} />
 60 |         </div>
 61 |         <div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
 62 |           <Skeleton height={592} />
 63 |         </div>
 64 |       </>
 65 |     );
 66 |   };
 67 | 
 68 |   const filterProduct = (cat) => {
 69 |     const updatedList = data.filter((item) => item.category === cat);
 70 |     setFilter(updatedList);
 71 |   }
 72 |   const ShowProducts = () => {
 73 |     return (
 74 |       <>
 75 |         <div className="buttons text-center py-5">
 76 |           <button className="btn btn-outline-dark btn-sm m-2" onClick={() => setFilter(data)}>All</button>
 77 |           <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("men's clothing")}>Men's Clothing</button>
 78 |           <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("women's clothing")}>
 79 |             Women's Clothing
 80 |           </button>
 81 |           <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("jewelery")}>Jewelery</button>
 82 |           <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("electronics")}>Electronics</button>
 83 |         </div>
 84 | 
 85 |         {filter.map((product) => {
 86 |           return (
 87 |             <div id={product.id} key={product.id} className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
 88 |               <div className="card text-center h-100" key={product.id}>
 89 |                 <img
 90 |                   className="card-img-top p-3"
 91 |                   src={product.image}
 92 |                   alt="Card"
 93 |                   height={300}
 94 |                 />
 95 |                 <div className="card-body">
 96 |                   <h5 className="card-title">
 97 |                     {product.title.substring(0, 12)}...
 98 |                   </h5>
 99 |                   <p className="card-text">
100 |                     {product.description.substring(0, 90)}...
101 |                   </p>
102 |                 </div>
103 |                 <ul className="list-group list-group-flush">
104 |                   <li className="list-group-item lead">$ {product.price}</li>
105 |                   {/* <li className="list-group-item">Dapibus ac facilisis in</li>
106 |                     <li className="list-group-item">Vestibulum at eros</li> */}
107 |                 </ul>
108 |                 <div className="card-body">
109 |                   <Link to={"/product/" + product.id} className="btn btn-dark m-1">
110 |                     Buy Now
111 |                   </Link>
112 |                   <button className="btn btn-dark m-1" onClick={() => addProduct(product)}>
113 |                     Add to Cart
114 |                   </button>
115 |                 </div>
116 |               </div>
117 |             </div>
118 | 
119 |           );
120 |         })}
121 |       </>
122 |     );
123 |   };
124 |   return (
125 |     <>
126 |       <div className="container my-3 py-3">
127 |         <div className="row">
128 |           <div className="col-12">
129 |             <h2 className="display-5 text-center">Latest Products</h2>
130 |             <hr />
131 |           </div>
132 |         </div>
133 |         <div className="row justify-content-center">
134 |           {loading ? <Loading /> : <ShowProducts />}
135 |         </div>
136 |       </div>
137 |     </>
138 |   );
139 | };
140 | 
141 | export default Products;
142 | 


--------------------------------------------------------------------------------
/src/pages/Product.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import Skeleton from "react-loading-skeleton";
  3 | import { Link, useParams } from "react-router-dom";
  4 | import Marquee from "react-fast-marquee";
  5 | import { useDispatch } from "react-redux";
  6 | import { addCart } from "../redux/action";
  7 | 
  8 | import { Footer, Navbar } from "../components";
  9 | 
 10 | const Product = () => {
 11 |   const { id } = useParams();
 12 |   const [product, setProduct] = useState([]);
 13 |   const [similarProducts, setSimilarProducts] = useState([]);
 14 |   const [loading, setLoading] = useState(false);
 15 |   const [loading2, setLoading2] = useState(false);
 16 | 
 17 |   const dispatch = useDispatch();
 18 | 
 19 |   const addProduct = (product) => {
 20 |     dispatch(addCart(product));
 21 |   };
 22 | 
 23 |   useEffect(() => {
 24 |     const getProduct = async () => {
 25 |       setLoading(true);
 26 |       setLoading2(true);
 27 |       const response = await fetch(`https://fakestoreapi.com/products/${id}`);
 28 |       const data = await response.json();
 29 |       setProduct(data);
 30 |       setLoading(false);
 31 |       const response2 = await fetch(
 32 |         `https://fakestoreapi.com/products/category/${data.category}`
 33 |       );
 34 |       const data2 = await response2.json();
 35 |       setSimilarProducts(data2);
 36 |       setLoading2(false);
 37 |     };
 38 |     getProduct();
 39 |   }, [id]);
 40 | 
 41 |   const Loading = () => {
 42 |     return (
 43 |       <>
 44 |         <div className="container my-5 py-2">
 45 |           <div className="row">
 46 |             <div className="col-md-6 py-3">
 47 |               <Skeleton height={400} width={400} />
 48 |             </div>
 49 |             <div className="col-md-6 py-5">
 50 |               <Skeleton height={30} width={250} />
 51 |               <Skeleton height={90} />
 52 |               <Skeleton height={40} width={70} />
 53 |               <Skeleton height={50} width={110} />
 54 |               <Skeleton height={120} />
 55 |               <Skeleton height={40} width={110} inline={true} />
 56 |               <Skeleton className="mx-3" height={40} width={110} />
 57 |             </div>
 58 |           </div>
 59 |         </div>
 60 |       </>
 61 |     );
 62 |   };
 63 | 
 64 |   const ShowProduct = () => {
 65 |     return (
 66 |       <>
 67 |         <div className="container my-5 py-2">
 68 |           <div className="row">
 69 |             <div className="col-md-6 col-sm-12 py-3">
 70 |               <img
 71 |                 className="img-fluid"
 72 |                 src={product.image}
 73 |                 alt={product.title}
 74 |                 width="400px"
 75 |                 height="400px"
 76 |               />
 77 |             </div>
 78 |             <div className="col-md-6 col-md-6 py-5">
 79 |               <h4 className="text-uppercase text-muted">{product.category}</h4>
 80 |               <h1 className="display-5">{product.title}</h1>
 81 |               <p className="lead">
 82 |                 {product.rating && product.rating.rate}{" "}
 83 |                 <i className="fa fa-star"></i>
 84 |               </p>
 85 |               <h3 className="display-6  my-4">${product.price}</h3>
 86 |               <p className="lead">{product.description}</p>
 87 |               <button
 88 |                 className="btn btn-outline-dark"
 89 |                 onClick={() => addProduct(product)}
 90 |               >
 91 |                 Add to Cart
 92 |               </button>
 93 |               <Link to="/cart" className="btn btn-dark mx-3">
 94 |                 Go to Cart
 95 |               </Link>
 96 |             </div>
 97 |           </div>
 98 |         </div>
 99 |       </>
100 |     );
101 |   };
102 | 
103 |   const Loading2 = () => {
104 |     return (
105 |       <>
106 |         <div className="my-4 py-4">
107 |           <div className="d-flex">
108 |             <div className="mx-4">
109 |               <Skeleton height={400} width={250} />
110 |             </div>
111 |             <div className="mx-4">
112 |               <Skeleton height={400} width={250} />
113 |             </div>
114 |             <div className="mx-4">
115 |               <Skeleton height={400} width={250} />
116 |             </div>
117 |             <div className="mx-4">
118 |               <Skeleton height={400} width={250} />
119 |             </div>
120 |           </div>
121 |         </div>
122 |       </>
123 |     );
124 |   };
125 | 
126 |   const ShowSimilarProduct = () => {
127 |     return (
128 |       <>
129 |         <div className="py-4 my-4">
130 |           <div className="d-flex">
131 |             {similarProducts.map((item) => {
132 |               return (
133 |                 <div key={item.id} className="card mx-4 text-center">
134 |                   <img
135 |                     className="card-img-top p-3"
136 |                     src={item.image}
137 |                     alt="Card"
138 |                     height={300}
139 |                     width={300}
140 |                   />
141 |                   <div className="card-body">
142 |                     <h5 className="card-title">
143 |                       {item.title.substring(0, 15)}...
144 |                     </h5>
145 |                   </div>
146 |                   {/* <ul className="list-group list-group-flush">
147 |                     <li className="list-group-item lead">${product.price}</li>
148 |                   </ul> */}
149 |                   <div className="card-body">
150 |                     <Link
151 |                       to={"/product/" + item.id}
152 |                       className="btn btn-dark m-1"
153 |                     >
154 |                       Buy Now
155 |                     </Link>
156 |                     <button
157 |                       className="btn btn-dark m-1"
158 |                       onClick={() => addProduct(item)}
159 |                     >
160 |                       Add to Cart
161 |                     </button>
162 |                   </div>
163 |                 </div>
164 |               );
165 |             })}
166 |           </div>
167 |         </div>
168 |       </>
169 |     );
170 |   };
171 |   return (
172 |     <>
173 |       <Navbar />
174 |       <div className="container">
175 |         <div className="row">{loading ? <Loading /> : <ShowProduct />}</div>
176 |         <div className="row my-5 py-5">
177 |           <div className="d-none d-md-block">
178 |           <h2 className="">You may also Like</h2>
179 |             <Marquee
180 |               pauseOnHover={true}
181 |               pauseOnClick={true}
182 |               speed={50}
183 |             >
184 |               {loading2 ? <Loading2 /> : <ShowSimilarProduct />}
185 |             </Marquee>
186 |           </div>
187 |         </div>
188 |       </div>
189 |       <Footer />
190 |     </>
191 |   );
192 | };
193 | 
194 | export default Product;
195 | 


--------------------------------------------------------------------------------
/src/pages/Cart.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Footer, Navbar } from "../components";
  3 | import { useSelector, useDispatch } from "react-redux";
  4 | import { addCart, delCart } from "../redux/action";
  5 | import { Link } from "react-router-dom";
  6 | 
  7 | const Cart = () => {
  8 |   const state = useSelector((state) => state.handleCart);
  9 |   const dispatch = useDispatch();
 10 | 
 11 |   const EmptyCart = () => {
 12 |     return (
 13 |       <div className="container">
 14 |         <div className="row">
 15 |           <div className="col-md-12 py-5 bg-light text-center">
 16 |             <h4 className="p-3 display-5">Your Cart is Empty</h4>
 17 |             <Link to="/" className="btn  btn-outline-dark mx-4">
 18 |               <i className="fa fa-arrow-left"></i> Continue Shopping
 19 |             </Link>
 20 |           </div>
 21 |         </div>
 22 |       </div>
 23 |     );
 24 |   };
 25 | 
 26 |   const addItem = (product) => {
 27 |     dispatch(addCart(product));
 28 |   };
 29 |   const removeItem = (product) => {
 30 |     dispatch(delCart(product));
 31 |   };
 32 | 
 33 |   const ShowCart = () => {
 34 |     let subtotal = 0;
 35 |     let shipping = 30.0;
 36 |     let totalItems = 0;
 37 |     state.map((item) => {
 38 |       return (subtotal += item.price * item.qty);
 39 |     });
 40 | 
 41 |     state.map((item) => {
 42 |       return (totalItems += item.qty);
 43 |     });
 44 |     return (
 45 |       <>
 46 |         <section className="h-100 gradient-custom">
 47 |           <div className="container py-5">
 48 |             <div className="row d-flex justify-content-center my-4">
 49 |               <div className="col-md-8">
 50 |                 <div className="card mb-4">
 51 |                   <div className="card-header py-3">
 52 |                     <h5 className="mb-0">Item List</h5>
 53 |                   </div>
 54 |                   <div className="card-body">
 55 |                     {state.map((item) => {
 56 |                       return (
 57 |                         <div key={item.id}>
 58 |                           <div className="row d-flex align-items-center">
 59 |                             <div className="col-lg-3 col-md-12">
 60 |                               <div
 61 |                                 className="bg-image rounded"
 62 |                                 data-mdb-ripple-color="light"
 63 |                               >
 64 |                                 <img
 65 |                                   src={item.image}
 66 |                                   // className="w-100"
 67 |                                   alt={item.title}
 68 |                                   width={100}
 69 |                                   height={75}
 70 |                                 />
 71 |                               </div>
 72 |                             </div>
 73 | 
 74 |                             <div className="col-lg-5 col-md-6">
 75 |                               <p>
 76 |                                 <strong>{item.title}</strong>
 77 |                               </p>
 78 |                               {/* <p>Color: blue</p>
 79 |                               <p>Size: M</p> */}
 80 |                             </div>
 81 | 
 82 |                             <div className="col-lg-4 col-md-6">
 83 |                               <div
 84 |                                 className="d-flex mb-4"
 85 |                                 style={{ maxWidth: "300px" }}
 86 |                               >
 87 |                                 <button
 88 |                                   className="btn px-3"
 89 |                                   onClick={() => {
 90 |                                     removeItem(item);
 91 |                                   }}
 92 |                                 >
 93 |                                   <i className="fas fa-minus"></i>
 94 |                                 </button>
 95 | 
 96 |                                 <p className="mx-5">{item.qty}</p>
 97 | 
 98 |                                 <button
 99 |                                   className="btn px-3"
100 |                                   onClick={() => {
101 |                                     addItem(item);
102 |                                   }}
103 |                                 >
104 |                                   <i className="fas fa-plus"></i>
105 |                                 </button>
106 |                               </div>
107 | 
108 |                               <p className="text-start text-md-center">
109 |                                 <strong>
110 |                                   <span className="text-muted">{item.qty}</span>{" "}
111 |                                   x ${item.price}
112 |                                 </strong>
113 |                               </p>
114 |                             </div>
115 |                           </div>
116 | 
117 |                           <hr className="my-4" />
118 |                         </div>
119 |                       );
120 |                     })}
121 |                   </div>
122 |                 </div>
123 |               </div>
124 |               <div className="col-md-4">
125 |                 <div className="card mb-4">
126 |                   <div className="card-header py-3 bg-light">
127 |                     <h5 className="mb-0">Order Summary</h5>
128 |                   </div>
129 |                   <div className="card-body">
130 |                     <ul className="list-group list-group-flush">
131 |                       <li className="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
132 |                         Products ({totalItems})<span>${Math.round(subtotal)}</span>
133 |                       </li>
134 |                       <li className="list-group-item d-flex justify-content-between align-items-center px-0">
135 |                         Shipping
136 |                         <span>${shipping}</span>
137 |                       </li>
138 |                       <li className="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
139 |                         <div>
140 |                           <strong>Total amount</strong>
141 |                         </div>
142 |                         <span>
143 |                           <strong>${Math.round(subtotal + shipping)}</strong>
144 |                         </span>
145 |                       </li>
146 |                     </ul>
147 | 
148 |                     <Link
149 |                       to="/checkout"
150 |                       className="btn btn-dark btn-lg btn-block"
151 |                     >
152 |                       Go to checkout
153 |                     </Link>
154 |                   </div>
155 |                 </div>
156 |               </div>
157 |             </div>
158 |           </div>
159 |         </section>
160 |       </>
161 |     );
162 |   };
163 | 
164 |   return (
165 |     <>
166 |       <Navbar />
167 |       <div className="container my-3 py-3">
168 |         <h1 className="text-center">Cart</h1>
169 |         <hr />
170 |         {state.length > 0 ? <ShowCart /> : <EmptyCart />}
171 |       </div>
172 |       <Footer />
173 |     </>
174 |   );
175 | };
176 | 
177 | export default Cart;
178 | 


--------------------------------------------------------------------------------
/src/pages/Checkout.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Footer, Navbar } from "../components";
  3 | import { useSelector } from "react-redux";
  4 | import { Link } from "react-router-dom";
  5 | const Checkout = () => {
  6 |   const state = useSelector((state) => state.handleCart);
  7 | 
  8 |   const EmptyCart = () => {
  9 |     return (
 10 |       <div className="container">
 11 |         <div className="row">
 12 |           <div className="col-md-12 py-5 bg-light text-center">
 13 |             <h4 className="p-3 display-5">No item in Cart</h4>
 14 |             <Link to="/" className="btn btn-outline-dark mx-4">
 15 |               <i className="fa fa-arrow-left"></i> Continue Shopping
 16 |             </Link>
 17 |           </div>
 18 |         </div>
 19 |       </div>
 20 |     );
 21 |   };
 22 | 
 23 |   const ShowCheckout = () => {
 24 |     let subtotal = 0;
 25 |     let shipping = 30.0;
 26 |     let totalItems = 0;
 27 |     state.map((item) => {
 28 |       return (subtotal += item.price * item.qty);
 29 |     });
 30 | 
 31 |     state.map((item) => {
 32 |       return (totalItems += item.qty);
 33 |     });
 34 |     return (
 35 |       <>
 36 |         <div className="container py-5">
 37 |           <div className="row my-4">
 38 |             <div className="col-md-5 col-lg-4 order-md-last">
 39 |               <div className="card mb-4">
 40 |                 <div className="card-header py-3 bg-light">
 41 |                   <h5 className="mb-0">Order Summary</h5>
 42 |                 </div>
 43 |                 <div className="card-body">
 44 |                   <ul className="list-group list-group-flush">
 45 |                     <li className="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
 46 |                       Products ({totalItems})<span>${Math.round(subtotal)}</span>
 47 |                     </li>
 48 |                     <li className="list-group-item d-flex justify-content-between align-items-center px-0">
 49 |                       Shipping
 50 |                       <span>${shipping}</span>
 51 |                     </li>
 52 |                     <li className="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
 53 |                       <div>
 54 |                         <strong>Total amount</strong>
 55 |                       </div>
 56 |                       <span>
 57 |                         <strong>${Math.round(subtotal + shipping)}</strong>
 58 |                       </span>
 59 |                     </li>
 60 |                   </ul>
 61 |                 </div>
 62 |               </div>
 63 |             </div>
 64 |             <div className="col-md-7 col-lg-8">
 65 |               <div className="card mb-4">
 66 |                 <div className="card-header py-3">
 67 |                   <h4 className="mb-0">Billing address</h4>
 68 |                 </div>
 69 |                 <div className="card-body">
 70 |                   <form className="needs-validation" novalidate>
 71 |                     <div className="row g-3">
 72 |                       <div className="col-sm-6 my-1">
 73 |                         <label for="firstName" className="form-label">
 74 |                           First name
 75 |                         </label>
 76 |                         <input
 77 |                           type="text"
 78 |                           className="form-control"
 79 |                           id="firstName"
 80 |                           placeholder=""
 81 |                           value=""
 82 |                           required
 83 |                         />
 84 |                         <div className="invalid-feedback">
 85 |                           Valid first name is required.
 86 |                         </div>
 87 |                       </div>
 88 | 
 89 |                       <div className="col-sm-6 my-1">
 90 |                         <label for="lastName" className="form-label">
 91 |                           Last name
 92 |                         </label>
 93 |                         <input
 94 |                           type="text"
 95 |                           className="form-control"
 96 |                           id="lastName"
 97 |                           placeholder=""
 98 |                           value=""
 99 |                           required
100 |                         />
101 |                         <div className="invalid-feedback">
102 |                           Valid last name is required.
103 |                         </div>
104 |                       </div>
105 | 
106 |                       <div className="col-12 my-1">
107 |                         <label for="email" className="form-label">
108 |                           Email
109 |                         </label>
110 |                         <input
111 |                           type="email"
112 |                           className="form-control"
113 |                           id="email"
114 |                           placeholder="you@example.com"
115 |                           required
116 |                         />
117 |                         <div className="invalid-feedback">
118 |                           Please enter a valid email address for shipping
119 |                           updates.
120 |                         </div>
121 |                       </div>
122 | 
123 |                       <div className="col-12 my-1">
124 |                         <label for="address" className="form-label">
125 |                           Address
126 |                         </label>
127 |                         <input
128 |                           type="text"
129 |                           className="form-control"
130 |                           id="address"
131 |                           placeholder="1234 Main St"
132 |                           required
133 |                         />
134 |                         <div className="invalid-feedback">
135 |                           Please enter your shipping address.
136 |                         </div>
137 |                       </div>
138 | 
139 |                       <div className="col-12">
140 |                         <label for="address2" className="form-label">
141 |                           Address 2{" "}
142 |                           <span className="text-muted">(Optional)</span>
143 |                         </label>
144 |                         <input
145 |                           type="text"
146 |                           className="form-control"
147 |                           id="address2"
148 |                           placeholder="Apartment or suite"
149 |                         />
150 |                       </div>
151 | 
152 |                       <div className="col-md-5 my-1">
153 |                         <label for="country" className="form-label">
154 |                           Country
155 |                         </label>
156 |                         <br />
157 |                         <select className="form-select" id="country" required>
158 |                           <option value="">Choose...</option>
159 |                           <option>India</option>
160 |                         </select>
161 |                         <div className="invalid-feedback">
162 |                           Please select a valid country.
163 |                         </div>
164 |                       </div>
165 | 
166 |                       <div className="col-md-4 my-1">
167 |                         <label for="state" className="form-label">
168 |                           State
169 |                         </label>
170 |                         <br />
171 |                         <select className="form-select" id="state" required>
172 |                           <option value="">Choose...</option>
173 |                           <option>Punjab</option>
174 |                         </select>
175 |                         <div className="invalid-feedback">
176 |                           Please provide a valid state.
177 |                         </div>
178 |                       </div>
179 | 
180 |                       <div className="col-md-3 my-1">
181 |                         <label for="zip" className="form-label">
182 |                           Zip
183 |                         </label>
184 |                         <input
185 |                           type="text"
186 |                           className="form-control"
187 |                           id="zip"
188 |                           placeholder=""
189 |                           required
190 |                         />
191 |                         <div className="invalid-feedback">
192 |                           Zip code required.
193 |                         </div>
194 |                       </div>
195 |                     </div>
196 | 
197 |                     <hr className="my-4" />
198 | 
199 |                     <h4 className="mb-3">Payment</h4>
200 | 
201 |                     <div className="row gy-3">
202 |                       <div className="col-md-6">
203 |                         <label for="cc-name" className="form-label">
204 |                           Name on card
205 |                         </label>
206 |                         <input
207 |                           type="text"
208 |                           className="form-control"
209 |                           id="cc-name"
210 |                           placeholder=""
211 |                           required
212 |                         />
213 |                         <small className="text-muted">
214 |                           Full name as displayed on card
215 |                         </small>
216 |                         <div className="invalid-feedback">
217 |                           Name on card is required
218 |                         </div>
219 |                       </div>
220 | 
221 |                       <div className="col-md-6">
222 |                         <label for="cc-number" className="form-label">
223 |                           Credit card number
224 |                         </label>
225 |                         <input
226 |                           type="text"
227 |                           className="form-control"
228 |                           id="cc-number"
229 |                           placeholder=""
230 |                           required
231 |                         />
232 |                         <div className="invalid-feedback">
233 |                           Credit card number is required
234 |                         </div>
235 |                       </div>
236 | 
237 |                       <div className="col-md-3">
238 |                         <label for="cc-expiration" className="form-label">
239 |                           Expiration
240 |                         </label>
241 |                         <input
242 |                           type="text"
243 |                           className="form-control"
244 |                           id="cc-expiration"
245 |                           placeholder=""
246 |                           required
247 |                         />
248 |                         <div className="invalid-feedback">
249 |                           Expiration date required
250 |                         </div>
251 |                       </div>
252 | 
253 |                       <div className="col-md-3">
254 |                         <label for="cc-cvv" className="form-label">
255 |                           CVV
256 |                         </label>
257 |                         <input
258 |                           type="text"
259 |                           className="form-control"
260 |                           id="cc-cvv"
261 |                           placeholder=""
262 |                           required
263 |                         />
264 |                         <div className="invalid-feedback">
265 |                           Security code required
266 |                         </div>
267 |                       </div>
268 |                     </div>
269 | 
270 |                     <hr className="my-4" />
271 | 
272 |                     <button
273 |                       className="w-100 btn btn-primary "
274 |                       type="submit" disabled
275 |                     >
276 |                       Continue to checkout
277 |                     </button>
278 |                   </form>
279 |                 </div>
280 |               </div>
281 |             </div>
282 |           </div>
283 |         </div>
284 |       </>
285 |     );
286 |   };
287 |   return (
288 |     <>
289 |       <Navbar />
290 |       <div className="container my-3 py-3">
291 |         <h1 className="text-center">Checkout</h1>
292 |         <hr />
293 |         {state.length ? <ShowCheckout /> : <EmptyCart />}
294 |       </div>
295 |       <Footer />
296 |     </>
297 |   );
298 | };
299 | 
300 | export default Checkout;
301 | 


--------------------------------------------------------------------------------