https://github.com/maksudulhaque2000/wherelist

WhereIsIt (Client Side) is the user interface for the Lost and Found platform, allowing users to report lost or found items, manage submissions, and interact easily with the platform. It is designed to be user-friendly, intuitive, and fully responsive.
https://github.com/maksudulhaque2000/wherelist

daisyui eslint express firebase mongodb reactjs tailwindcss vercel vite

Last synced: 3 months ago
JSON representation

WhereIsIt (Client Side) is the user interface for the Lost and Found platform, allowing users to report lost or found items, manage submissions, and interact easily with the platform. It is designed to be user-friendly, intuitive, and fully responsive.

• Host: GitHub
• URL: https://github.com/maksudulhaque2000/wherelist
• Owner: maksudulhaque2000
• Created: 2025-02-05T08:56:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-05T08:59:23.000Z (over 1 year ago)
• Last Synced: 2025-06-10T20:54:24.544Z (about 1 year ago)
• Topics: daisyui, eslint, express, firebase, mongodb, reactjs, tailwindcss, vercel, vite
• Language: JavaScript
• Homepage: https://whereisit-4b5c6.web.app/
• Size: 5.97 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  



# 🔍 WhereIsIt - Client Side

## 📌 Project Purpose

**WhereIsIt** (Client Side) serves as the user interface for the Lost and Found platform. It enables users to report lost or found items, manage submissions, and interact seamlessly with the platform. The client-side is designed to be user-friendly, intuitive, and responsive.

## 🌍 Live Demo

🔗 [Visit WhereIsIt Live Website](https://whereisit-4b5c6.web.app/)

---

## 🚀 Key Features

✅ **Fully Responsive Design** – Optimized for all screen sizes.  

✅ **Authentication** – Secure email/password login with Google authentication.  

✅ **Lost & Found Management** – Users can add, update, and delete posts.  

✅ **Search & Filter** – Find items based on title or location.  

✅ **Framer Motion Animations** – Smooth and engaging UI animations.  

✅ **Dynamic Title Updates** – Reflects the current page in the browser tab.  

✅ **Toast Notifications** – User-friendly alerts for important actions.  

✅ **Protected Routes** – Only logged-in users can manage their items.  

### 🏠 Home Page Features

1. **Home Section** – Displays a slider and recent lost & found posts.  

2. **Lost & Found Items** – View and search for all lost and found items.  

3. **Add New Item** – Private route for adding new posts.  

4. **Manage My Items** – Users can edit or delete their submissions.  

5. **All Recovered Items** – View items that have been successfully returned.  

---

## 🛠️ Technologies Used

- **Frontend**: React.js, React Router  

- **UI & Styling**: TailwindCSS, Framer Motion, React Datepicker  

- **Authentication**: Firebase Authentication  

- **Data Management**: Axios, SweetAlert2  

---

## 🔧 Setup Instructions

### **Prerequisites**

- Install **Node.js** (v14 or later).

### **1️⃣ Clone the Repository**  

```bash

git clone https://github.com/your-username/whereisit-client.git

```

### **2️⃣ Navigate to the Project Directory**  

```bash

cd whereisit-client

```

### **3️⃣ Install Dependencies**  

```bash

npm install

```

### **4️⃣ Configure Environment Variables**  

Create a `.env` file and add:  

```env

REACT_APP_FIREBASE_API_KEY=your_firebase_api_key

REACT_APP_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain

REACT_APP_FIREBASE_PROJECT_ID=your_project_id

```

### **5️⃣ Start the Development Server**  

```bash

npm start

```

---

## 📝 Meaningful Commits

1. Initial Setup  

2. Added Footer Component  

3. Implemented Lost & Found Items Page  

4. Connected Details Page to Backend  

5. Created "My Items" Management Page  

6. Added Status Update Feature  

7. Integrated Framer Motion for Animations  

8. Deployed Project to Firebase  

---

## 🙌 Acknowledgments

Special thanks to the **WhereIsIt** team for the opportunity to contribute to this project.  

---

# 🛠️ WhereIsIt - Server Side

## 📌 Project Purpose

WhereIsIt (Server Side) is the backend for the Lost and Found platform. It securely handles user authentication, item management, and data storage, supporting the client-side functionalities.

## 🌍 Live Server

🔗 [Visit WhereIsIt Live Server](https://where-is-it-server.vercel.app/)

---

## 🚀 Key Features

✅ **RESTful API Endpoints** – CRUD operations for lost and found items.  

✅ **MongoDB Integration** – Secure and scalable NoSQL database.  

✅ **JWT Authentication** – Secure access for private routes.  

✅ **Environment Variable Security** – Sensitive credentials are stored securely.  

✅ **CORS Enabled** – Allows safe cross-origin requests.  

✅ **Comprehensive Error Handling** – Provides clear API responses.  

### 🛠️ Core Functionalities

- **User Authentication** – Secure JWT-based authentication system.  

- **Item Management** – CRUD operations for lost & found items.  

- **Database Integration** – MongoDB stores user & item data.  

- **Search & Filter** – Efficient filtering of items.  

- **Secure API Requests** – CORS enabled with validation & authorization.  

---

## 🛠️ Technologies Used

- **Backend**: Node.js, Express.js  

- **Database**: MongoDB, Mongoose  

- **Security**: JWT Authentication, dotenv  

- **Deployment**: Vercel  

---

## 🔧 Setup Instructions

### **Prerequisites**

- Install **Node.js**  

- Set up a **MongoDB Atlas** database or local MongoDB instance.

### **1️⃣ Clone the Repository**  

```bash

git clone https://github.com/your-username/whereisit-server.git

```

### **2️⃣ Navigate to the Project Directory**  

```bash

cd whereisit-server

```

### **3️⃣ Install Dependencies**  

```bash

npm install

```

### **4️⃣ Configure Environment Variables**  

Create a `.env` file and add:  

```env

PORT=5000

MONGO_URI=your_mongodb_connection_string

JWT_SECRET=your_jwt_secret

FIREBASE_API_KEY=your_firebase_api_key

FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain

FIREBASE_PROJECT_ID=your_firebase_project_id

FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket

FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id

FIREBASE_APP_ID=your_firebase_app_id

```

### **5️⃣ Start the Server**  

```bash

npm start

```

---

## 🔗 API Endpoints

- **POST /api/items** – Add a new lost/found item.  

- **GET /api/items** – Retrieve all lost & found items.  

- **GET /api/items/:id** – Retrieve a specific item by ID.  

- **PUT /api/items/:id** – Update an item’s details.  

- **DELETE /api/items/:id** – Remove an item from the database.  

- **POST /api/recovered** – Mark an item as recovered.  

---

## 📝 Meaningful Commits

1. Initial Server Setup  

2. Integrated MongoDB & Connected API Routes  

3. Implemented JWT Authentication  

4. Developed CRUD Operations for Items  

5. Added Secure Environment Variables  

6. Optimized API Performance  

7. Enabled CORS for Cross-Origin Access  

8. Deployed Server to Vercel  

---

## 🙌 Acknowledgments

Special thanks to the **WhereIsIt** team for providing a platform to work on this meaningful project.  

---

## 📜 License

Distributed under the **MIT License**. See `LICENSE` for details.  

---

🎉 **Happy Coding!** 🚀