🔍 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

---

🚀 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

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

2️⃣ Navigate to the Project Directory

cd whereisit-client

3️⃣ Install Dependencies

npm install

4️⃣ Configure Environment Variables

Create a .env file and add:

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

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

---

🚀 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

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

2️⃣ Navigate to the Project Directory

cd whereisit-server

3️⃣ Install Dependencies

npm install

4️⃣ Configure Environment Variables

Create a .env file and add:

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

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! 🚀