https://github.com/khalid9080/whereisit
WhereItIs is a platform designed to help you easily find lost items and reconnect with your belongings. Whether you've misplaced something small or lost a precious item, the goal is to make the process of finding what matters to you simpler and more effective.
https://github.com/khalid9080/whereisit
axios-react daisyui dynamic-routing expess-js firebase-auth html5 javascript mongodb nodejs reactjs taillwindcss tanstack-query
Last synced: about 2 months ago
JSON representation
WhereItIs is a platform designed to help you easily find lost items and reconnect with your belongings. Whether you've misplaced something small or lost a precious item, the goal is to make the process of finding what matters to you simpler and more effective.
- Host: GitHub
- URL: https://github.com/khalid9080/whereisit
- Owner: Khalid9080
- Created: 2025-03-11T17:17:03.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-11T17:20:27.000Z (about 2 months ago)
- Last Synced: 2025-03-11T18:28:08.747Z (about 2 months ago)
- Topics: axios-react, daisyui, dynamic-routing, expess-js, firebase-auth, html5, javascript, mongodb, nodejs, reactjs, taillwindcss, tanstack-query
- Language: JavaScript
- Homepage: https://whereisit-697aa.web.app/
- Size: 15.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WhereItIs 🚀
Losing an item can be stressful, but with our advanced search tools, you can quickly browse through thousands of reported lost items. Our intuitive search feature allows you to filter by item category, location, and even the date you lost it. The more details you provide, the higher your chances of finding your missing belongings.
## Live URL 🌐
You can check out the live version of this project at:
[WhereItIs - Live](https://whereisit-697aa.web.app)
## Purpose 🎯
WhereItIs is a platform designed to help you easily find lost items and reconnect with your belongings. Whether you've misplaced something small or lost a precious item, the goal is to make the process of finding what matters to you simpler and more effective.
## Key Features ✨
- **User Authentication**: Login and manage your lost and found items. 🔐
- **Item Listing**: View a list of all your lost and found items with detailed information. 📋
- **CRUD Operations**: Update and delete items easily. ✏️❌
- **SweetAlert Integration**: Displays confirmation alerts for actions like item deletion. 🛑
- **Date Formatting**: Dates are displayed in a user-friendly format. 📅
- **Icons**: Use of icons like update and delete from React Icons. 🔄🗑️
## Technologies Used 🛠️
- **React**: For building the user interface. ⚛️
- **Vite**: For fast development and bundling. ⚡
- **React Router**: For routing between pages. 🚦
- **Axios**: To handle HTTP requests. 🌐
- **SweetAlert2**: For better alert notifications. ⚠️
- **Date-fns**: For formatting dates. 🗓️
- **React Icons**: For adding icons like update and delete. 🔲
- **TailwindCSS**: For styling the application. 💅
## NPM Packages Used 📦
- **react**: The core React library. ⚛️
- **react-router-dom**: For routing and navigation. 🛤️
- **axios**: For HTTP requests. 🌍
- **sweetalert2**: For alert dialogues. ⚡
- **date-fns**: For date utilities. 📅
- **react-icons**: For icon components. 🔲
- **vite**: For fast build tools and server setup. ⚡
- **tailwindcss**: For utility-first CSS styling. 💅
## Functionality ⚙️
- **User Authentication**: Users can log in to manage their own lost and found items. 🔑
- **CRUD Operations**: Add, update, and delete items, each with fields like:
- Title ✍️
- Type (Lost or Found) 🔍
- Category 📁
- Location 📍
- Description 📝
- Date Added 📅
- **Deletion Confirmation**: A SweetAlert popup appears to confirm deletion actions. ⚠️
## How to Use 💻
1. **View Items**: After logging in, users can view their lost and found items. 👀
2. **Update Items**: Items can be updated by clicking the update button. ✏️
3. **Delete Items**: Deletion of items is confirmed via a SweetAlert prompt to avoid mistakes. 🗑️
## Installation and Setup ⚙️
1. Clone the repository:
```bash
git clone https://github.com/your-username/whereisit.git
cd whereisit
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev