Surplus logo
Surplus Docsby Sharing Excess
The Stack

Web client

apps/client is the browser app that staff, drivers, and partners use. It's a Vite single-page application built with React 19.

Stack

  • Vite 7 for the build and dev server (port 3000).
  • React 19 with the TanStack suite — Router for navigation, Query for server state, Store for local and form state.
  • Tailwind CSS v4 with shadcn-style components over Base UI.
  • Mapbox for route planning and the impact map.
  • dnd-kit for drag-and-drop (for example, ordering route stops).
  • ORPC client for all API calls, wrapped in TanStack Query utilities.
  • Sentry (@sentry/react) for client-side error monitoring in staging and production.

Layout

apps/client/src/
  main.tsx            — app entry; mounts the router
  routes/             — file-based routes (TanStack Router)
    _authenticated.tsx  — auth + role guard for protected routes
    .../-helpers/        — route-local components and hooks
  components/         — shared UI components
  helpers/            — orpc client, api base URL, and other app glue
  lib/                — utilities (Sentry init, color schemes, …)
  env.ts              — build-time VITE_* configuration

The imports map in package.json aliases #/* to ./src/*, so you'll see imports like import { orpc } from '#/helpers/orpc'.

Scripts

cd apps/client

bun run dev       # Vite dev server on port 3000
bun run build     # production build
bun run preview   # serve the production build locally
bun run test      # component/unit tests (Vitest)
bun run env-check # validate VITE_* configuration

Configuration

Client configuration is build-time and prefixed VITE_, validated in apps/client/src/env.ts. On localhost the client automatically targets the API at http://localhost:8080; in hosted environments the base URL is derived from the deployment.

How it's organized

For how routing, data fetching, state, and UI fit together, see Frontend architecture. For naming, element IDs, and styling rules, see Conventions.

Deployment

The client builds into a static bundle via apps/client/Dockerfile and deploys to Railway (two replicas in production). See Build and deploy.