psit-eats · stoppieboy · Feb 10, 2026
diff --git a/client-side/src/App.jsx b/client-side/src/App.jsx
@@ -1,85 +1,88 @@
-// import React from 'react'
-// import LoginSignup from './components/Login-signup/LoginSignup'
-
-// function App() {
-//   return (
-//       <div>
-//         <LoginSignup></LoginSignup>
-//       </div>
-
-//   )
-// }
-
-// export default App
-
-import React from "react";
-import ReactDOM from "react-dom/client";
+import React, { useMemo, useState } from "react";
 import Header from "./components/Header.jsx";
 import Body from "./components/Body.jsx";
-import Cart from "./components/Cart.jsx"
-import { createBrowserRouter,RouterProvider,Outlet } from "react-router-dom";
+import Cart from "./components/Cart.jsx";
+import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
 import About from "./components/About.jsx";
 import Contact from "./components/Contact.jsx";
 import Error from "./components/Error.jsx";
 import Login from "./components/Login.jsx";
-import LoginSignup from "./components/LoginSignup.jsx"
-// import RestroMenu from "./components/RestroMenu.jsx";
+import LoginSignup from "./components/LoginSignup.jsx";
 
-const AppLayout =()=>{
-         return (
-            <div className="app">
-            <Header/>
-{/* This outlet(given by react router dom) 
-will be replaced by the component whose path is being called */}
-            <Outlet/>
-            </div>
-         )
-}
+const AppLayout = ({ cartCount }) => {
+  return (
+    <div className="app min-h-screen bg-amber-50">
+      <Header cartCount={cartCount} />
+      <Outlet />
+    </div>
+  );
+};
 
 function App() {
+  const [cartItems, setCartItems] = useState([]);
 
-   const appRouter= createBrowserRouter([
-      {
-         path: "/",
-         element: <AppLayout/>,
-         children:[
-            {
-               path:"/",
-               element: <Body/>,
-            },
-            {
-               path:"/about",
-               element: <About/>,
-            },
-            {
-               path:"/contact",
-               element:<Contact/>
-            },
-            {
-              path:"/cart",
-              element:<Cart/>
-            },
-            {
-              path:"/login",
-              element:<Login/>
-            },
-            {
-              path:"/signup",
-              element:<LoginSignup/>
-            },
-            // {
-            //    path:"/restaurant/:resId",
-            //    element:<RestroMenu/>
-            // },
-         ],
-         errorElement:<Error/>,
-      },
-   ])
+  const cartCount = useMemo(
+    () => cartItems.reduce((sum, item) => sum + item.quantity, 0),
+    [cartItems],
+  );
 
-   return (<RouterProvider router={appRouter}/>)
-}
+  const addToCart = (canteen, menuItem) => {
+    setCartItems((prev) => {
+      const existing = prev.find((item) => item.id === menuItem.id);
+      if (existing) {
+        return prev.map((item) =>
+          item.id === menuItem.id ? { ...item, quantity: item.quantity + 1 } : item,
+        );
+      }
 
-// const root=ReactDOM.createRoot(document.getElementById("root"));
-// root.render(<RouterProvider router={appRouter}/>);
+      return [
+        ...prev,
+        {
+          ...menuItem,
+          canteen: canteen.name,
+          quantity: 1,
+        },
+      ];
+    });
+  };
+
+  const clearCart = () => setCartItems([]);
+
+  const appRouter = createBrowserRouter([
+    {
+      path: "/",
+      element: <AppLayout cartCount={cartCount} />,
+      children: [
+        {
+          path: "/",
+          element: <Body addToCart={addToCart} />,
+        },
+        {
+          path: "/about",
+          element: <About />,
+        },
+        {
+          path: "/contact",
+          element: <Contact />,
+        },
+        {
+          path: "/cart",
+          element: <Cart cartItems={cartItems} clearCart={clearCart} />,
+        },
+        {
+          path: "/login",
+          element: <Login />,
+        },
+        {
+          path: "/signup",
+          element: <LoginSignup />,
+        },
+      ],
+      errorElement: <Error />,
+    },
+  ]);
+
+  return <RouterProvider router={appRouter} />;
+}
 
-export default App
+export default App;
diff --git a/client-side/src/components/About.jsx b/client-side/src/components/About.jsx
@@ -1,16 +1,15 @@
-import React from 'react'
-import UserClass from './UserClass'
+import React from "react";
 
 const About = () => {
   return (
-    <div>
-        <h2>This is ABOUT US page for our project.</h2>
-        <UserClass name={"Ayushi"} location={"UP"}/>;
-        <UserClass name={"Shivam"} location={"UP"}/>;
-        <UserClass name={"Rohan"} location={"UP"}/>;
-    </div>
-        
-  )
-}
+    <main className="mx-auto max-w-4xl px-4 py-8">
+      <h1 className="text-2xl font-bold text-amber-900">About CampusCrave</h1>
+      <p className="mt-3 rounded-lg bg-white p-4 text-gray-700 shadow">
+        CampusCrave is a college-focused food delivery app built for PSIT students. It connects
+        students with all major campus canteens and helps them place quick orders between classes.
+      </p>
+    </main>
+  );
+};
 
-export default About
+export default About;
diff --git a/client-side/src/components/Body.jsx b/client-side/src/components/Body.jsx
@@ -1,10 +1,80 @@
-import React from 'react'
-const Body=()=>{
-    return(
-        <div>
-            <h1>BODY IS DEFINED HERE</h1>
-        </div>
-    )
-}
-
-export default Body;
+import React, { useMemo, useState } from "react";
+import { campusCanteens } from "../utils/campusData";
+
+const Body = ({ addToCart }) => {
+  const [search, setSearch] = useState("");
+  const [vegOnly, setVegOnly] = useState(false);
+
+  const filteredCanteens = useMemo(() => {
+    return campusCanteens.filter((canteen) => {
+      const matchSearch = canteen.name.toLowerCase().includes(search.toLowerCase());
+      if (!matchSearch) {
+        return false;
+      }
+
+      if (!vegOnly) {
+        return true;
+      }
+
+      return canteen.items.some((item) => item.veg);
+    });
+  }, [search, vegOnly]);
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-8">
+      <section className="rounded-2xl bg-gradient-to-r from-amber-700 to-orange-500 p-6 text-white shadow-lg">
+        <h1 className="text-3xl font-bold">CampusCrave - PSIT Food Delivery</h1>
+        <p className="mt-2 max-w-2xl text-sm">
+          Order from your favorite campus canteens and get your food delivered across hostels,
+          classes, and labs.
+        </p>
+      </section>
+
+      <section className="mt-6 flex flex-col gap-3 rounded-xl bg-white p-4 shadow sm:flex-row sm:items-center sm:justify-between">
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search canteens"
+          className="w-full rounded-lg border border-amber-200 px-3 py-2 outline-none focus:border-amber-500 sm:max-w-sm"
+        />
+        <label className="flex items-center gap-2 text-sm font-medium text-amber-900">
+          <input type="checkbox" checked={vegOnly} onChange={() => setVegOnly((prev) => !prev)} />
+          Show canteens with veg options
+        </label>
+      </section>
+
+      <section className="mt-6 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+        {filteredCanteens.map((canteen) => (
+          <article key={canteen.id} className="rounded-xl bg-white p-4 shadow">
+            <div className="mb-3 border-b border-amber-100 pb-3">
+              <h2 className="text-lg font-bold text-amber-900">{canteen.name}</h2>
+              <p className="text-sm text-gray-600">{canteen.location}</p>
+              <p className="mt-1 text-xs text-gray-500">
+                {canteen.cuisine} • ⭐ {canteen.rating} • ETA {canteen.eta}
+              </p>
+            </div>
+
+            <ul className="space-y-2">
+              {canteen.items.map((menuItem) => (
+                <li key={menuItem.id} className="flex items-center justify-between rounded-lg bg-amber-50 p-2">
+                  <div>
+                    <p className="font-medium text-amber-950">{menuItem.name}</p>
+                    <p className="text-sm text-gray-700">₹{menuItem.price}</p>
+                  </div>
+                  <button
+                    className="rounded-lg bg-amber-700 px-3 py-1 text-sm font-semibold text-white hover:bg-amber-800"
+                    onClick={() => addToCart(canteen, menuItem)}
+                  >
+                    Add
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </article>
+        ))}
+      </section>
+    </main>
+  );
+};
+
+export default Body;
diff --git a/client-side/src/components/Cart.jsx b/client-side/src/components/Cart.jsx
@@ -1,10 +1,48 @@
-import React from 'react'
-const Cart=()=>{
-    return(
-        <div>
-            <h1>Cart Page</h1>
-        </div>
-    )
-}
-
-export default Cart;
+import React, { useMemo } from "react";
+
+const Cart = ({ cartItems, clearCart }) => {
+  const grandTotal = useMemo(
+    () => cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0),
+    [cartItems],
+  );
+
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-8">
+      <h1 className="text-2xl font-bold text-amber-900">Your Cart</h1>
+
+      {cartItems.length === 0 ? (
+        <p className="mt-4 rounded-lg bg-white p-4 text-gray-700 shadow">
+          Your cart is empty. Add items from canteens to place an order.
+        </p>
+      ) : (
+        <>
+          <div className="mt-4 space-y-3">
+            {cartItems.map((item) => (
+              <div key={item.id} className="flex items-center justify-between rounded-lg bg-white p-4 shadow">
+                <div>
+                  <p className="font-semibold text-amber-900">{item.name}</p>
+                  <p className="text-sm text-gray-600">{item.canteen}</p>
+                </div>
+                <p className="text-sm text-gray-700">
+                  {item.quantity} x ₹{item.price} = ₹{item.quantity * item.price}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-6 rounded-xl bg-amber-100 p-4">
+            <p className="text-lg font-bold text-amber-900">Total: ₹{grandTotal}</p>
+            <button
+              className="mt-3 rounded-lg bg-amber-700 px-4 py-2 font-semibold text-white hover:bg-amber-800"
+              onClick={clearCart}
+            >
+              Place order
+            </button>
+          </div>
+        </>
+      )}
+    </main>
+  );
+};
+
+export default Cart;
diff --git a/client-side/src/components/Contact.jsx b/client-side/src/components/Contact.jsx
@@ -1,10 +1,16 @@
-import React from 'react'
-const Contact=()=>{
-    return(
-        <div>
-            <h1>Contact Us Page</h1>
-        </div>
-    )
-}
+import React from "react";
+
+const Contact = () => {
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-8">
+      <h1 className="text-2xl font-bold text-amber-900">Contact Support</h1>
+      <div className="mt-3 space-y-2 rounded-lg bg-white p-4 text-gray-700 shadow">
+        <p>Email: support@campuscrave.in</p>
+        <p>Phone: +91-90000-12345</p>
+        <p>Help Desk: Student Activity Center, Ground Floor</p>
+      </div>
+    </main>
+  );
+};
 
 export default Contact;