🧩 Lost & Found Web Application

A MERN stack web application designed to help users report, find, and recover lost or found items within a specific campus.
This platform creates a centralized place where students and staff can reconnect with their belongings securely and efficiently.

---

🚀 Features

✅ User Authentication — Secure sign-up and login using JWT tokens.
✅ Post Lost & Found Items — Users can upload item details and images.
✅ Browse Items — Easily search and explore all reported items.
✅ My Listings — View and manage items posted by the logged-in user.
✅ Pagination Support — Smooth browsing experience across multiple pages.
✅ Campus-Specific Platform — Only valid for users and activities within the campus (not a public/global platform).
✅ Responsive UI — Built with Material UI and Framer Motion for a clean and modern look.
✅ Logout & Session Handling — Automatic session management with secure logout.

---

🛠️ Tech Stack

Layer	Technologies Used
Frontend	React.js, Material UI (MUI), Framer Motion
Backend	Node.js, Express.js
Database	MongoDB
Other Tools	Axios, Nodemon, JWT Authentication

---

⚙️ Installation & Setup

1. Clone the repository

   git clone https://github.com/levi178u/Web-Dev-Assignment
   cd Web-Dev-Assignment

2. Install dependencies

   npm install
   cd client
   npm install

3. Create .env file in the root directory
   Add the following environment variables:

   MONGO_URL=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret
   PORT=4000

4. Start the development server

   npm run dev

   The server will start at http://localhost:4000.

5. Start the frontend

   cd client
   npm start

   The frontend will start at http://localhost:3000.

---

🧠 Folder Structure

lost-and-found-campus/
│
├── server/
│   ├── app.js
│   ├── routes/
│   ├── models/
│   ├── controllers/
│   ├── middlewares/
│   └── .env
│
├── client/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── img/
│   │   ├── styles/
│   │   ├── app.js
│   │   └── index.js
│   │   └── index.css
│   │   └── constraints.js
│   │   └── firebase.js
│   │   └── layout.js
│   ├── .env
│   └── package.json
│
├── .gitignore
├── README.md

---

💡 Key Points

• This application is restricted to a specific campus — only registered campus users can post or view items.
• The system ensures data privacy and safe item exchange between legitimate users.
• Admin moderation can be added to verify posts and avoid spam.

---

📸 UI Highlights

• Modern navbar and footer with glassmorphism design.
• Smooth animations using Framer Motion.
• Intuitive item cards for quick browsing.
• Fully responsive on mobile and desktop devices.

---

🧾 Project Assignment By:

• Amlan Prateek Panda (123CS0200)
• Anshuman Panda (123CS0201)
• Soubhagya Sahoo (123CS0218)
• Priyabrata Sahu (123CS0220)
• Santoshi (123CS0223)