React Js / Projects / Shopping Cart project 1 : (Single layout)

Shopping Cart

Goal

1. component

2. props and state

3. route

4. hooks

5. http request (api call)

6. events handling

7. data sharing

Create new project


                        npm create vite@latest shopping 

                        //select javascript option

install packages

                       

                        cd shopping
                        npm install

Run project

     
                      
                        npm run dev

2. Editor Setup

1. click on extension icon in the editor ( ctrl+shift+X)

2. search ES7 + React/Redux/React-Native Snippets

3. press install button

3. UI

1. clear src/App.jsx

open the file and type rafce

given code is automatically added


                      import React from 'react'

                    const App = () => {
                      return (
                        <div>App</div>
                      )
                    }

                    export default App

2. clear src/index.css


                     :root {
                        --primary-bg: rgba(30, 30, 30, 0.85);
                        --hover-bg: rgba(30, 30, 30, 0.9);
                        --blur: blur(10px);
                        --border-radius: 14px;
                        --box-shadow: 0px 8px 25px rgba(255, 255, 255, 0.1);
                        --hover-box-shadow: 0px 12px 30px rgba(255, 255, 255, 0.2);
                        --border: 1px solid rgba(255, 255, 255, 0.2);
                        --highlight-color: #ffcc00;
                        --button-gradient: linear-gradient(135deg, #ff7b00, #ff3d00);
                        --button-hover-gradient: linear-gradient(135deg, #ff3d00, #ff7b00);
                        --transition: transform 0.3s ease-in-out, box-shadow 0.3s;
                      }

                      body {
                        background-color: black;
                        color: white;
                      }

                      body::-webkit-scrollbar {
                        display: none;
                      }

3. add bootstrap

1. open the file index.html and add bootstrap file


                    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

4. Add reusable components

1. src/components/All_Product.jsx

open the file and type rafce

given code is automatically added


                  import React from 'react'

                  const All_Product = () => {
                    return (
                      <div>All_Product</div>
                    )
                  }

                  export default All_Product

2. /src/components /Navbar.jsx

open the file and type rafce

given code is automatically added


                    import React from 'react'

                    const Navbar = () => {
                      return (
                        <div>Navbar</div>
                      )
                    }

                    export default Navbar

3. src/components /Products.jsx

open the file and type rafce

given code is automatically added


                      import React from 'react'

                      const Products = () => {
                        return (
                          <div>Products</div>
                        )
                      }

                      export default Products

4. src/components /Trending_Slider.jsx

open the file and type rafce

given code is automatically added


                        import React from 'react'

                        const Trending_Slider = () => {
                          return (
                            <div>Trending_Slider</div>
                          )
                        }

                        export default Trending_Slider

5. src/components /ShopByCategory.jsx

open the file and type rafce

given code is automatically added


                        import React from 'react'

                        const ShopByCategory = () => {
                          return (
                            <div>ShopByCategory</div>
                          )
                        }

                        export default ShopByCategory

6. src/components /VideoPlayer.jsx

open the file and type rafce

given code is automatically added



                      import React from 'react'

                    const VideoPlayer = () => {
                      return (
                        <div>VideoPlayer</div>
                      )
                    }

                    export default VideoPlayer

5. Add View pages

1. src/pages /Cart.jsx

open the file and type rafce

given code is automatically added


                      import React from 'react'

                    const Cart = () => {
                      return (
                        <div>Cart</div>
                      )
                    }

                    export default Cart

2. src/pages /Product_Detail.jsx

open the file and type rafce

given code is automatically added


                        import React from 'react'

                        const Product_Detail = () => {
                          return (
                            <div>Product_Detail</div>
                          )
                        }

                        export default Product_Detail

3. src/pages /ProductByCategory.jsx

open the file and type rafce

given code is automatically added


                        import React from 'react'

                      const ProductByCategory = () => {
                        return (
                          <div>ProductByCategory</div>
                        )
                      }

                      export default ProductByCategory

4. src/pages /Search_Product.jsx

open the file and type rafce

given code is automatically added


                        import React from 'react'

                        const Search_Product = () => {
                          return (
                            <div>Search_Product</div>
                          )
                        }

                        export default Search_Product

4. Routes

1. install router package


                            npm install react-router

2. setup router

1. open the file src /App.jsx

2. import BrowserRouter


                import { BrowserRouter as Router, Routes, Route } from "react-router";

3. add Router & Routes


                import React from 'react';

              import { BrowserRouter as Router, Routes, Route } from "react-router";

              const App = () => {
                return (
                  <Router>
                    
                        <Routes>
                          
                        </Routes>
                    
                  </Router>
                )
              }

              export default App

4. add routes items (link to components)



              import React from 'react';

              import { BrowserRouter as Router, Routes, Route } from "react-router";

              import All_Product from "./components/All_Product";
              import Cart from "./pages/Cart";
              import Product_Detail from "./pages/Product_Detail";
              import Search_Product from "./pages/Search_Product";
              import ProductByCategory from "./pages/ProductByCategory";

              const App = () => {
                return (
                  <Router>
                    
                        <Routes>

                            <Route path="/" element={<All_Product />} />
                            <Route path="/cart" element={<Cart />} />
                            <Route path="/product/:id" element={<Product_Detail />} />
                            <Route path="/product/search/:term" element={<Search_Product />} />
                            <Route path="/product/category/:cat" element={<ProductByCategory />} />
                          
                        </Routes>
                    
                  </Router>
                )
              }

              export default App

5. test the links /routes


                //call default route
                http://localhost:5173

                //call cart route
                http://localhost:5173/cart

                //call product with product id
                http://localhost:5173/product/1

                //call product/search with search keyword
                http://localhost:5173/product/search/1

                //call product/category with category name
                http://localhost:5173/product/category/1

3. integrate menu nav bar

1. add Navbar component in the routes

open src/App.jsx

import Navbar from "./components/Navbar";

add Navbar



              import React from 'react';

              import { BrowserRouter as Router, Routes, Route } from "react-router";

              import Navbar from "./components/Navbar";

              import All_Product from "./components/All_Product";
              import Cart from "./pages/Cart";
              import Product_Detail from "./pages/Product_Detail";
              import Search_Product from "./pages/Search_Product";
              import ProductByCategory from "./pages/ProductByCategory";

              const App = () => {
                return (
                  <Router>
                    
                        <Navbar />
                        
                        <Routes>

                            <Route path="/" element={<All_Product />} />
                            <Route path="/cart" element={<Cart />} />
                            <Route path="/product/:id" element={<Product_Detail />} />
                            <Route path="/product/search/:term" element={<Search_Product />} />
                            <Route path="/product/category/:cat" element={<ProductByCategory />} />
                          
                        </Routes>
                    
                  </Router>
                )
              }

              export default App

2. install react icons for creating attractive UI (optional)


                npm install react-icons

3. /src/components /Navbar.jsx

go to and search the icons what you wants : https://react-icons.github.io/react-icons/

import the icons what you want


                import { FaAmazon, FaShoppingCart, FaSearch } from "react-icons/fa";

4. add nav bar elements

1. add parent container



              import React from 'react'

              const Navbar = () => {
                return (
                  <nav className="navbar navbar-expand-lg navbar-dark bg-dark px-4 py-2 sticky-top shadow">
                        <div className="container-fluid">

                        </div>
                  </nav>       
                )
              }

              export default Navbar

2. add logo (amazon logo icon)



              import React from 'react';
              import { FaAmazon, FaShoppingCart, FaSearch } from "react-icons/fa";

              const Navbar = () => {
                return (
                  <nav className="navbar navbar-expand-lg navbar-dark bg-dark px-4 py-2 sticky-top shadow">
                      <div className="container-fluid">
                             <FaAmazon />
                        </div>
                  </nav>       
                )
              }

              export default Navbar

improvement (optional)



              import React from 'react';
              import { FaAmazon, FaShoppingCart, FaSearch } from "react-icons/fa";
              import { Link, useNavigate } from "react-router";

              const Navbar = () => {
                return (
                  <nav className="navbar navbar-expand-lg navbar-dark bg-dark px-4 py-2 sticky-top shadow">
                      <div className="container-fluid">
                          
                         {/* Left Section - Logo */}
                        <Link to="/" className="navbar-brand d-flex align-items-center">
                          <FaAmazon className="text-warning fs-2 me-2" />
                          <span className="fs-4 fw-bold">Amazon</span>
                        </Link>

                        {/* Navbar Content */}


                        </div>
                  </nav>       
                )
              }

              export default Navbar

3. add search option



              import React from 'react';
              import { FaAmazon, FaShoppingCart, FaSearch } from "react-icons/fa";
              import { Link, useNavigate } from "react-router";

              const Navbar = () => {
                return (
                  <nav className="navbar navbar-expand-lg navbar-dark bg-dark px-4 py-2 sticky-top shadow">
                      <div className="container-fluid">
                          
                          {/* Left Section - Logo */}
                          <Link to="/" className="navbar-brand d-flex align-items-center">
                              <FaAmazon className="text-warning fs-2 me-2" />
                              <span className="fs-4 fw-bold">Amazon</span>
                          </Link>


                          {/* Search Bar */}
                          <form    className="d-flex mx-auto search-container"  >

                            <input
                              className="form-control search-input"
                              type="search"
                              placeholder="Search products..."            
                            />

                            <button className="btn btn-warning search-button" type="submit">
                              <FaSearch />
                            </button>

                            </form>


                      


                        </div>
                  </nav>       
                )
              }

              export default Navbar

4. add Categories



            import React from 'react';
            import { FaAmazon, FaShoppingCart, FaSearch } from "react-icons/fa";
            import { Link, useNavigate } from "react-router";

            const Navbar = () => {
              return (
                <nav className="navbar navbar-expand-lg navbar-dark bg-dark px-4 py-2 sticky-top shadow">
                    <div className="container-fluid">
                        
                        {/* Left Section - Logo */}
                        <Link to="/" className="navbar-brand d-flex align-items-center">
                            <FaAmazon className="text-warning fs-2 me-2" />
                            <span className="fs-4 fw-bold">Amazon</span>
                        </Link>


                        {/* Search Bar */}
                        <form    className="d-flex mx-auto search-container"  >

                          <input
                            className="form-control search-input"
                            type="search"
                            placeholder="Search products..."            
                          />

                          <button className="btn btn-warning search-button" type="submit">
                            <FaSearch />
                          </button>

                          </form>


                        {/* Categories */}
                        <ul className="navbar-nav mx-auto d-flex gap-3">
                          {["Mobiles", "Laptops", "Tablets", "Watches"].map((category) => (
                            <li key={category} className="nav-item">
                              <Link
                                to={`/product/category/${category}`}
                                className="nav-link category-link"
                              >
                                {category}
                              </Link>
                            </li>
                          ))}
                        </ul>




                      </div>
                </nav>       
              )
            }

            export default Navbar

5. add cart icon



            import React from 'react';
            import { FaAmazon, FaShoppingCart, FaSearch } from "react-icons/fa";
            import { Link, useNavigate } from "react-router";

            const Navbar = () => {
              return (
                <nav className="navbar navbar-expand-lg navbar-dark bg-dark px-4 py-2 sticky-top shadow">
                    <div className="container-fluid">
                        
                        {/* Left Section - Logo */}
                        <Link to="/" className="navbar-brand d-flex align-items-center">
                            <FaAmazon className="text-warning fs-2 me-2" />
                            <span className="fs-4 fw-bold">Amazon</span>
                        </Link>


                        {/* Search Bar */}
                        <form    className="d-flex mx-auto search-container"  >

                          <input
                            className="form-control search-input"
                            type="search"
                            placeholder="Search products..."            
                          />

                          <button className="btn btn-warning search-button" type="submit">
                            <FaSearch />
                          </button>

                          </form>


                        {/* Categories */}
                        <ul className="navbar-nav mx-auto d-flex gap-3">
                          {["Mobiles", "Laptops", "Tablets", "Watches"].map((category) => (
                            <li key={category} className="nav-item">
                              <Link
                                to={`/product/category/${category}`}
                                className="nav-link category-link"
                              >
                                {category}
                              </Link>
                            </li>
                          ))}
                        </ul>


                            {/* Cart Button */}
                          <Link to="/cart" className="btn btn-warning position-relative cart-btn">
                            <FaShoppingCart className="fs-4" />          
                              <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                              10
                              </span>         
                          </Link>


                      </div>
                </nav>       
              )
            }

            export default Navbar

5. add css style in src/index.css



              
/* Navbar Search Bar Styling */
.search-container {
  position: relative;
  max-width: 400px;
  width: 100%;
}

.search-input {
  padding-right: 45px;
  border-radius: 25px;
}
.search-button {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: background 0.3s ease-in-out;
}

.search-button:hover {
  background: var(--highlight-color);
}

.py-2 {
  padding-top: 0.9rem !important;
  padding-bottom: .5rem !important;
}

/* Category Link Styling */
.category-link {
  font-weight: bold;
  color: white;
  transition: color 0.3s ease-in-out, transform 0.2s;
  padding: 6px 12px;
  border-radius: 8px;
}
.category-link:hover {
  color: #ffc107;
  transform: translateY(-2px);
}
/* Cart Button */
.cart-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 12px;
  transition: background 0.3s ease-in-out, transform 0.2s;
}
.cart-btn:hover {
  background: #ff9900;
  transform: scale(1.05);
}

5. Integrate UI for route's pages

1. home page

src/components /All_Product.jsx



              import React from 'react';
              import { Link, useLocation } from "react-router";

              const All_Product = () => {
                return (
                  
                  <>
                                  

                                  <div className="container my-5">
                                    <div className="row d-flex justify-content-center">
                                    


                                        <div
                                          key="1"
                                          className="col-lg-4 col-md-6 my-3 d-flex justify-content-center"
                                        >
                                          <div className="card product-card" style={{width:'18rem'}}>
                                            <Link to={`/product/1`} className="image-container">
                                              <img
                                                src="https://m.media-amazon.com/images/I/71TPda7cwUL._SL1500_.jpg"
                                                className="card-img-top"
                                                alt="{product.title}"
                                              />
                                            </Link>
                                            <div className="card-body text-center">
                                              <h5 className="card-title">Test1</h5>
                                              <p className="product-price"> 10000 ₹</p>
                                              <div className="button-container">
                                                <button  className="btn add-to-cart">
                                                  🛒 Add To Cart
                                                </button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>




                                        <div
                                          key="2"
                                          className="col-lg-4 col-md-6 my-3 d-flex justify-content-center"
                                        >
                                          <div className="card product-card" style={{width:'18rem'}}>
                                            <Link to={`/product/2`} className="image-container">
                                              <img
                                                src="https://m.media-amazon.com/images/I/71TPda7cwUL._SL1500_.jpg"
                                                className="card-img-top"
                                                alt="{product.title}"
                                              />
                                            </Link>
                                            <div className="card-body text-center">
                                              <h5 className="card-title">Test 2</h5>
                                              <p className="product-price"> 10000 ₹</p>
                                              <div className="button-container">
                                                <button  className="btn add-to-cart">
                                                  🛒 Add To Cart
                                                </button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>




                                        <div
                                          key="3"
                                          className="col-lg-4 col-md-6 my-3 d-flex justify-content-center"
                                        >
                                          <div className="card product-card" style={{width:'18rem'}}>
                                            <Link to={`/product/2`} className="image-container">
                                              <img
                                                src="https://m.media-amazon.com/images/I/71TPda7cwUL._SL1500_.jpg"
                                                className="card-img-top"
                                                alt="{product.title}"
                                              />
                                            </Link>
                                            <div className="card-body text-center">
                                              <h5 className="card-title">Test 3</h5>
                                              <p className="product-price"> 10000 ₹</p>
                                              <div className="button-container">
                                                <button  className="btn add-to-cart">
                                                  🛒 Add To Cart
                                                </button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>




                                      <div
                                          key="4"
                                          className="col-lg-4 col-md-6 my-3 d-flex justify-content-center"
                                        >
                                          <div className="card product-card" style={{width:'18rem'}}>
                                            <Link to={`/product/2`} className="image-container">
                                              <img
                                                src="https://m.media-amazon.com/images/I/71TPda7cwUL._SL1500_.jpg"
                                                className="card-img-top"
                                                alt="{product.title}"
                                              />
                                            </Link>
                                            <div className="card-body text-center">
                                              <h5 className="card-title">Test 3</h5>
                                              <p className="product-price"> 10000 ₹</p>
                                              <div className="button-container">
                                                <button  className="btn add-to-cart">
                                                  🛒 Add To Cart
                                                </button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>






                                    
                                    </div>
                                  </div>
                                </>


                )
              }

              export default All_Product

2. add css



              
.cart-card,
.product-card,
.product-detail-card {
  background: var(--primary-bg);
  backdrop-filter: var(--blur);
  color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  border: var(--border);
  transition: var(--transition);
  padding: 20px;
}
.cart-card:hover,
.product-card:hover,
.product-detail-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hover-box-shadow);
}
.cart-img,
.card-img-top,
.product-image {
  width: 180px;
  max-width: 220px;
  border-radius: 12px;
  border: 2px solid var(--highlight-color);
  transition: var(--transition);
}

.cart-img:hover,
.card-img-top:hover,
.product-image:hover {
  transform: scale(1.05);
}
.product-price {
  font-size: 20px;
  font-weight: bold;
  color: var(--highlight-color);
}
.button-group,
.button-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.btn-primary,
.add-to-cart {
  background: var(--button-gradient);
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.3s ease-in-out, transform 0.2s;
}
.btn-primary:hover,
.add-to-cart:hover {
  background: var(--button-hover-gradient);
  transform: scale(1.05);
}
.image-container,
.image-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.card-body,
.info-section {
  padding: 20px;
}

.product-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-description {
  font-size: 16px;
  color: #ddd;
  margin-bottom: 12px;
}

3. add shop category

add ShopByCategory component to the src/components /All_Product.jsx



             import React from 'react';
            import { Link, useLocation } from "react-router";
            import ShopByCategory from "./ShopByCategory";

const All_Product = () => {
  return (
    
     <>
                    <ShopByCategory />

                    <div className="container my-5">
                      <div className="row d-flex justify-content-center">
                       


                          <div
                            key="1"
                            className="col-lg-4 col-md-6 my-3 d-flex justify-content-center"
                          >
                            <div className="card product-card" style={{width:'18rem'}}>
                              <Link to={`/product/1`} className="image-container">
                                <img
                                  src="https://m.media-amazon.com/images/I/71TPda7cwUL._SL1500_.jpg"
                                  className="card-img-top"
                                  alt="{product.title}"
                                />
                              </Link>
                              <div className="card-body text-center">
                                <h5 className="card-title">Test1</h5>
                                <p className="product-price"> 10000 ₹</p>
                                <div className="button-container">
                                  <button  className="btn add-to-cart">
                                    🛒 Add To Cart
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>




                          <div
                            key="2"
                            className="col-lg-4 col-md-6 my-3 d-flex justify-content-center"
                          >
                            <div className="card product-card" style={{width:'18rem'}}>
                              <Link to={`/product/2`} className="image-container">
                                <img
                                  src="https://m.media-amazon.com/images/I/71TPda7cwUL._SL1500_.jpg"
                                  className="card-img-top"
                                  alt="{product.title}"
                                />
                              </Link>
                              <div className="card-body text-center">
                                <h5 className="card-title">Test 2</h5>
                                <p className="product-price"> 10000 ₹</p>
                                <div className="button-container">
                                  <button  className="btn add-to-cart">
                                    🛒 Add To Cart
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>




                          <div
                            key="3"
                            className="col-lg-4 col-md-6 my-3 d-flex justify-content-center"
                          >
                            <div className="card product-card" style={{width:'18rem'}}>
                              <Link to={`/product/2`} className="image-container">
                                <img
                                  src="https://m.media-amazon.com/images/I/71TPda7cwUL._SL1500_.jpg"
                                  className="card-img-top"
                                  alt="{product.title}"
                                />
                              </Link>
                              <div className="card-body text-center">
                                <h5 className="card-title">Test 3</h5>
                                <p className="product-price"> 10000 ₹</p>
                                <div className="button-container">
                                  <button  className="btn add-to-cart">
                                    🛒 Add To Cart
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>




                        <div
                            key="4"
                            className="col-lg-4 col-md-6 my-3 d-flex justify-content-center"
                          >
                            <div className="card product-card" style={{width:'18rem'}}>
                              <Link to={`/product/2`} className="image-container">
                                <img
                                  src="https://m.media-amazon.com/images/I/71TPda7cwUL._SL1500_.jpg"
                                  className="card-img-top"
                                  alt="{product.title}"
                                />
                              </Link>
                              <div className="card-body text-center">
                                <h5 className="card-title">Test 3</h5>
                                <p className="product-price"> 10000 ₹</p>
                                <div className="button-container">
                                  <button  className="btn add-to-cart">
                                    🛒 Add To Cart
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>






                       
                      </div>
                    </div>
                  </>


  )
}

export default All_Product

src/components/ShopByCategory.jsx



import React from 'react';

import {
  FaMobileAlt,
  FaLaptop,
  FaTabletAlt,
  FaClock,
  FaHeadphones,
  FaThLarge,
  FaRupeeSign,
} from "react-icons/fa";

const ShopByCategory = () => {
  return (
             <div className="container bg-dark text-light my-4 p-4 rounded shadow-lg">
                  <h3 className="text-center mb-3">Filter Products</h3>

                 <div className="d-flex flex-wrap justify-content-center gap-3 mb-4">
                    

                    <div
                        key="1"
                        className="d-flex align-items-center gap-2 px-3 py-2 rounded bg-secondary text-light fw-bold"
                        style={{ cursor: "pointer", transition: "0.3s" }}
                        
                    >
                       <FaMobileAlt/> <span>Category 1</span>
                    </div>


                    <div
                        key="1"
                        className="d-flex align-items-center gap-2 px-3 py-2 rounded bg-secondary text-light fw-bold"
                        style={{ cursor: "pointer", transition: "0.3s" }}
                        
                    >
                       <FaLaptop/> <span>Category 2</span>
                    </div>



                    <div
                        key="1"
                        className="d-flex align-items-center gap-2 px-3 py-2 rounded bg-secondary text-light fw-bold"
                        style={{ cursor: "pointer", transition: "0.3s" }}
                        
                    >
                       <FaTabletAlt/> <span>Category 3</span>
                    </div>



                    
                </div>


             </div>
  )
}

export default ShopByCategory

6. Convert Static data to Dynamic data

1. Array Data

src/components /ShopByCategory.jsx

define categories []



                  import React, { useContext, useState } from "react";
                  import {
                    FaMobileAlt,
                    FaLaptop,
                    FaTabletAlt,
                    FaClock,
                    FaHeadphones,
                    FaThLarge,
                    FaRupeeSign,
                  } from "react-icons/fa";
                

                  const categories = [
                    { name: "All Products", icon: <FaThLarge /> },
                    { name: "Mobiles", icon: <FaMobileAlt /> },
                    { name: "Laptops", icon: <FaLaptop /> },
                    { name: "Tablets", icon: <FaTabletAlt /> },
                    { name: "Watches", icon: <FaClock /> },
                  ];

                 


                    return (
                      <div className="container bg-dark text-light my-4 p-4 rounded shadow-lg">
                        <h3 className="text-center mb-3">Filter Products</h3>
                        <div className="d-flex flex-wrap justify-content-center gap-3 mb-4">


                          {categories.map(({ name, icon }) => (
                            <div
                              key={name}
                              className="d-flex align-items-center gap-2 px-3 py-2 rounded bg-secondary text-light fw-bold"
                              style={{ cursor: "pointer", transition: "0.3s" }}
                              onClick={() => filterByCategory(name)}
                            >
                              {icon} <span>{name}</span>
                            </div>
                          ))}


                        </div>               
                      </div>
                    );
                  };

                  export default FilterPanel;

2. API data

1. src/components/All_Product.jsx

2. import useState & useEffect

3. define state


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

4. define a function 'fetchProducts' for api call


                      const fetchProducts = async () => {
                        try {
                          const response = await fetch(API_URL);

                          if (!response.ok) {
                            throw new Error("Failed to fetch products");
                          }

                          const data = await response.json();
                          setProducts(data);
                          toast.success("Products loaded!");
                        } catch (error) {
                          toast.error(error.message || "Something went wrong!");
                        } finally {
                          
                        }
                      };

5. call the fetchProducts() in useEffect()

6. loop the api data in the html part

complete code



                    import React, { useEffect, useState } from "react";
                    import { Link, useLocation } from "react-router";

                    import ShopByCategory from "./ShopByCategory";

                    const All_Product = () => {

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

                            const API_URL = "https://fakestoreapi.com/products";


                            useEffect(() => {
                                fetchProducts();
                            }, []);



                            const fetchProducts = async () => {
                                try {
                                        const response = await fetch(API_URL);

                                        if (!response.ok) {
                                            throw new Error("Failed to fetch products");
                                        }

                                        const data = await response.json();
                                        setProducts(data);
                                    
                                } catch (error) {
                                    
                                } finally {
                                
                                }

                            };




                      return (
                        
                        <>
                                        <ShopByCategory />

                                        <div className="container my-5">
                                          <div className="row d-flex justify-content-center">
                                          

                                              {products.map((product) => (

                                              <div
                                                key={product.id}
                                                className="col-lg-4 col-md-6 my-3 d-flex justify-content-center"
                                              >
                                                <div className="card product-card" style={{width:'18rem'}}>
                                                  <Link to={`/product/{product.id}`} className="image-container">
                                                    <img
                                                      src={product.image}
                                                      className="card-img-top"
                                                      alt="{product.title}"
                                                    />
                                                  </Link>
                                                  <div className="card-body text-center">
                                                    <h5 className="card-title">{product.title}</h5>
                                                    <p className="product-price"> {product.price} ₹</p>
                                                    <div className="button-container">
                                                      <button  className="btn add-to-cart">
                                                        🛒 Add To Cart
                                                      </button>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>

                                                ))}



                                              






                                          
                                          </div>
                                        </div>
                                      </>


                      )
                    }

                    export default All_Product

7. Integrate events handling/functionality

1. src/components/Navbar.jsx

1. onSubmit() : form submit event

in view


                  <form
                    className="d-flex mx-auto search-container"
                    onSubmit={handleSubmit}
                  >

                  </form>

in component



                   const handleSubmit = (e) => {
                        e.preventDefault();

                        alert("form submitted");
                       
                    };

2. onChange() : set input value

in view


                      
                    <input
                        className="form-control search-input"
                        type="search"
                        placeholder="Search products..."
                        value={searchKeyword}
                        onChange={(e) => setSearchKeyword(e.target.value)}
                      />

in component


                    import { useContext, useState } from "react";
                      ...... 
                      .....

                    const [searchKeyword, setSearchKeyword] = useState("");

Complete code



                  import { FaAmazon, FaShoppingCart, FaSearch } from "react-icons/fa";
import { Link, useNavigate } from "react-router";
import { useContext, useState } from "react";
import DataContext from "../context/DataContext";
// import './Navbar.css'

const Navbar = () => {
  const navigate = useNavigate();
  const { cart } = useContext(DataContext);
  const [searchKeyword, setSearchKeyword] = useState("");


  const handleSubmit = (e) => {
    e.preventDefault();
    if (searchKeyword.trim()) {
      navigate(`/product/search/${searchKeyword}`);
      setSearchKeyword(""); // Clear input after search
    }
  };


  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark px-4 py-2 sticky-top shadow">
      <div className="container-fluid">
        {/* Left Section - Logo */}
        <Link to="/" className="navbar-brand d-flex align-items-center">
          <FaAmazon className="text-warning fs-2 me-2" />
          <span className="fs-4 fw-bold">Amazon</span>
        </Link>

        {/* Navbar Content */}
        {/* Search Bar */}
        <form
          className="d-flex mx-auto search-container"
          onSubmit={handleSubmit}
        >
          <input
            className="form-control search-input"
            type="search"
            placeholder="Search products..."
            value={searchKeyword}
            onChange={(e) => setSearchKeyword(e.target.value)}
          />
          <button className="btn btn-warning search-button" type="submit">
            <FaSearch />
          </button>
        </form>

        {/* Categories */}
        <ul className="navbar-nav mx-auto d-flex gap-3">
          {["Mobiles", "Laptops", "Tablets", "Watches"].map((category) => (
            <li key={category} className="nav-item">
              <Link
                to={`/product/category/${category}`}
                className="nav-link category-link"
              >
                {category}
              </Link>
            </li>
          ))}
        </ul>

        {/* Cart Button */}
        <Link to="/cart" className="btn btn-warning position-relative cart-btn">
          <FaShoppingCart className="fs-4" />
          {cart.length > 0 && (
            <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
              {cart.length}
            </span>
          )}
        </Link>
      </div>
    </nav>
  );
};

export default Navbar;

2. src/components/ShopByCategory.jsx

1. onClick()

in view



<div
            key={name}
            className="d-flex align-items-center gap-2 px-3 py-2 rounded bg-secondary text-light fw-bold"
            style={{ cursor: "pointer", transition: "0.3s" }}
            onClick={() => filterByCategory(name)}
          >
            {icon} <span>{name}</span>
          </div>

in components



  const filterByCategory = (cat) => {
    if (cat == "All Products") {
      alert("onclick")
      return;
    }
    
  };

complete code



import React, { useContext, useState } from "react";
import {
  FaMobileAlt,
  FaLaptop,
  FaTabletAlt,
  FaClock,
  FaHeadphones,
  FaThLarge,
  FaRupeeSign,
} from "react-icons/fa";


const categories = [
  { name: "All Products", icon: <FaThLarge /> },
  { name: "Mobiles", icon: <FaMobileAlt /> },
  { name: "Laptops", icon: <FaLaptop /> },
  { name: "Tablets", icon: <FaTabletAlt /> },
  { name: "Watches", icon: <FaClock /> },
];



const FilterPanel = () => {
 

  const filterByCategory = (cat) => {
    if (cat == "All Products") {
      // write your logic here
      return;
    }
    
  };

  const filterByPrice = (price) => {


  return (
    <div className="container bg-dark text-light my-4 p-4 rounded shadow-lg">
      <h3 className="text-center mb-3">Filter Products</h3>
      <div className="d-flex flex-wrap justify-content-center gap-3 mb-4">
        {categories.map(({ name, icon }) => (
          <div
            key={name}
            className="d-flex align-items-center gap-2 px-3 py-2 rounded bg-secondary text-light fw-bold"
            style={{ cursor: "pointer", transition: "0.3s" }}
            onClick={() => filterByCategory(name)}
          >
            {icon} <span>{name}</span>
          </div>
        ))}
      </div>

      
    </div>
  );
};

export default FilterPanel;

8. Integrate Data Sharing

1. Define Context

1. Create context

src/context/DataContext.jsx


                import { createContext } from "react";

                const DataContext = createContext();

                export default DataContext;

2. Create provider

src/context/DataState.jsx


import React, { useState } from "react";
import DataContext from "./DataContext";
import { items } from "./data";
import { ToastContainer, toast, Bounce } from "react-toastify";

const DataState = (props) => {
  const [cart, setCart] = useState([]);
  const [products, setProducts] = useState(items);

  const addToCart = (id, title, price, imgSrc) => {
    const obj = {
      id,
      title,
      price,
      imgSrc,
    };
    toast.success("Item Added Into The Cart", {
      position: "top-right",
      autoClose: 1000,
      hideProgressBar: false,
      closeOnClick: false,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      theme: "dark",
      transition: Bounce,
    });
    setCart([...cart, obj]);
  };

  const clearCart = () => {
    toast.success("Cart has been cleared...!", {
      position: "top-right",
      autoClose: 1000,
      hideProgressBar: false,
      closeOnClick: false,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      theme: "dark",
      transition: Bounce,
    });
    
    setCart([]);
  };


  return (
    <DataContext.Provider
      value={{        cart,
        setCart,
        products,
        setProducts,
        addToCart,
        clearCart,
      }}
    >
      {props.children}
    </DataContext.Provider>
  );
};

export default DataState;

3. Wrap Your App with the Provider

src/main.jsx



import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import DataState from './context/DataState.jsx'

createRoot(document.getElementById('root')).render(
  <DataState>
    <App />
  </DataState>,
)

2. Usage : Cart

1. src/components/Navbar.jsx : show cart count in the header



import DataContext from "../context/DataContext";

 const { cart } = useContext(DataContext);


 {cart.length > 0 && (
            <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
              {cart.length}
            </span>
          )}

Complete code



import { FaAmazon, FaShoppingCart, FaSearch } from "react-icons/fa";
import { Link, useNavigate } from "react-router";
import { useContext, useState } from "react";
import DataContext from "../context/DataContext";
// import './Navbar.css'

const Navbar = () => {
  const navigate = useNavigate();
  const { cart } = useContext(DataContext);
  const [searchTerm, setSearchTerm] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (searchTerm.trim()) {
      navigate(`/product/search/${searchTerm}`);
      setSearchTerm(""); // Clear input after search
    }
  };

  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark px-4 py-2 sticky-top shadow">
      <div className="container-fluid">
        {/* Left Section - Logo */}
        <Link to="/" className="navbar-brand d-flex align-items-center">
          <FaAmazon className="text-warning fs-2 me-2" />
          <span className="fs-4 fw-bold">Amazon</span>
        </Link>

        {/* Navbar Content */}
        {/* Search Bar */}
        <form
          className="d-flex mx-auto search-container"
          onSubmit={handleSubmit}
        >
          <input
            className="form-control search-input"
            type="search"
            placeholder="Search products..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
          <button className="btn btn-warning search-button" type="submit">
            <FaSearch />
          </button>
        </form>

        {/* Categories */}
        <ul className="navbar-nav mx-auto d-flex gap-3">
          {["Mobiles", "Laptops", "Tablets", "Watches"].map((category) => (
            <li key={category} className="nav-item">
              <Link
                to={`/product/category/${category}`}
                className="nav-link category-link"
              >
                {category}
              </Link>
            </li>
          ))}
        </ul>

        {/* Cart Button */}
        <Link to="/cart" className="btn btn-warning position-relative cart-btn">
          <FaShoppingCart className="fs-4" />
          {cart.length > 0 && (
            <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
              {cart.length}
            </span>
          )}
        </Link>
      </div>
    </nav>
  );
};

export default Navbar;

2. Add to cart

src/pages/Product_Detail.jsx


import React, { useContext } from "react";
import { useParams } from "react-router";
import { items } from "../context/data";
import Products from "../components/Products";
import DataContext from "../context/DataContext";
import './ProductDetail.css'

const ProductDetail = () => {
  const { id } = useParams();
  const { addToCart } = useContext(DataContext);

  const product = items.find((pro) => pro.id == id);
  const relatedProducts = items.filter(
    (pro) => pro.category.toLowerCase() === product.category.toLowerCase()
  );

  return (
    <>
      <div className="container my-5">
        <div className="product-detail-card">
          <div className="image-section">
            <img
              src={product.imgSrc}
              alt={product.title}
              className="product-image"
            />
          </div>
          <div className="info-section">
            <h2 className="product-title">{product.title}</h2>
            <p className="product-description">{product.description}</p>
            <p className="product-price">{product.price} ₹</p>
            <button
              onClick={() =>
                addToCart(
                  product.id,
                  product.title,
                  product.price,
                  product.imgSrc
                )
              }
              className="btn add-to-cart"
            >
              🛒 Add To Cart
            </button>
          </div>
        </div>
      </div>

      <h2 className="text-center my-5">Related Products</h2>
      <Products items={relatedProducts} />
    </>
  );
};

export default ProductDetail;

3. Cart List

src/pages/Cart.jsx

cart items listing and clear cart



import React, { useContext } from "react";
import { Link } from "react-router";
import DataContext from "../context/DataContext";


const Cart = () => {
  const { cart, clearCart } = useContext(DataContext);

  return (
    <div className="container my-5">
      {cart.length === 0 ? (
        <div className="empty-cart text-center">
          <h1>Your Cart is Empty</h1>
          <Link to={"/"} className="btn btn-warning mt-3">
            Continue Shopping
          </Link>
        </div>
      ) : (
        <>
          <div className="row d-flex justify-content-center">
            {cart.map((product) => (
              <div key={product.id} className="col-lg-8 col-md-10 my-3">
                <div className="card cart-card">
                  <div className="row g-0 align-items-center">
                    <div className="col-md-4 d-flex justify-content-center">
                      <img
                        src={product.imgSrc}
                        className="cart-img"
                        alt={product.title}
                      />
                    </div>
                    <div className="col-md-8">
                      <div className="card-body text-center">
                        <h5 className="card-title">{product.title}</h5>
                        <p className="card-text">{product.description}</p>
                        <p className="cart-price">{product.price} ₹</p>
                        <div className="button-group">
                          <button className="btn btn-primary">Buy Now</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Checkout & Clear Cart Section */}
          <div className="text-center my-5">
            <button className="btn btn-warning mx-3">CheckOut</button>
            <button onClick={clearCart} className="btn btn-danger">
              Clear Cart
            </button>
          </div>
        </>
      )}

    </div>
  );
};

export default Cart;

3. Usage : child component

src/components/All_Product.jsx

modify the file : move the code to Products.jsx and pass the data to child


  import React, { useContext } from "react";
import DataContext from "../context/DataContext";

import Products from "./Products";


const All_Product = () => {
  const { products } = useContext(DataContext);
  // console.log("showing context data = ", products);

  return (
    <>
     

      <Products items={products} />
    </>
  );
};

export default All_Product;

src/components/Products.jsx


import { Link, useLocation } from "react-router";
import { useContext } from "react";
import { ToastContainer } from "react-toastify";
import DataContext from "../context/DataContext";
import ShopByCategory from "./ShopByCategory";


const Products = ({ items }) => {
  const { addToCart } = useContext(DataContext);
  const location = useLocation();

  return (
    <>
      <ToastContainer />
      {location.pathname === "/" && <ShopByCategory />}

      <div className="container my-5">
        <div className="row d-flex justify-content-center">
          {items.map((product) => (
            <div
              key={product.id}
              className="col-lg-4 col-md-6 my-3 d-flex justify-content-center"
            >
              <div className="card product-card" style={{width:'18rem'}}>
                <Link to={`/product/${product.id}`} className="image-container">
                  <img
                    src={product.imgSrc}
                    className="card-img-top"
                    alt={product.title}
                  />
                </Link>
                <div className="card-body text-center">
                  <h5 className="card-title">{product.title}</h5>
                  <p className="product-price">{product.price} ₹</p>
                  <div className="button-container">
                    <button
                      onClick={() =>
                        addToCart(
                          product.id,
                          product.title,
                          product.price,
                          product.imgSrc
                        )
                      }
                      className="btn add-to-cart"
                    >
                      🛒 Add To Cart
                    </button>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default Products;