feat(frontend): add cart and payment features, improve localhost setup

frontend/package.json

@@ -45,6 +45,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.24",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.462.0",
     "next-themes": "^0.3.0",

frontend/src/App.tsx

@@ -9,6 +9,10 @@ import Browse from "./pages/Browse";
 import Sell from "./pages/Sell";
 import ProductDetailsPage from "./pages/ProductDetail";
 import Navbar from "./components/Navbar";
+import { CartProvider } from "./components/CartContext.jsx";
+import Home from "./pages/Home.jsx";
+import Cart from "./pages/Cart.jsx";
+import Payment from "./pages/Payment";
 import Dashboard from "./pages/Dashboard";
 const queryClient = new QueryClient();
 
@@ -20,16 +24,22 @@ const App = () => (
       <BrowserRouter>
             <Navbar />
       <div className="pt-[50px]">
-
+        <CartProvider>
+
         <Routes>
           <Route path="/" element={<Index />} />
+
           <Route path="/signup" element={<SignUp />} />
           <Route path="/signin" element={<SignIn />} />
           <Route path="/browse" element={<Browse />} />
           <Route path="/product/:id" element={<ProductDetailsPage />} />
+          <Route path="/CartHome" element={<Home />} />
+          <Route path="/cart" element={<Cart />} />
+          <Route path="/payment" element={<Payment />} />
           <Route path="/sell" element={<Sell />} />
           <Route path="/dashboard" element={<Dashboard />} />
         </Routes>
+        </CartProvider>
         </div>
       </BrowserRouter>
     </TooltipProvider>

frontend/src/components/CartContext.jsx

@@ -0,0 +1,38 @@
+import React, { createContext, useReducer, useEffect, useState } from "react";
+
+export const CartContext = createContext();
+
+const initialState = {
+  cart: JSON.parse(localStorage.getItem("cart")) || [],
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_ITEM":
+      return { ...state, cart: [...state.cart, action.payload] };
+    case "REMOVE_ITEM":
+      return {
+        ...state,
+        cart: state.cart.filter((_, i) => i !== action.payload),
+      };
+    case "CLEAR_CART":
+      return { ...state, cart: [] };
+    default:
+      return state;
+  }
+};
+
+export const CartProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const [notification, setNotification] = useState(null);
+
+  useEffect(() => {
+    localStorage.setItem("cart", JSON.stringify(state.cart));
+  }, [state.cart]);
+
+  return (
+    <CartContext.Provider value={{ state, dispatch, notification, setNotification }}>
+      {children}
+    </CartContext.Provider>
+  );
+};