WhereIsIt - Client Side

📌 Project Overview

WhereIsIt (Client Side) is the user interface of the Lost and Found platform. It allows users to report lost or found items, manage their submissions, and interact with the system seamlessly. The application is designed to provide a smooth and responsive experience.

🌍 Live Demo

🔗 Visit WhereIsIt-V2 Live Website

---

🚀 Key Features

• 🔹 Responsive Design: Optimized for mobile, tablet, and desktop devices.
• 🔹 Authentication: Secure login and registration with email/password and Google authentication.
• 🔹 Lost & Found Items Management: Users can add, update, delete, and mark items as recovered.
• 🔹 Dynamic Pages: Each route dynamically updates the page title.
• 🔹 Enhanced User Engagement: Includes a homepage slider and additional sections for better interaction.
• 🔹 Framer Motion: Smooth animations for an engaging user experience.
• 🔹 Search Functionality: Filter lost and found items by title or location.
• 🔹 Navbar & Footer: Intuitive navigation and informative footer.
• 🔹 404 Page: Custom error message for undefined routes.

---

🏗️ Technologies Used

• React.js
• React Router
• Framer Motion
• Firebase Authentication
• TailwindCSS
• React Datepicker
• SweetAlert2
• Axios

---

🎯 Core Functionalities

🔑 User Authentication

• Email/password-based authentication.
• Google login integration.

📌 Lost & Found Items Management

• Add, update, and delete lost and found items.
• View item details and mark items as recovered.

🔍 Search & Filtering

• Users can search for items by title or location.

🎨 UI/UX Enhancements

• Smooth animations powered by Framer Motion.
• SweetAlert2 toast notifications for user actions.

🚧 Error Handling

• Custom 404 Not Found page for invalid routes.

---

📄 Pages Overview

1. Home Page: Displays a slider and latest posts.
2. Add Lost & Found Items: Private route to submit new lost/found items.
3. Manage My Items: Users can view and manage their own submissions.
4. Lost & Found Items: Browse all lost and found items with search functionality.
5. All Recovered Items: View items marked as recovered.
6. Update Items: Edit details of existing lost or found items.

---

🔧 Environment Variables

To run the project locally, set up the following environment variables in a .env file:

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

---

⚡ Running the Project Locally

🛠 Prerequisites

• Node.js must be installed.

🚀 Installation Steps

1️⃣ Clone the repository:

git clone https://github.com/yourusername/whereisit-client.git

2️⃣ Navigate to the project directory:

cd whereisit-client

3️⃣ Install dependencies:

npm install

4️⃣ Create a .env file and add Firebase configuration.

5️⃣ Start the development server:

npm start

---

📌 Commit History (Meaningful Commits)

1. Initial Setup ✅
2. Added Footer ✅
3. Created New Page ✅
4. Added All Items Page ✅
5. Implemented Details Page ✅
6. Connected Details Page to Server ✅
7. Added My Items Page ✅
8. Created Update Page ✅
9. Added Recent Items Section ✅
10. Implemented Status Change Function ✅
11. Enhanced UI Components ✅
12. Integrated Framer Motion ✅
13. Added Favicon and Dynamic Title ✅
14. Deployed Application ✅
15. Updated Local Host URL ✅

---

🙌 Acknowledgments

Special thanks to the WhereIsIt Team for the opportunity to contribute to this project. 🚀