From 0fe0d91da012db936cfbf785e37e08df4524cecc Mon Sep 17 00:00:00 2001 From: Shivam Verma Date: Wed, 11 Feb 2026 01:41:02 +0530 Subject: [PATCH] Build campus canteen food delivery UI flow --- client-side/src/App.jsx | 147 +++++++++++++------------ client-side/src/components/About.jsx | 23 ++-- client-side/src/components/Body.jsx | 90 +++++++++++++-- client-side/src/components/Cart.jsx | 58 ++++++++-- client-side/src/components/Contact.jsx | 22 ++-- client-side/src/components/Header.jsx | 69 ++++++------ client-side/src/utils/campusData.js | 44 ++++++++ 7 files changed, 307 insertions(+), 146 deletions(-) create mode 100644 client-side/src/utils/campusData.js diff --git a/client-side/src/App.jsx b/client-side/src/App.jsx index 4a98857..fe8a903 100644 --- 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 ( -//
-// -//
- -// ) -// } - -// 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 ( -
-
-{/* This outlet(given by react router dom) -will be replaced by the component whose path is being called */} - -
- ) -} +const AppLayout = ({ cartCount }) => { + return ( +
+
+ +
+ ); +}; function App() { + const [cartItems, setCartItems] = useState([]); - const appRouter= createBrowserRouter([ - { - path: "/", - element: , - children:[ - { - path:"/", - element: , - }, - { - path:"/about", - element: , - }, - { - path:"/contact", - element: - }, - { - path:"/cart", - element: - }, - { - path:"/login", - element: - }, - { - path:"/signup", - element: - }, - // { - // path:"/restaurant/:resId", - // element: - // }, - ], - errorElement:, - }, - ]) + const cartCount = useMemo( + () => cartItems.reduce((sum, item) => sum + item.quantity, 0), + [cartItems], + ); - return () -} + 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(); + return [ + ...prev, + { + ...menuItem, + canteen: canteen.name, + quantity: 1, + }, + ]; + }); + }; + + const clearCart = () => setCartItems([]); + + const appRouter = createBrowserRouter([ + { + path: "/", + element: , + children: [ + { + path: "/", + element: , + }, + { + path: "/about", + element: , + }, + { + path: "/contact", + element: , + }, + { + path: "/cart", + element: , + }, + { + path: "/login", + element: , + }, + { + path: "/signup", + element: , + }, + ], + errorElement: , + }, + ]); + + return ; +} -export default App \ No newline at end of file +export default App; diff --git a/client-side/src/components/About.jsx b/client-side/src/components/About.jsx index 6a8afc1..fccb780 100644 --- 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 ( -
-

This is ABOUT US page for our project.

- ; - ; - ; -
- - ) -} +
+

About CampusCrave

+

+ 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. +

+
+ ); +}; -export default About \ No newline at end of file +export default About; diff --git a/client-side/src/components/Body.jsx b/client-side/src/components/Body.jsx index fa9b414..2b9ebda 100644 --- 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( -
-

BODY IS DEFINED HERE

-
- ) -} - -export default Body; \ No newline at end of file +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 ( +
+
+

CampusCrave - PSIT Food Delivery

+

+ Order from your favorite campus canteens and get your food delivered across hostels, + classes, and labs. +

+
+ +
+ 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" + /> + +
+ +
+ {filteredCanteens.map((canteen) => ( +
+
+

{canteen.name}

+

{canteen.location}

+

+ {canteen.cuisine} • ⭐ {canteen.rating} • ETA {canteen.eta} +

+
+ +
    + {canteen.items.map((menuItem) => ( +
  • +
    +

    {menuItem.name}

    +

    ₹{menuItem.price}

    +
    + +
    • + ))} +
+
+ ))} +
+
+ ); +}; + +export default Body; diff --git a/client-side/src/components/Cart.jsx b/client-side/src/components/Cart.jsx index 84c79a4..d3a4ae2 100644 --- 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( -
-

Cart Page

-
- ) -} - -export default Cart; \ No newline at end of file +import React, { useMemo } from "react"; + +const Cart = ({ cartItems, clearCart }) => { + const grandTotal = useMemo( + () => cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0), + [cartItems], + ); + + return ( +
+

Your Cart

+ + {cartItems.length === 0 ? ( +

+ Your cart is empty. Add items from canteens to place an order. +

+ ) : ( + <> +
+ {cartItems.map((item) => ( +
+
+

{item.name}

+

{item.canteen}

+
+

+ {item.quantity} x ₹{item.price} = ₹{item.quantity * item.price} +

+
+ ))} +
+ +
+

Total: ₹{grandTotal}

+ +
+ + )} +
+ ); +}; + +export default Cart; diff --git a/client-side/src/components/Contact.jsx b/client-side/src/components/Contact.jsx index e1e9f38..01e5425 100644 --- 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( -
-

Contact Us Page

-
- ) -} +import React from "react"; + +const Contact = () => { + return ( +
+

Contact Support

+
+

Email: support@campuscrave.in

+

Phone: +91-90000-12345

+

Help Desk: Student Activity Center, Ground Floor

+
+
+ ); +}; export default Contact; diff --git a/client-side/src/components/Header.jsx b/client-side/src/components/Header.jsx index 02c01d0..63f0aed 100644 --- a/client-side/src/components/Header.jsx +++ b/client-side/src/components/Header.jsx @@ -1,41 +1,42 @@ import React from "react"; import { LOGO_URL } from "../utils/constants"; -import { useState } from "react"; import { Link } from "react-router-dom"; - -const Header=()=>{ - return( -
-
- -
-
-
    - -
  • - Home -
    • -
  • - About Us -
    • -
  • - Contact Us -
    • -
  • - Cart -
    • -
  • - LogIn -
    • -
  • - SignUp -
    • -
- -
+const Header = ({ cartCount }) => { + return ( +
+
+ CampusCrave logo +
+

PSIT

+

CampusCrave

- ); +
+ + +
+ ); }; -export default Header; \ No newline at end of file +export default Header; diff --git a/client-side/src/utils/campusData.js b/client-side/src/utils/campusData.js new file mode 100644 index 0000000..801945f --- /dev/null +++ b/client-side/src/utils/campusData.js @@ -0,0 +1,44 @@ +export const campusCanteens = [ + { + id: "north-square", + name: "North Square Canteen", + location: "Near Library Block", + eta: "15-20 min", + rating: 4.5, + minOrder: 60, + cuisine: "Snacks & Fast Food", + items: [ + { id: "ns-1", name: "Veg Burger", price: 80, veg: true }, + { id: "ns-2", name: "Cheese Maggi", price: 70, veg: true }, + { id: "ns-3", name: "Cold Coffee", price: 55, veg: true }, + ], + }, + { + id: "engineers-hub", + name: "Engineers' Hub", + location: "Engineering Department", + eta: "10-15 min", + rating: 4.3, + minOrder: 50, + cuisine: "North Indian", + items: [ + { id: "eh-1", name: "Chole Bhature", price: 90, veg: true }, + { id: "eh-2", name: "Paneer Roll", price: 85, veg: true }, + { id: "eh-3", name: "Masala Tea", price: 30, veg: true }, + ], + }, + { + id: "sports-corner", + name: "Sports Corner Eatery", + location: "Near Main Ground", + eta: "20-25 min", + rating: 4.6, + minOrder: 80, + cuisine: "Healthy Bowls", + items: [ + { id: "sc-1", name: "Protein Bowl", price: 120, veg: false }, + { id: "sc-2", name: "Grilled Sandwich", price: 95, veg: true }, + { id: "sc-3", name: "Fresh Lime Soda", price: 40, veg: true }, + ], + }, +];