swifParcel is a modern and responsive delivery management website designed to provide users with seamless and efficient parcel services. It offers a robust system for managing deliveries, payments, and user interactions with advanced UI/UX.
🔗 Live Site: https://assignment-12-5d452.web.app
- Frontend: React, React Router, TailwindCSS, React Icons
- Backend: Firebase, Stripe API
- State Management: React Query, React Hook Form
- Libraries: Leaflet, ApexCharts, Axios, SweetAlert2
- Build Tool: Vite
- 📦 Parcel Management: Users can track, send, and receive parcels efficiently.
- 🔐 Authentication: Secure user authentication with Firebase.
- 🗺️ Interactive Maps: Integrated with Leaflet for real-time location tracking.
- 💳 Payments: Stripe API for seamless payment processing.
- 📊 Dashboard: Admin panel with analytics and insights.
- 🎉 Animations & Effects: Engaging UI with React Confetti & SweetAlert.
This project relies on the following dependencies:
"dependencies": {
"@stripe/react-stripe-js": "^3.1.1",
"@stripe/stripe-js": "^5.5.0",
"@tanstack/react-query": "^5.64.0",
"apexcharts": "^4.3.0",
"axios": "^1.7.9",
"firebase": "^11.1.0",
"leaflet": "^1.9.4",
"lucide-react": "^0.471.1",
"react": "^19.0.0-rc.1",
"react-apexcharts": "^1.7.0",
"react-hook-form": "^7.54.2",
"react-icons": "^5.4.0",
"react-leaflet": "^5.0.0",
"react-router-dom": "^7.1.1",
"sweetalert2": "^11.15.10",
"tailwindcss-animate": "^1.0.7"
}Follow these steps to run the project locally:
-
Clone the repository
git clone https://github.com/ummesalma303/swift-parcel-client.git cd choice-master -
Install dependencies
npm install
Create a .env file in the root directory and add the following:
VITE_apiKey=YOUR_FIREBASE_API_KEY
VITE_authDomain=YOUR_FIREBASE_AUTH_DOMAIN
VITE_projectId=YOUR_FIREBASE_PROJECT_ID
VITE_storageBucket=YOUR_FIREBASE_STORAGE_BUCKET
VITE_messagingSenderId=YOUR_FIREBASE_MESSAGING_SENDER_ID
VITE_appId=YOUR_FIREBASE_APP_ID(Replace values with your actual Firebase credentials)
-
Start the development server
npm run dev
-
Build for production
npm run build
-
Preview the build
npm run preview
- Users can sign up, book deliveries, track parcels, and leave reviews.
- Admins can manage users, monitor deliveries, and process payments.
- Secure authentication & authorization is handled via Firebase.
Use the following credentials to log in as an admin:
- Username: mahdiba jahan mahvi
- Email: email@gmail.com
- Password: 123456
Use the following credentials to log in as Delivery Men
- Email: mahira@gmail.com
- Password: 123456