Skip to content

Angular 18 frontend for a Delivery Management System—users create and track orders, couriers update statuses, and admins manage assignments via a responsive SPA that talks to a REST API.

Notifications You must be signed in to change notification settings

omarmahgoubb/packageTrackingSystem_Frontend

Repository files navigation

🌐 Frontend - Delivery Management System

📖 Overview

Welcome to the Frontend for the Delivery Management System 🚚📦!
This is a modern, interactive web interface built with Angular to allow users, couriers, and admins to manage deliveries.

  • 👤 Users can register, log in, create orders, and track their deliveries.
  • 🚛 Couriers can view assigned orders and update delivery status.
  • 🛡️ Admins can monitor all orders and assign deliveries to couriers.

This frontend communicates with the backend REST API and provides a smooth user experience.


🚀 Features

✅ User Features

  • 📝 User Registration: Sign up with Name, Email, Phone, and Password.
  • 🔐 User Login: Secure authentication to access account.
  • 📦 Create Order: Enter pickup/drop-off locations, package details, and delivery time.
  • 📋 My Orders: View a list of orders with their current status.
  • 🔎 Order Details: See full details of an order and cancel if it's pending.

🚚 Courier Features

  • 📥 View Assigned Orders: See orders assigned to the courier.
  • 🔄 Accept/Decline Orders: Choose to accept or reject deliveries.
  • 🚦 Update Order Status: Update status to Picked Up, In Transit, or Delivered.

🛡️ Admin Features

  • 📊 Manage All Orders: View and update all orders in a central dashboard.
  • ✍️ Update Order Status: Change status of any order.
  • 🗑️ Delete Orders: Remove orders if necessary.
  • 📌 Assign/Reassign Orders: Manage couriers and reassign orders.

📚 Tech Stack

🛠️ Technology 📋 Description
🌟 Angular 18.2.10 Frontend framework
🎨 SCSS/CSS Styling for UI/UX
🔗 TypeScript Strongly typed JavaScript
🔥 Angular Router Navigation between pages
📡 HTTP Client Communicates with backend REST API
Bootstrap/Material UI UI components

🛠️ Development Setup

📌 Prerequisites

  • Node.js (Latest LTS)
  • Angular CLI (npm install -g @angular/cli)

📌 Install Dependencies

npm install
📌 Start Development Server
ng serve
Navigate to: http://localhost:4200/
The application automatically reloads if you change any source files.

About

Angular 18 frontend for a Delivery Management System—users create and track orders, couriers update statuses, and admins manage assignments via a responsive SPA that talks to a REST API.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •