Corvo Freight
A signed-in portal where each customer tracks shipments, downloads invoices and books collections, read live from the systems behind it.
A fictional road and sea freight company · Next.js 16 App Router
The brief.
Written for this demo, the way briefs reach us. Corvo Freight is a fictional company.
Customers phone and email their account manager for everything: where a shipment is, a copy of an invoice, a proof of delivery, a new collection. Our team spends the day answering the same questions from three systems. We want one place where each customer signs in and finds it themselves, read live from our transport and finance systems rather than copied into another database.
- 01Self-service for the five requests customers make most.
- 02Each customer sees only their own records, with roles for their own team.
- 03Data read from the transport and finance systems, and every request created there.
The pages and journeys in the build.
- [01]Sign-in with a second stepEmail and password, then a one-time code, with single sign-on for larger customers and a reset link for a forgotten password.
- [02]DashboardWhat is moving, what needs attention and what is due on one screen, with a live map of the account's shipments.
- [03]Shipment trackingEvery shipment with its route, milestones, cargo, parties and documents. Searchable, filterable and exportable to CSV.
- [04]Invoices and statementsPaid, due and overdue, each one downloadable as a PDF, a statement of account, and card payment for open invoices.
- [05]Book a collectionAddresses, date, service level and cargo in, a live price out, and the new shipment at the top of the list.
- [06]Support, team and settingsCases raised against a shipment with a conversation each, team members invited with a role, and saved addresses and alerts.
How it works underneath.
- 01A real sessionSigning in sets a signed, httpOnly session cookie. The proxy checks it before any portal page is served, and the server checks it again before rendering.
- 02Read live, not copiedShipments and invoices come from one data layer standing in for the transport and finance systems, filtered to the signed-in customer.
- 03Requests checked on the serverBookings, payments, cases and team changes each go to a route handler that validates them before they count.
- 04Prices worked out twiceThe booking form prices live with the tariff, and the server prices again before confirming, so the price shown is the price agreed.
- 05Documents made on requestCMR notes, bills of lading, signed proofs of delivery, invoices and statements are made as PDFs in the browser when asked for.
- 06Search from anywhereA command bar, opened with Cmd K or Ctrl K, finds shipments, invoices and pages, and runs common actions.
The decisions, and the reason for each.
- 01Five requests firstTracking, documents, invoices, collections and issues cover most of what customers phone about.
- 02Roles on the customer's sideThe customer decides who in their team sees invoices and who books collections.
- 03Read liveData copied into a portal is out of date the moment it lands. Reading it live keeps one version of the truth.
- 04Card numbers stay in the browserThe card is checked on the page and only its brand and last four digits reach the server.
- 05Built for daily useDense tables, keyboard shortcuts, a command bar and a dark mode, because operations teams have it open all day.
Where each part sends what a visitor did.
The parts the X-ray marks inside the demo. Open the demo notes on any page and choose X-ray to see them in place.
- 1Sign inChecks the account, then asks for a one-time code before a signed session cookie is set.// AccountsOn Sign in →
- 2ShipmentsRead from the transport system for this customer's account only, then searched, sorted and exported in the browser.// Transport systemOn Shipments →
- 3DocumentsEach document, the signed proof of delivery included, is made as a PDF from the shipment's record when asked for.// DocumentsOn a delivered shipment →
- 4InvoicesRead from the finance system. Each PDF is made on request, and open invoices can be paid by card.// Finance systemOn Invoices →
- 5Book collectionPriced again on the server, then created in the transport system and added to the top of the shipments list.// Transport systemOn Book a collection →
- 6New caseCreates a case in the help desk, routed by its category, and tells the account manager.// Help deskOn New support case →
- 7Cookie choiceDecides whether usage is measured. The portal works the same either way.// ConsentOn every page →
Three things to do in the demo.
Built with Next.js 16 App Router, Proxy session check, React 19, TypeScript, Tailwind CSS 4, Motion, Zod on the server, PDFs in the browser.
Let's talk about what you are building.
A discovery session maps where visitors drop out and which systems the site should feed.