import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.jsx'
import './index.css'
import { Provider } from 'react-redux'
import { mainRTK } from './rtk/main_rtk.js'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <Provider store={mainRTK()}>
        <App />
      </Provider>
    </BrowserRouter>
  </StrictMode>,
)

import { Route, Routes } from 'react-router-dom';
import Navbar from './componants/componants/Navbar';
import ProductDetail from './componants/ProductDetail';
import HomePage from './pages/HomePage';
import Sidebar from './pages/Sidebar';
import AddProduct from './componants/AddProductDetail';
import Cart from './pages/Cart';

function App() {
  return (
    <>
      <Navbar />

      <div className="container-fluid">
        <div className="col-11">
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/add-product" element={<AddProduct />} />
            <Route path="/products/:id" element={<ProductDetail />} />
            <Route path="/cart" element={<Cart />} />
          </Routes>
        </div>
      </div>
    </>
  )
}

export default App;

import { configureStore } from "@reduxjs/toolkit";
import productReducer from "./slices/producr_slice";
import cartReducer from "./slices/cart_slice";

export const mainRTK = () => configureStore({
  reducer: {
    products: productReducer,
    cart: cartReducer,
  },
});

import ProductSidebar from "./ProductSidebar";

function HomePage() {
    return (
        <>
            <ProductSidebar />
        </>
    );
}

export default HomePage;

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

export const fetechProducts = createAsyncThunk(
    "products/fetechProducts",
    async (id, thunkAPI) => {
        try {
            const res = await fetch(`https://fakestoreapi.com/products`);
            const data = await res.json();
            return data;
        } catch (error) {
            return thunkAPI.rejectWithValue(error.message);
        }
    }
);

export const productSlice = createSlice({
    name: "products",
    initialState: {
        products: [],
        loading: false,
        error: null,
    },
    reducers: {},
    extraReducers: (builder) => {
        builder.addCase(fetechProducts.pending, (state) => {
            state.loading = true;
        });
        builder.addCase(fetechProducts.fulfilled, (state, action) => {
            state.loading = false;
            state.products = action.payload;
        });
        builder.addCase(fetechProducts.rejected, (state, action) => {
            state.loading = false;
            state.error = action.payload;
        });
    }
});

export default productSlice.reducer;

import { createSlice } from "@reduxjs/toolkit";

export const cartSlice = createSlice({
    name: "cart",
    initialState: [],
    reducers: {
        addToCart: (state, action) => {
            const item = state.find((item) => item.id === action.payload.id);
            if (item) {
                item.quantity += 1;
            } else {
                state.push({ ...action.payload, quantity: 1 });
            }
        },
        removeFromCart: (state, action) => {
            return state.filter((item) => item.id !== action.payload);
        },
        clearCart: () => [],
    },
});

export const { addToCart, removeFromCart, clearCart } = cartSlice.actions;

export default cartSlice.reducer;

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import { fetechProducts } from "../rtk/slices/producr_slice";
import "./ProductSidebarDesign.css";
import { addToCart } from "../rtk/slices/cart_slice";

function ProductSidebar() {
    const { products, loading, error } = useSelector((state) => state.products);
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(fetechProducts());
    }, [dispatch]);

    const handleAddToCart = (product) => {
        dispatch(addToCart(product));
    };

    if (loading) {
        return <p className="text-center mt-5">Loading products...</p>;
    }

    if (error) {
        return <p className="text-center text-danger mt-5">Error: {error}</p>;
    }

    return (
        <div className="container mt-4">
            <div className="row g-4">
                {products.map((product) => (
                    <div className="col-md-4 col-lg-3" key={product.id}>
                        <div className="card product-card h-100">
                            <img
                                src={product.image}
                                className="card-img-top product-img"
                                style={{
                                    height: "350px",
                                    border: "none",
                                    borderRadius: "15px",
                                    overflow: "hidden",
                                    transition: "0.3s ease",
                                }}
                                alt={product.title}
                            />

                            <div className="card-body d-flex flex-column">
                                <h5 className="card-title">
                                    {product.title.slice(0, 35)}...
                                </h5>

                                <p className="card-text text-muted">
                                    {product.description.slice(0, 80)}...
                                </p>

                                <h6 className="price mb-3">${product.price}</h6>

                                <div className="mt-auto">
                                    <Link
                                        to={`/products/${product.id}`}
                                        state={{ product }}
                                        className="btn btn-info btn-sm me-2"
                                    >
                                        View
                                    </Link>

                                    <button 
                                        className="btn btn-primary btn-sm"
                                        onClick={() => handleAddToCart(product)}
                                    >
                                        Add To Cart
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default ProductSidebar;

import { useDispatch, useSelector } from "react-redux";
import { clearCart, removeFromCart } from "../rtk/slices/cart_slice";

function Cart() {
  const cartItems = useSelector((state) => state.cart);
  const dispatch = useDispatch();

  const totalPrice = cartItems.reduce((total, item) => {
    return total + item.price * item.quantity;
  }, 0);

  const handleRemoveItem = (id) => {
    dispatch(removeFromCart(id));
  };

  const handleClearCart = () => {
    dispatch(clearCart());
  };

  if (cartItems.length === 0) {
    return (
      <div
        className="container"
        style={{
          marginTop: "100px",
          textAlign: "center",
        }}
      >
        <h2 style={{
            color: "#333",
        }}
        >Your Cart is Empty</h2>
        <p className="text-muted">No products added to cart yet.</p>
      </div>
    );
  }

  return (
    <div
      className="container"
      style={{
        marginTop: "100px",
      }}
    >
      <div
        className="d-flex justify-content-between align-items-center mb-4"
      >
        <h2 style={{
            color: "#333",
        }}>Shopping Cart</h2>

        <button
          className="btn btn-danger"
          onClick={handleClearCart}
        >
          Clear All
        </button>
      </div>

      <div
        className="table-responsive"
        style={{
          boxShadow: "0 4px 15px rgba(0, 0, 0, 0.12)",
          borderRadius: "12px",
          overflow: "hidden",
        }}
      >
        <table className="table table-striped table-hover text-center align-middle mb-0">
          <thead className="table-dark">
            <tr>
              <th>Image</th>
              <th>Product Name</th>
              <th>Price</th>
              <th>Quantity</th>
              <th>Total</th>
              <th>Operation</th>
            </tr>
          </thead>

          <tbody>
            {cartItems.map((item) => (
              <tr key={item.id}>
                <td>
                  <img
                    src={item.image}
                    alt={item.title}
                    style={{
                      width: "70px",
                      height: "70px",
                      objectFit: "contain",
                    }}
                  />
                </td>

                <td
                  style={{
                    maxWidth: "250px",
                    fontWeight: "500",
                  }}
                >
                  {item.title}
                </td>

                <td>${item.price}</td>

                <td>{item.quantity}</td>

                <td>
                  ${(item.price * item.quantity).toFixed(2)}
                </td>

                <td>
                  <button
                    className="btn btn-sm btn-danger"
                    onClick={() => handleRemoveItem(item.id)}
                  >
                    Delete
                  </button>
                </td>
              </tr>
            ))}
          </tbody>

          <tfoot>
            <tr>
              <td colSpan="4" className="text-end fw-bold">
                Total Price:
              </td>

              <td className="fw-bold text-success">
                ${totalPrice.toFixed(2)}
              </td>

              <td></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  );
}

export default Cart;

import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";

function Navbar() {
  const dispatch = useDispatch();
  const cartCount = useSelector((state) => state.cart.length);

  return (
    <nav className="navbar navbar-expand-lg bg-light fixed-top">
      <div className="container">
        <Link className="navbar-brand" to="/">Logo</Link>

        <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 ms-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <Link className="nav-link active" aria-current="page" to="/">
                Home
              </Link>
            </li>

            <li className="nav-item">
              <Link className="nav-link" to="/about">
                About
              </Link>
            </li>

            <li className="nav-item ms-lg-3">
              <Link
                to="/cart"
                className="nav-link position-relative"
                style={{
                  fontSize: "24px",
                  width: "45px",
                  height: "45px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                🛒

                <span
                  style={{
                    position: "absolute",
                    top: "0px",
                    right: "0px",
                    backgroundColor: "red",
                    color: "white",
                    borderRadius: "50%",
                    width: "20px",
                    height: "20px",
                    fontSize: "12px",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontWeight: "bold",
                  }}
                >
                  {cartCount.toString()}
                </span>
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

export default Navbar;

npm install react-router-dom
npm install bootstrap
npm install @reduxjs/toolkit react-redux

npm install react-router-dom bootstrap @reduxjs/toolkit react-redux