📦 Parcel Delivery Frontend (React + Redux Toolkit + RTK Query)

A secure, scalable, and role-based frontend for a Parcel Delivery System (similar to Pathao Courier or Sundarban). Built with React, TypeScript, Redux Toolkit, RTK Query, and Tailwind CSS, this app provides dashboards for Senders, Receivers, and Admins with seamless API integration.

---

🚀 Live Demo

👉 Client App: https://parcel-delevary-client.vercel.app

---

✨ Features

🌍 Public

• Home, About, Contact
• Parcel Tracking Page
• Fully Responsive UI

🔐 Authentication

• Register (Sender / Receiver)
• JWT-based login
• Role-based redirects
• Persisted sessions
• Logout

📊 Dashboards

Sender

• Create parcel
• Cancel parcel
• Parcel history

Receiver

• View incoming parcels
• Confirm delivery
• Delivery records

Admin

• Manage all parcels
• Manage users (block/unblock)
• Assign delivery personnel (optional)

📦 Parcel Management

• Tracking via unique tracking ID
• Status timeline (status, timestamp, updatedBy, note)

🧰 General

• Role-based navigation
• Global loaders & error handling
• Form validations
• Pagination, sorting, filtering
• Dashboard charts & overview cards
• Toast notifications
• Lazy-loading + skeleton loading

---

🛠 Tech Stack

Frontend

• React.js + TypeScript
• Redux Toolkit
• RTK Query
• React Router v7
• Tailwind CSS

Backend APIs

• Node.js / Express.js
• MongoDB / Mongoose
• JWT Auth + bcrypt

---

📂 Project Structure

src/
├─ assets/          # Images, icons
├─ components/      # Reusable components
├─ constants/       # App-wide constants
├─ hooks/           # Custom hooks
├─ lib/             # Helpers & utilities
├─ pages/           # Page components
├─ provider/        # Context / Provider
├─ redux/           # Slices + RTK Query API
├─ routes/          # Public & protected routes
├─ types/           # TypeScript types
├─ utils/           # Utility functions
├─ App.tsx
├─ main.tsx
├─ index.css

---

⚙️ Setup & Installation

1. Clone the Repository

   git clone https://github.com/nayeem-miah/parcel-delvey-client.git
   cd parcel-delvey-client

2. Install Dependencies

   bun install   # or npm install

3. Configure Environment Variables Create .env:

   VITE_API_BASE_URL=<your_backend_api_url>

4. Run Development Server

   bun dev   # or npm run dev

---

🧪 Demo Test Accounts

Role	Email	Password
Sender	sender@example.com	Pa$$w0rd!
Receiver	receiver@example.com	Pa$$w0rd!
Admin	admin.parcel@gmail.com	Nayeem123$

---

🤝 Contributing

1. Fork the repo

2. Create a feature branch

   git checkout -b feature/your-feature

3. Commit changes

   git commit -m "Add new feature"

4. Push to GitHub

   git push origin feature/your-feature

5. Open a Pull Request

---

📜 License

MIT License © 2025 MD Nayeem Miah