Atlas Portal
A customer portal in Next.js 15: server components stream the dashboard, invoices and tickets have their own routes, and the data layer is typed route handlers and server modules. The production build is exported static and served as the demo.
A portal that is mostly server work.
A customer portal is read-heavy: dashboards, invoice lists, ticket threads, account settings. The interesting engineering is not the chrome, it is where the data is fetched, how much ships to the browser, and what happens on a slow connection.
The sample is built to show the Next.js answer to that: server components for reads, route handlers for mutations, and a static export so the whole thing can be inspected on GitHub Pages without a server.
Server first, client only where it pays.
- Dashboard rendered as a server component with metrics computed on the server.
- Invoices list and detail routes, with typed access through lib/ data modules.
- Support tickets with a reply thread, using route handlers for the write path.
- Account settings with a session mock and a shared layout.
- Static export with relative asset paths, so the demo runs from a plain file server.
How it is put together
app/ ├─ layout.tsx, page.tsx (dashboard, server component) ├─ invoices/ (list, detail) ├─ tickets/ (list, thread) ├─ settings/ └─ api/ route handlers (typed JSON) lib/ typed data access and formatting test/ node:test on the data and formatting layer out/ static export, copied to demo/
Stack
Security and money
- Reads happen on the server; only the components that need interaction are client components.
- Route handlers validate input and return typed payloads, so the client never assembles business objects.
- The static export is a real build artifact, not a mock; the demo is that artifact with relative paths.
- Tests cover the data and formatting modules, the parts most likely to drift between server and client.
Product surfaces
Building something in this category?
We can walk you through the architecture, the payment integration and the failure cases on a call, including the parts that were hard.