Introduction

The Web component is the public-facing frontend application for the system. It is built with Next.js, consumes the RawStack API through the shared @rawstack/api-client package, and renders pages through the App Router.

The codebase is a Next.js 16 application that combines server-rendered and client-rendered UI. It uses the App Router, communicates with the API through @rawstack/api-client, and produces a standalone build for containerised deployment.

Tech specification

The Web currently uses:

TypeScript
Node.js 24
Next.js 16
React 19
@rawstack/api-client
TanStack React Query
Radix UI
React Hook Form
Zod
Tailwind CSS v4
Sonner
lucide-react

Architecture

The Web frontend keeps presentation, data fetching, and API interaction separate so the codebase is easier to understand and extend.

UI

The UI is built around the Next.js App Router. Layouts, pages, loading states, and route segments are defined in the app directory.

React Server Components are used by default, which helps keep the amount of client-side JavaScript lower and makes it easier to render content efficiently on the server. Client components are used only where interactivity is needed.

Because this is the public-facing frontend, Next.js also provides a strong foundation for SEO. Server rendering, route-level metadata, and structured page composition make it easier to produce pages that are indexable, performant, and shareable.

Styling is handled with Tailwind CSS, and accessible UI primitives are built with Radix UI. Forms are handled with React Hook Form and validated with Zod before submission.

Data and API

Data fetching follows a consistent pattern. The Web app uses @rawstack/api-client to communicate with the API and TanStack React Query for client-side server state, caching, and background refetching.

This keeps API interaction explicit and predictable without introducing unnecessary complexity. The result is a codebase that stays approachable while still supporting richer client-side behaviour where it is needed.

Directory structure

The main project structure looks like this:

apps/web/
  app/
  components/
  lib/
  public/
  specs/
  next.config.ts
  tailwind.config.ts
  vitest.config.ts
  Dockerfile

app: App Router pages, layouts, and route-specific UI
components: shared React components
lib: API helpers, utilities, and hooks
public: static assets served directly by Next.js
specs: feature-level documentation and supporting notes

Build output

Next.js is configured to produce standalone output for deployment. That build includes only the files needed to run the app in production, which keeps the final container image smaller and simpler.