https://github.com/rafirabby13/parcel-delivery-system-frontend
Parcelo streamlines the entire parcel delivery lifecycle with separate interfaces for senders, receivers, delivery personnel, and administrators. The platform provides real-time tracking, automated pricing calculation, secure payment processing, and comprehensive delivery management tools.
https://github.com/rafirabby13/parcel-delivery-system-frontend
hyperui originui reactjs redux-toolkit shadcn-ui tailwindcss typescript zod-validation
Last synced: about 1 month ago
JSON representation
Parcelo streamlines the entire parcel delivery lifecycle with separate interfaces for senders, receivers, delivery personnel, and administrators. The platform provides real-time tracking, automated pricing calculation, secure payment processing, and comprehensive delivery management tools.
- Host: GitHub
- URL: https://github.com/rafirabby13/parcel-delivery-system-frontend
- Owner: rafirabby13
- Created: 2025-08-20T17:42:04.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2026-01-19T15:01:04.000Z (4 months ago)
- Last Synced: 2026-05-02T23:43:49.573Z (about 1 month ago)
- Topics: hyperui, originui, reactjs, redux-toolkit, shadcn-ui, tailwindcss, typescript, zod-validation
- Language: TypeScript
- Homepage: https://parcel-delivery-system-frontend-iota.vercel.app/
- Size: 2.85 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📦 Parcelo - Parcel Delivery Management System
A comprehensive, full-stack parcel delivery and tracking platform designed for modern logistics operations across Bangladesh. Built with React, TypeScript, and a robust backend architecture to handle everything from parcel booking to real-time delivery tracking.
# Live Site
## https://parcel-delivery-system-frontend-iota.vercel.app/
## Features
### 🔐 Authentication & Authorization
- Role-based access control (Sender, Receiver, Delivery Partner, Super Admin)
- Secure JWT authentication
- Password visibility toggle
- Form validation with Zod
### 📋 Parcel Management
- Create Parcel: Comprehensive form with sender/receiver details
- Track Parcel: Public tracking with real-time - status updates
- Status Updates: Delivery partner interface for status management
- Payment Integration: Multiple payment methods (Prepaid, Postpaid, COD)
### 🔒 Security Features
- JWT Authentication with secure token storage
- Role-based Access Control (RBAC)
- Input Validation on client and server
### 📱 Responsive Design
The application is fully responsive and optimized for:
- 📱 Mobile devices (320px+)
- 📱 Tablets (768px+)
- 💻 Desktop (1024px+)
- 🖥️ Large screens (1440px+)
### 🚚 Delivery Operations
- Delivery partner assignment
- Real-time status tracking
- Complete delivery timeline
- Mobile-responsive design for field operations
### 🎨 Modern UI/UX
- Beautiful gradient designs with glassmorphism effects
- Responsive design for all devices
- Dark mode support
- Smooth animations and transitions
- Professional color-coded interfaces
### 🌙 Dark Mode Support
Full dark mode implementation with:
- System preference detection
- Manual toggle option
- Persistent user preference
- Smooth transitions
### 🌍 Bangladesh-Specific Features
- Bangladesh phone number validation (01[3-9]XXXXXXXX)
- Division, city, and area management
- Currency display in BDT (৳)
- Local date/time formatting
## Installation
### 1. Clone the repository
```bash
git clone https://github.com/your-username/parcel-delivery-system.git
cd parcel-delivery-system
```
### 2. Install dependencies
```bash
npm install
# or
yarn install
```
### 3. Environment Setup
```bash
cp .env.example .env.local
VITE_API_BASE_URL=http://localhost:5000/api
VITE_APP_NAME=Parcel Delivery System
```
### 4. Start development server
```bash
npm run dev
# or
yarn dev
```
### 5. Open your browser
```bash
http://localhost:5173
```
## 📁 Project Structure
```
├─ src/
│ ├─ assets/
│ │ ├─ icons/
│ │ ├─ images/
│ │ └─ react.svg
│ ├─ components/
│ │ ├─ layout/
│ │ │ ├─ CommonLayout.tsx
│ │ │ ├─ DashboardLayout.tsx
│ │ │ ├─ Footer.tsx
│ │ │ └─ Navbar.tsx
│ │ ├─ modules/
│ │ │ ├─ admin/
│ │ ├─ ui/
│ ├─ config/
│ │ └─ index.env.ts
│ ├─ constants/
│ │ └─ role.ts
│ ├─ context/
│ ├─ formValidationSchema/
│ │ └─ parcel.schema.ts
│ ├─ hooks/
│ ├─ lib/
│ ├─ pages/
│ │ ├─ admin/
│ │ ├─ receiver/
│ │ ├─ sender/
│ │ └─ VerifyUser.tsx
│ ├─ redux/
│ │ ├─ feature/
│ │ │ ├─ auth/
│ │ │ │ └─ auth.api.ts
│ │ ├─ axiosBaseQuery.ts
│ │ ├─ baseApi.ts
│ │ ├─ hook.ts
│ │ └─ store.ts
│ ├─ routes/
│ ├─ types/
│ ├─ utils/
│ ├─ App.tsx
│ ├─ index.css
│ ├─ main.tsx
```
## Tech Stack
### Frontend
* React 18 : Modern React with hooks
* TypeScript - Type safety and better DX
* Vite - Fast build tool and dev server
* Tailwind CSS - Utility-first CSS framework
* shadcn/ui - High-quality component library
### State Management
* Redux Toolkit - Modern Redux with less boilerplate
* RTK Query - Data fetching and caching
### Form Management
* React Hook Form - Performant forms with easy validation
* Zod - TypeScript-first schema validation
### UI/UX
* Lucide React - Beautiful icon library
* Sonner - Modern toast notifications
* Framer Motion - Smooth animations (optional)
### Development
* ESLint - Code linting
* Prettier - Code formatting
* Husky - Git hooks
* Lint-staged - Run linters on staged files
## 🔧 Available Scripts
To run tests, run the following command
```bash
# Development
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
# Code Quality
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint errors
npm run format # Format code with Prettier
npm run type-check # Run TypeScript compiler
# Testing
npm run test # Run tests
npm run test:watch # Run tests in watch mode
npm run test:coverage # Generate test coverage
```
## 🎨 Component Examples
### Create Parcel Form
```typescript
import { CreateTour } from '@/components/forms/CreateTour'
// Usage
console.log('Parcel created:', parcel)}
className="max-w-4xl mx-auto"
/>
```
### Track Parcel
```typescript
import { TrackParcel } from '@/components/tracking/TrackParcel'
// Usage - Public route, no auth required
```
### Status Update Interface
```typescript
import { UpdateStatus } from '@/components/delivery/UpdateStatus'
// Usage - For delivery partners
```