How to Write a Web App for Freight Forward Service Booking

Introduction

The freight forwarding industry is becoming increasingly digital. Traditionally, customers contacted freight forwarders by email or phone to request shipping quotations, compare schedules, submit shipping instructions, exchange documents, and track cargo.

A modern freight forwarding booking web application can bring these activities into one platform.

Such an application can allow customers to:

• Create an account

• Request freight quotations

• Select origin and destination

• Choose sea, air, road, or multimodal transport

• Enter cargo information

• Compare available services

• Book shipments

• Upload documents

• Make payments

• Track shipment status

• Communicate with the freight forwarder

• Download invoices and shipping documents

For the freight forwarder, the system can provide centralized management of customers, quotations, bookings, shipments, carriers, containers, documents, invoices, and operational tasks.

This article explains how to design and build such a web application from scratch.

1. Understand the Freight Forwarding Business Process

Before writing any code, understand the actual logistics workflow.

A simplified freight-forwarding process looks like this:

Customer
   ↓
Request Quotation
   ↓
Rate Calculation
   ↓
Quotation
   ↓
Customer Accepts
   ↓
Booking
   ↓
Carrier / Shipping Line / Airline
   ↓
Cargo Pickup
   ↓
Origin Handling
   ↓
Transportation
   ↓
Destination Handling
   ↓
Delivery
   ↓
Invoice & Payment
   ↓
Shipment Completed

A web application should reflect this business process rather than simply providing a generic booking form.

2. Define the Main Users

A freight forwarding platform normally has several types of users.

Customer

Customers should be able to:

• Register and log in

• Manage company information

• Create shipment requests

• Request quotations

• Review quotations

• Confirm bookings

• Upload documents

• Track shipments

• View invoices

• Make payments

• Contact customer service

Freight Forwarder

Operations staff may need to:

• Review booking requests

• Prepare quotations

• Manage shipping rates

• Confirm bookings

• Assign carriers

• Manage containers

• Manage documentation

• Update shipment milestones

• Issue invoices

• Monitor outstanding payments

Administrator

The administrator manages:

• Users

• Customer companies

• Employees

• Ports

• Airports

• Carriers

• Shipping routes

• Service types

• Pricing

• Currency

• Tax

• System configuration

Carrier

In a more advanced platform, carriers can have their own portal.

They could receive:

• Booking requests

• Container information

• Cargo information

• Pickup instructions

• Shipping instructions

3. Core Modules of the Web Application

A professional freight-forwarding application can be divided into several modules.

                    FREIGHT FORWARDING APP
                              │
       ┌──────────────────────┼──────────────────────┐
       │                      │                      │
   CUSTOMER                OPERATIONS             ADMIN
       │                      │                      │
   Account                Quotations              Users
   Booking                Bookings                Rates
   Documents              Shipments               Ports
   Tracking               Containers              Carriers
   Payment                Documents               Settings

The most important modules are described below.

4. Customer Registration and Login

The first component is user authentication.

A customer could register using:

• Email

• Password

• Company name

• Contact person

• Telephone number

• Country

• Address

• Tax/VAT registration number

The database could contain a users table:

users
----------------
id
company_id
name
email
password_hash
role
phone
status
created_at

Passwords should never be stored as plain text.

Use secure password hashing such as:

• Argon2

• bcrypt

You can also support:

• Google login

• Microsoft login

• Two-factor authentication

• Email verification

• Password reset

5. Company Management

A freight-forwarding system should normally separate users from companies.

For example:

Company A
   │
   ├── Finance Manager
   ├── Logistics Manager
   ├── Procurement Manager
   └── Staff

A companies table could contain:

companies
----------------
id
legal_name
registration_number
tax_number
address
country
currency
credit_limit
status
created_at

This allows several employees from the same company to access the same shipment portfolio.

6. Build the Freight Quotation System

Quotation management is one of the most important parts of the application.

A customer might enter:

Origin

Ho Chi Minh City

Destination

London

Mode

Sea Freight

Container

1 × 40HC

Cargo

Electronics

The application can then calculate an estimated freight price.

A quotation might contain:

Cost	Amount
Ocean Freight	$1,200
Origin Handling	$180
Documentation	$50
Customs Clearance	$150
Destination Charges	$250
Delivery	$300
Total	$2,130

The quotation engine should ideally separate cost from selling price.

For example:

Carrier Cost
      ↓
Origin Cost
      ↓
Destination Cost
      ↓
Other Costs
      ↓
Total Cost
      ↓
+ Margin
      ↓
Customer Selling Price

This becomes particularly important when building a professional freight-forwarding system.

7. Design a Freight Rate Engine

A simple application can store fixed rates.

For example:

Origin: Ho Chi Minh
Destination: London
Mode: Sea
Container: 40HC
Rate: USD 1,200

But a professional system needs a much more sophisticated rate engine.

Rates may depend on:

• Origin

• Destination

• Port

• Carrier

• Container type

• Cargo type

• Weight

• Volume

• Incoterm

• Sailing date

• Fuel surcharge

• Peak season surcharge

• Security surcharge

• Currency

• Customer contract

• Validity period

A rate table could look like:

freight_rates
------------------------
id
carrier_id
origin_port
destination_port
transport_mode
container_type
base_rate
currency
valid_from
valid_to
status

The application then selects the appropriate rate based on the customer's booking request.

8. Support Different Transport Modes

A good freight-forwarding application should not be restricted to ocean freight.

You can support:

Sea Freight

• FCL

• LCL

• Container type

• Vessel

• Voyage

• Port of loading

• Port of discharge

Air Freight

• Airport

• Chargeable weight

• Airline

• Flight number

• Air waybill

Road Freight

• Pickup location

• Delivery location

• Truck type

• Distance

• Weight

Rail Freight

• Origin terminal

• Destination terminal

• Train

• Wagon/container

Multimodal

For example:

Factory
   ↓
Truck
   ↓
Port
   ↓
Ocean Vessel
   ↓
Destination Port
   ↓
Truck
   ↓
Customer Warehouse

9. Create the Booking Module

Once a customer accepts a quotation, the application should allow them to convert the quotation into a booking.

For example:

Quotation
    │
    │ Accept
    ↓
Booking
    │
    ├── Cargo
    ├── Container
    ├── Origin
    ├── Destination
    ├── Carrier
    ├── Sailing Date
    └── Customer

A bookings table might contain:

bookings
----------------------
id
booking_number
customer_id
quotation_id
origin
destination
transport_mode
carrier_id
requested_departure
status
created_at

Possible booking statuses include:

Draft
↓
Requested
↓
Under Review
↓
Confirmed
↓
Cargo Received
↓
In Transit
↓
Arrived
↓
Delivered
↓
Completed

10. Shipment Tracking

Tracking is one of the most valuable features for customers.

Instead of simply showing:

Shipment in transit

the application should show a timeline.

Booking Confirmed       ✓
        ↓
Container Picked Up     ✓
        ↓
Cargo Received          ✓
        ↓
Loaded on Vessel        ✓
        ↓
Vessel Departed         ✓
        ↓
Transshipment           ✓
        ↓
Vessel Arrived          ○
        ↓
Customs Clearance       ○
        ↓
Delivered               ○

The backend could store shipment milestones:

shipment_events
------------------------
id
shipment_id
event_type
event_time
location
description
created_by

11. Container Management

For ocean freight, container management can become an important module.

A container record could contain:

container_number
container_type
seal_number
booking_number
gross_weight
tare_weight
status
pickup_date
return_date

Example:

MSCU1234567
40HC
Seal: ABC123456
Gross Weight: 18,500 KG

The system can also monitor:

• Container pickup

• Empty return

• Gate-in

• Gate-out

• Demurrage

• Detention

12. Document Management

Freight forwarding involves many documents.

The application should provide secure document storage.

Examples include:

• Commercial Invoice

• Packing List

• Bill of Lading

• Sea Waybill

• Air Waybill

• Certificate of Origin

• Customs Declaration

• Insurance Certificate

• Delivery Order

• Shipping Instructions

The user could see:

BOOKING BK202610001

Documents
────────────────────────
✓ Commercial Invoice
✓ Packing List
✓ Shipping Instruction
✓ Bill of Lading
○ Certificate of Origin
○ Customs Declaration

Documents should be stored securely rather than directly exposing files through public URLs.

13. Payment and Invoicing

A freight-forwarding platform can also integrate billing.

The system could generate:

Invoice
-------------------------
Freight              $1,200
Origin Handling       $180
Documentation          $50
Customs               $150
Delivery              $300
-------------------------
Subtotal            $1,880
Tax                   $188
-------------------------
Total               $2,068

Payment statuses could be:

Unpaid
Partially Paid
Paid
Overdue
Cancelled

Payment gateways could potentially be integrated for online payments.

However, for B2B freight forwarding, many customers may continue using:

• Bank transfer

• Credit terms

• Corporate payment

• Monthly settlement

Therefore, the system should support both online payment and traditional accounts receivable processes.

14. Database Architecture

A relational database is generally a good choice because freight forwarding involves highly structured relationships.

A simplified database might look like this:

users
  │
  └── companies

companies
  │
  ├── quotations
  │       │
  │       └── bookings
  │               │
  │               └── shipments
  │                       │
  │                       ├── containers
  │                       ├── documents
  │                       └── events
  │
  └── invoices

Important tables could include:

users
companies
customers
carriers
ports
airports
routes
freight_rates
quotations
quotation_items
bookings
shipments
containers
shipment_events
documents
invoices
invoice_items
payments
notifications

15. Recommended Technology Stack

There are many ways to build the application.

One modern architecture could use:

Frontend

Next.js + React + TypeScript

Advantages include:

• Modern web architecture

• Server-side rendering

• Good developer ecosystem

• Reusable components

• Good performance

• Easy API integration

Backend

You could use:

• Node.js

• NestJS

• Python FastAPI

• Django

• Java Spring Boot

• .NET

For a JavaScript/TypeScript team, a possible architecture is:

Next.js
   ↓
REST API / GraphQL
   ↓
Node.js / NestJS
   ↓
PostgreSQL

Database

PostgreSQL is an excellent choice for the transactional database.

File Storage

Documents can be stored using:

• Amazon S3

• Azure Blob Storage

• Google Cloud Storage

• Supabase Storage

Authentication

Possible options include:

• Auth.js

• Supabase Auth

• Auth0

• Keycloak

• Custom authentication

16. Example Application Architecture

A production system could look like this:

                  WEB / MOBILE
                       │
                       ▼
                ┌─────────────┐
                │   Next.js   │
                │   Frontend  │
                └──────┬──────┘
                       │
                 API Gateway
                       │
          ┌────────────┼────────────┐
          ▼            ▼            ▼
     Booking       Pricing       Tracking
      Service       Service       Service
          │            │            │
          └────────────┼────────────┘
                       ▼
                 PostgreSQL
                       │
          ┌────────────┼────────────┐
          ▼            ▼            ▼
       Storage       Payment      Email/SMS

For a small company, you do not necessarily need microservices from day one.

A modular monolith can be much easier to build and maintain initially.

17. API Design

The frontend should communicate with the backend through APIs.

Examples:

POST /api/auth/login
POST /api/quotations
GET /api/quotations/:id
POST /api/bookings
GET /api/bookings/:id
GET /api/shipments/:id
POST /api/documents
GET /api/invoices/:id
POST /api/payments

For example:

const response = await fetch("/api/bookings", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(bookingData)
});

The backend validates the request before creating the booking.

18. Booking Form Example

A booking screen could contain:

CREATE BOOKING

Transport Mode
[ Sea Freight ▼ ]

Origin
[ Ho Chi Minh City ]

Destination
[ London ]

Cargo Type
[ Electronics ]

Container
[ 40HC ▼ ]

Quantity
[ 2 ]

Gross Weight
[ 18,500 KG ]

Volume
[ 56 CBM ]

Incoterm
[ FOB ▼ ]

Preferred Departure
[ 25/10/2026 ]

Special Instructions
[________________________]

        [ REQUEST BOOKING ]

The system should validate the data before submitting the booking.

For example:

IF mode = SEA
    require port
    require container type
    require cargo weight

IF mode = AIR
    require airport
    require chargeable weight

19. Notification System

Notifications are critical because logistics transactions are time-sensitive.

The system could send notifications when:

• Quotation is created

• Quotation is expiring

• Booking is confirmed

• Booking is rejected

• Container is ready

• Vessel departs

• Shipment arrives

• Documents are uploaded

• Invoice is issued

• Payment is overdue

Notifications could be delivered through:

Web Notification
       +
Email
       +
SMS
       +
WhatsApp

20. Integration With Shipping and Logistics APIs

A more advanced application can integrate external logistics systems.

For example:

Your Web App
     │
     ├── Carrier API
     ├── Shipping Schedule API
     ├── Tracking API
     ├── Port Data
     ├── Customs System
     ├── Payment Gateway
     └── Accounting System

This allows the application to automatically retrieve:

• Vessel schedules

• Flight schedules

• Shipment status

• Container events

• Tracking information

• Freight rates

However, API availability and commercial licensing should be checked for each carrier or data provider.

21. Accounting Integration

For a professional freight-forwarding platform, accounting integration can provide significant value.

The booking system could generate financial transactions such as:

Booking
   ↓
Estimated Cost
   ↓
Actual Cost
   ↓
Customer Revenue
   ↓
Gross Profit

The system could calculate:

Gross Profit

Revenue – Direct Freight Costs = Gross Profit

For example:

Customer Revenue       $3,000
Carrier Cost            $1,800
Origin Cost               $300
Destination Cost          $400
--------------------------------
Gross Profit              $500

This allows management to monitor profitability by:

• Customer

• Shipment

• Route

• Carrier

• Country

• Salesperson

• Transport mode

22. Security

Because the application contains commercial and potentially sensitive information, security should be designed from the beginning.

Important controls include:

Authentication

Use secure authentication and password hashing.

Authorization

Do not assume that a logged-in user can access every shipment.

For example:

Customer A
   ↓
Can access Customer A shipments

Customer B
   ↓
Cannot access Customer A shipments

Encryption

Use HTTPS/TLS for communication.

Sensitive data should be encrypted where appropriate.

File Security

Uploaded documents should be protected against:

• Malicious files

• Unauthorized access

• Public exposure

• Path traversal

• File-type spoofing

Audit Log

Maintain records of important actions:

User
Action
Timestamp
IP
Object
Old Value
New Value

For example:

John
Changed booking status
11 Oct 2026 14:25
BK202610001
Requested → Confirmed

23. Admin Dashboard

The administrator should have a dashboard providing a high-level overview.

For example:

FREIGHT OPERATIONS DASHBOARD

Today's Bookings             42
Active Shipments             185
Pending Quotations            27
Containers in Transit         96
Outstanding Invoices       $82,500
Overdue Invoices             $14,200

Charts could show:

• Revenue by month

• Shipment volume

• Gross profit

• Bookings by country

• Shipments by transport mode

• Top customers

• Top routes

• Carrier performance

24. Customer Dashboard

The customer dashboard could be simpler:

MY LOGISTICS

Active Shipments        8
Pending Bookings        3
Pending Quotations      2
Outstanding Invoices    4

Recent Shipments
──────────────────────────
BK202610001   In Transit
BK202610002   Delivered
BK202610003   Booking Confirmed

The dashboard should make the most important logistics information available immediately.

25. Mobile-Friendly Design

Freight forwarding users often work outside an office.

Therefore, the application should be responsive.

A customer should be able to use a smartphone to:

• Approve quotations

• Confirm bookings

• Check shipment status

• Upload documents

• Read notifications

A responsive web application can often be sufficient before investing in separate iOS and Android applications.

26. Development Roadmap

Do not attempt to build the entire platform simultaneously.

A practical development roadmap is:

Phase 1 — MVP

Build:

Registration
Login
Customer Management
Quotation
Booking
Shipment Tracking
Document Upload
Admin Dashboard

Phase 2 — Commercial Features

Add:

Pricing Engine
Invoices
Payments
Notifications
Carrier Management
Container Management

Phase 3 — Automation

Add:

Carrier API
Tracking API
Automated quotations
Automated notifications
Accounting integration
Customs integration

Phase 4 — Advanced Analytics

Add:

Profitability Analytics
Customer Analytics
Carrier Performance
Route Analysis
Cost Analysis
Forecasting

27. Example Project Structure

For a Next.js application, the project could be organized as:

freight-booking/
│
├── app/
│   ├── login/
│   ├── dashboard/
│   ├── quotations/
│   ├── bookings/
│   ├── shipments/
│   ├── invoices/
│   └── documents/
│
├── components/
│   ├── BookingForm.tsx
│   ├── QuoteCard.tsx
│   ├── ShipmentTimeline.tsx
│   └── Dashboard.tsx
│
├── lib/
│   ├── database.ts
│   ├── authentication.ts
│   ├── pricing.ts
│   └── notifications.ts
│
├── api/
│   ├── quotations/
│   ├── bookings/
│   ├── shipments/
│   └── payments/
│
└── database/
    ├── users
    ├── companies
    ├── bookings
    ├── shipments
    └── invoices

28. The Most Important Design Principle

A freight-forwarding application should not be designed simply as an online booking form.

The real objective is to create a digital logistics operating platform.

The complete workflow should eventually look like:

CUSTOMER
   │
   ▼
QUOTE
   │
   ▼
BOOKING
   │
   ▼
CARRIER
   │
   ▼
SHIPMENT
   │
   ├── CONTAINER
   ├── DOCUMENTS
   ├── TRACKING
   └── MILESTONES
   │
   ▼
DELIVERY
   │
   ▼
INVOICE
   │
   ▼
PAYMENT
   │
   ▼
PROFITABILITY

This architecture allows the application to evolve from a simple booking website into a complete freight-forwarding management system.

Conclusion

Building a web application for freight-forwarding service booking requires much more than creating a booking form. The application needs to connect customers, quotations, freight rates, bookings, carriers, shipments, containers, documents, tracking, invoices, and payments into a single workflow.

A good starting technology stack could be:

Frontend
Next.js + React + TypeScript

Backend
Node.js / NestJS

Database
PostgreSQL

File Storage
S3-compatible storage

Authentication
OAuth / Auth.js / Supabase Auth

Infrastructure
AWS / Azure / Google Cloud

The best strategy is to start with an MVP covering quotation → booking → shipment tracking → documents, then progressively introduce pricing automation, carrier integrations, payments, accounting, and advanced analytics.

Ultimately, the most valuable freight-forwarding application is not merely a booking portal. It becomes a digital freight management platform that connects commercial, operational, financial, and customer-service processes in one system.

Resources : Internet