About this demo
What this demo shows
Trackhaven is a fictional product. WebCRG built it to show what its React and Next.js development service delivers, in a form you can click through. The orders, customers and figures are sample data.
Service promises and where the demo shows them
The promise
Fast pages that are easy for search engines to read
Every marketing page — home, features, each blog post — is built as ready-made HTML when the site is built, with its own title and description. There is nothing to wait for on a server.
The promise
A web application, not just a website
The dashboard is a working application: an overview with charts, an order list with search, filters, sorting and paging, order detail pages with a delivery timeline, and a settings form.
The promise
A frontend that is easy to change
One table component serves both Orders and Customers; one set of design tokens drives every colour in light and dark mode; filtering, sorting and paging are small tested functions shared by every list.
The promise
Connected to the APIs your business relies on
The dashboard reads its data through a typed API client, with loading and error states. Here the API is a set of JSON files generated at build time; pointing the client at a live API would not change the screens.
The promise
Works well on phones, tablets and desktops
Every page adapts down to a small phone, supports light and dark mode, and can be used with a keyboard and a screen reader.
How it is built
- Next.js with the App Router, exported as static files
- React Server Components for the marketing pages; Client Components for the interactive dashboard
- TypeScript in strict mode, with typed data and API contracts
- CSS Modules and CSS custom properties — no UI framework
- Charts drawn as SVG by hand — no chart library
- Unit tests with Vitest for filtering, sorting, paging and form validation
Want something like this?
WebCRG is a remote-first web engineering company. Read about the React and Next.js development service, or tell WebCRG about your project.