first commit

package.json

@@ -6,9 +6,16 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.2.2",
+    "font-awesome": "^4.7.0",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.6.0",
     "react-dom": "^18.2.0",
+    "react-loading-skeleton": "^3.1.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/manifest.json

@@ -1,5 +1,5 @@
 {
-  "short_name": "React App",
+  "short_name": "Collection",
   "name": "Create React App Sample",
   "icons": [
     {

src/App.css

@@ -1,38 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.navbar-nav a{
+  font-size: 16px;
+}

src/App.js

@@ -1,24 +1,20 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import Home from "./component/Home";
+import Navbar from "./component/Navbar";
+import Products from "./component/Products";
+import { Routes, Route } from "react-router-dom";
+import Product from "./component/Product";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Navbar />
+      <Routes>
+        <Route exact path="/" element={<Home />} />
+        <Route exact path="/products" element={<Products />} />
+        <Route exact path="/products/:id" element={<Product />} />
+      </Routes>
+    </>
   );
 }
 

src/component/Cart.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+function Cart() {
+  return (
+    <>
+      <div className='container'>
+        <div className="row">
+          <div className="col-md-4">
+            <img src={product.image} alt={product.title} height="200px" width="180px" />
+          </div>
+          <div className="col-md-4">
+            <h3>{product.title}</h3>
+            <p className='lead fw-bold'>
+              {product.qty} X $ {product.price} = $
+              {product.qty * product.price}
+            </p>
+            <button className="btn btn-outline-dark me-4" onClick={() => handleButton(product)}><i className='fa fa-minus'></i></button>
+            <button className="btn btn-outline-dark me-4" onClick={() => handleButton(product)}><i className='fa fa-plus'></i></button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Cart;

src/component/Home.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom';
+
+function Home() {
+  return (
+    <div className='Hero'>
+      <div className="card bg-dark text-white  border-0">
+        <img src="/assets/walpaper.jpg" className="card-img-top" alt="Background" height="550px" />
+        <div className="card-img-overlay d-flex flex-column justify-content-center">
+          <div className="container">
+            <h5 className="card-title display-3 fw-bolder mb-0">New Season Arrival</h5>
+            <p className="card-text lead fs-3">CHECK OUT ALL THE TRENDS</p>
+            <NavLink to="/" className="btn btn-primary">Go somewhere</NavLink>
+          </div></div>
+
+      </div>
+    </div>
+  )
+}
+
+export default Home;

src/component/Navbar.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+
+function Navbar() {
+  const state = useSelector((state) => state.handleCart);
+  return (
+    <>
+      <div>
+        <nav className="navbar navbar-nav navbar-expand-lg navbar-light bg-light py-3 shadow-sm">
+          <div className="container-fluid">
+            <NavLink className="navbar-brand fw-bold fs-4" to="/">COLLECTION</NavLink>
+            <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <span className="navbar-toggler-icon"></span>
+            </button>
+            <div className="collapse navbar-collapse" id="navbarSupportedContent">
+              <ul className="navbar-nav mx-auto mb-2 mb-lg-0">
+                <li className="nav-item">
+                  <NavLink className="nav-link active" aria-current="page" to="/">Home</NavLink>
+                </li>
+                <li className="nav-item">
+                  <NavLink className="nav-link" to="/products">Products</NavLink>
+                </li>
+                <li className="nav-item">
+                  <NavLink className="nav-link " to="/about">About</NavLink>
+                </li>
+                <li className="nav-item">
+                  <NavLink className="nav-link " to="/contact">Contact</NavLink>
+                </li>
+              </ul>
+              <div className="buttons">
+                <NavLink to="/login" className="btn btn-outline-dark ms-2"> <i className='fa fa-sign-in me-1'></i> Login</NavLink>
+                <NavLink to="/register" className="btn btn-outline-dark ms-2"> <i className='fa fa-user-plus me-1'></i> Register</NavLink>
+                <NavLink to="/cart" className="btn btn-outline-dark ms-2"> <i className='fa fa-shopping-cart me-1'></i> Cart ({state.length})</NavLink>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </>
+  )
+}
+
+export default Navbar;

src/component/Product.jsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import Skeleton from 'react-loading-skeleton';
+import { useParams } from 'react-router';
+import { NavLink } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { addToCart } from '../redux/actions';
+
+const Product = () => {
+
+  const { id } = useParams();
+  const [product, setProduct] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const dispatch = useDispatch();
+  const addProduct = (product) => {
+    dispatch(addToCart(product));
+  }
+
+  useEffect(() => {
+    const getProduct = async () => {
+      setLoading(true);
+      const response = await fetch(`http://fakestoreapi.com/products/${id}`);
+      setProduct(await response.json());
+      setLoading(false);
+    };
+    getProduct();
+  }, []);
+
+  const Loading = () => {
+    return (
+      <>
+        <div className="col-md-6">
+          <Skeleton height={400} />
+        </div>
+        <div className="col-md-6" style={{ lineHeight: 2 }}>
+          <Skeleton height={50} width={300} />
+          <Skeleton height={75} />
+          <Skeleton height={25} width={150} />
+          <Skeleton height={50} />
+          <Skeleton height={150} />
+          <Skeleton height={50} width={100} />
+          <Skeleton height={50} width={100} style={{ marginLeft: 6 }} />
+        </div>
+      </>
+    );
+  }
+
+  const ShowProduct = () => {
+    return (
+      <>
+        <div className="col-md-6">
+          <img src={product.image} alt={product.title} height="400px" width="400px" />
+        </div>
+        <div className="col-md-6">
+          <h4 className='text-uppercase text-black-50'>{product.category}</h4>
+          <h1 className='display-5'>{product.title}</h1>
+          <p className='lead fw-bolder'>
+            Rating {product.rating && product.rating.rate}
+            <i className='fa fa-star'></i>
+          </p>
+          <h3 className='display-6 fw-bold my-4'>
+            ${product.price}
+          </h3>
+          <p className='lead'>{product.description}</p>
+          <button className='btn btn-outline-dark me-2 px-4 py-2' onClick={() => addProduct(product)}>Add to Cart</button>
+          <NavLink to="/cart" className='btn btn-dark ms-2 px-3 py-2'>Go to Cart</NavLink>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div>
+      <div className="container py-5">
+        <div className="row py-5">
+          {
+            loading ? <Loading /> : <ShowProduct />
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Product;

src/component/Products.jsx

@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+
+function Products() {
+
+  const [data, setData] = useState([]);
+  const [filter, setFilter] = useState(data);
+  const [loading, setLoading] = useState(false);
+  let componentMounted = true;
+
+  useEffect(() => {
+    const getProducts = async () => {
+      setLoading(true);
+      const response = await fetch("http://fakestoreapi.com/products");
+      if (componentMounted) {
+        setData(await response.clone().json());
+        setFilter(await response.json());
+        setLoading(false);
+        console.log(filter);
+      }
+      return () => {
+        componentMounted = false;
+      }
+    }
+    getProducts();
+  }, []);
+
+  const Loading = () => {
+    return (
+      <>
+        Loading....
+      </>
+    );
+  }
+
+  const ShowProduct = () => {
+    return (
+      <></>
+    );
+  }
+
+  const filterProduct = (cat) => {
+    const updateList = data.filter((x) => x.category === cat);
+    setFilter(updateList);
+  }
+
+  const ShowProducts = () => {
+    return (
+      <>
+        <div className="buttons d-flex justify-content-center mb-5 pb-5">
+          <button className="btn btn-outline-dark me-2" onClick={() => setFilter(data)}>All</button>
+          <button className="btn btn-outline-dark me-2" onClick={() => filterProduct("men's clothing")}>Men's Clothing</button>
+          <button className="btn btn-outline-dark me-2" onClick={() => filterProduct("women's clothing")}>Women's Clothing</button>
+          <button className="btn btn-outline-dark me-2" onClick={() => filterProduct("jewelery")}>Jewelery</button>
+          <button className="btn btn-outline-dark me-2" onClick={() => filterProduct("electronics")}>Electronics</button>
+        </div>
+        {
+          filter.map((product) => {
+            return (
+              <>
+                <div className="col-md-3 mb-4" key={product.id}>
+                  <div class="card h-100 text-center p-4">
+                    <img src={product.image} class="card-img-top" alt={product.title} height="250px" />
+                    <div class="card-body">
+                      <h5 class="card-title mb-0">{product.title.substring(0, 12)}...</h5>
+                      <p class="card-text leading fw-bold">${product.price}</p>
+                      {/* <a class="btn btn-outline-dark" href='#'>Buy Now</a> */}
+                      <NavLink to={`/products/${product.id}`}><a class="btn btn-outline-dark">Buy Now</a></NavLink>
+                    </div>
+                  </div>
+                </div>
+              </>
+            );
+          })
+        }
+      </>
+    );
+  }
+
+  return (
+    <div>
+      <div className="container my-5 py-5">
+        <div className="row">
+          <div className="col-12 mb-5">
+            <h1 className='display-6 fw-bolder text-center'>Latest Products</h1><hr />
+          </div>
+        </div>
+        <div className="row justify-content-center">
+          {
+            loading ? <Loading /> : <ShowProducts />
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Products;