Skip to content
UT Studio
LogisticsNewPreview only

Parcel

Shipment tracking and delivery operations, from public tracking to the operations desk

Preview only — not yet on sale.

Pro licence · what that covers

Latest version
1.0.0
Updated
Difficulty
Advanced
Licence
Pro
Parcel logistics homepage with an inline shipment tracking entry point
Homepage1 of 5

Parcel screens

Homepage1 / 5

Parcel logistics homepage with an inline shipment tracking entry point

Parcel logistics homepage with an inline shipment tracking entry point

At a glance

Type
Logistics
Best for
Logistics operations · Admin dashboard
Stack
TypeScript · Next.js · Tailwind CSS
Screens shown
5Captured from the live preview
Tracking stages
7Every scan, always visible
Service levels
5Express to freight
Network
5 regionsAcross ten facilities
Licence
Pro · 1 developer12 months of updates
Availability
PreviewLive preview open now

Built for

What this template is for. Each one is a filter in the catalogue, so the products beside it solve the same problem.

Overview

Parcel covers both halves of a delivery business: the tracking page a recipient opens on a phone, and the workspace the people moving the boxes live in. One shipment model serves both, so a scan becomes a route, a route becomes a status, and the status explains itself in language a customer can read. Seven stages, five service levels and a coverage network are modelled rather than illustrated.

What's inside

  • Public tracking

    A tracking number becomes a readable answer: seven stages, a route drawn from scans, and a status line without jargon.

  • Operations desk

    The workspace the people moving the boxes live in — volumes, exceptions and delivery performance in one view.

  • Shipment records

    One shipment model serving both audiences, filterable down to the consignment that is going wrong.

Explore the experience

Every screen below is the deployed template, captured from its own live preview.

  1. 01

    Public tracking

    A tracking number becomes a readable answer: seven stages, a route drawn from scans, and a status line without jargon.

    • Seven-stage progress
    • Route from scan history
    • Proof of delivery
    Parcel public tracking view showing a shipment's seven-stage progress
    Shipment tracking
  2. 02

    Operations desk

    The workspace the people moving the boxes live in — volumes, exceptions and delivery performance in one view.

    • Exception handling
    • Dispatch overview
    • Performance charts
    Parcel operations dashboard with shipment volumes, exceptions and delivery performance
    Operations dashboard
  3. 03

    Shipment records

    One shipment model serving both audiences, filterable down to the consignment that is going wrong.

    • Filterable table
    • Status at a glance
    Parcel shipment list showing a filterable table of consignments and their status
    Shipment list

What's included

  • The full source archive, with the first release
  • 12 months of updates, kept permanently
  • 1 developer — commercial use, including client work
  • Deployment guides for 3 targets
  • Email support for the length of your update window
  • Redistribution as your own product

Every line above is read from this product’s own licence and release record rather than written beside it, so it cannot promise something the release does not contain.

Architecture

One shipment model, two audiences

Scans are the only source of truth. Route, status and proof of delivery are all projections of the scan history, which is why the public page and the operations dashboard can never disagree about where something is. The data layer is deliberately replaceable — a carrier API drops in where the demo fixtures are.

Architecture
Scan ──▶ Shipment ──┬──▶ Public tracking (recipient)
                     ├──▶ Route view
                     └──▶ Operations desk (dispatch, exceptions)

Tech stack

Built with

What the product is implemented in.

Requires

What you must already have. These block installation.

Folder structure

Folder structure
parcel/
├── app/
│   ├── page.tsx
│   ├── tracking/[code]/page.tsx
│   ├── shipments/page.tsx
│   ├── dashboard/page.tsx
│   ├── analytics/page.tsx
│   └── coverage/page.tsx
├── components/
└── content/

Requirements

Node.js
≥ 22.12LTS or current
Package manager
pnpm ≥ 10npm and yarn also work
Operating system
macOS, Linux, Windows (WSL2)

Installation

  1. Unpack the download

    The archive contains the full source. There is no installer and no post-install script.

    bash
    unzip parcel.zip
    cd parcel
  2. Install dependencies

    bash
    pnpm install
  3. Configure the environment

    Copy the example file and fill in the variables listed under Environment variables.

    bash
    cp .env.example .env

Quick start

  1. Start the development server

    bash
    pnpm dev
  2. Verify the install

    Runs formatting, lint, type-check, tests and a production build.

    bash
    pnpm check

Environment variables

Environment variables
VariableRequiredDescription
DATABASE_URLRequiredPostgreSQL connection string. Use a pooled endpoint in serverless environments.postgresql://user:pass@localhost:5432/app
NEXT_PUBLIC_APP_URLRequiredAbsolute origin of the deployment. Used for canonical URLs and metadata.https://app.example.com
LOG_LEVELOptionaldebug | info | warn | error. Defaults to info in production.

Configuration

    Deployment

    • Vercel

      Zero-config. Set the environment variables listed above and connect the repository.

    • Docker

      A multi-stage Dockerfile is included, producing a standalone image with no build toolchain.

    • Any Node host

      Builds to a standard Node server. Nothing depends on a platform-specific runtime.

    Compatibility

    Framework and runtime versions this product supports
    TechnologyVersionsStatus
    Next.js≥ 15Supported

    What changed in 1.0.0

    Initial commercial release

    • addedInitial commercial release

    Version history

    1. 1.0.0

      Initial commercial release

      • addedInitial commercial release

    Documentation

    Documentation ships with the first release.

    Support

    Frequently asked questions

    Further reading

    Documentation and guides that use this template as their example.