Lost and Found Portal

A full-stack web application designed to help communities and colleges report, track, search, and reunite with lost belongings. The project is continuously being developed with new features and improvements.

🌐 Live Demo

🚀 View the Live Application

The application is deployed on Render and can be accessed directly using the link above.

---

🚀 Tech Stack Used

🌐 Frontend (Client-Side)

• Framework: React.js (via Vite)
• Routing: React Router DOM (Protected routes & seamless navigation)
• Styling: Tailwind CSS v4 for responsive, rich, and dynamic user interfaces
• HTTP Client: Axios (configured with request interceptors for JWT)
• Icons: Lucide-React (clean, modern SVG icons)

⚙️ Backend (Server-Side)

• Environment: Node.js
• Framework: Express.js (REST API architecture)
• Authentication: JSON Web Tokens (JWT) + Bcrypt (password hashing)
• File Uploads: Multer (local image storage)
• Utilities: CORS (Cross-Origin Resource Sharing) & dotenv

🗄️ Database

• Database: MySQL
• Driver: mysql2/promise (Promise-based MySQL client)

---

🛠️ Project Structure

The repository is divided into two separate applications:

Lost-and-Found-Portal/
│
├── frontend/       # Vite + React frontend
│
└── backend/        # Node.js + Express backend

---

✨ Features

• User Authentication: Secure registration and login using hashed passwords and JWT authentication.
• Interactive Dashboard: Users can manage, delete, and resolve their own posted items.
• Reporting System: Report either a Lost or Found item with categorized details, locations, descriptions, and images.
• Dynamic Search & Filtering: Search through reported items and filter them by Lost or Found status.
• Image Uploads: Upload images while reporting lost or found belongings.
• Contact Integration: View the reporter's contact email to facilitate the return of belongings.
• Protected Routes: Authentication-based access control for protected pages.
• Responsive UI: Modern responsive interface built with React and Tailwind CSS.

---

💻 Getting Started

1. Prerequisites

Make sure you have the following installed:

• Node.js
• MySQL Server

MySQL should be running on port 3306.

2. Database Setup

Ensure your MySQL instance is configured with the required credentials and initialize the database schema:

cd backend
node scripts/initDB.js

3. Running the Backend

Open a terminal and navigate to the backend folder:

cd backend
npm install
npm run dev

The backend API will be available at:

http://localhost:5000

4. Running the Frontend

Open a new terminal:

cd frontend
npm install
npm run dev

The frontend will be available at:

http://localhost:5173

---

🌍 Deployment

The application is deployed and publicly accessible through Render.

🚀 Live Application

https://lostandfounditems.onrender.com/

You can use the live application to:

1. Register an account
2. Log in securely
3. Report a lost item
4. Report a found item
5. Search and filter reported items
6. View item details
7. Contact the person who reported an item

---

🔐 Authentication & Security

• Passwords are hashed using Bcrypt.
• Authentication is handled using JWT.
• Protected frontend routes prevent unauthorized access.
• Axios request interceptors automatically attach authentication tokens to API requests.
• CORS is configured for communication between the frontend and backend.

---

📌 Future Improvements

The project is actively being developed. Potential future improvements include:

• Email notifications
• Advanced search and filtering
• Location-based item discovery
• Admin dashboard
• Improved image storage using cloud storage
• Real-time notifications
• Better item matching between lost and found reports

---

👨‍💻 Project Status

🚀 Deployed and actively under development

🔗 Live Demo: https://lostandfounditems.onrender.com/