Introduction

The Admin component is the internal dashboard for the system. It provides platform operators with tools to manage users, content, settings, and other administrative workflows.

The codebase is a single-page application built with React and Vite. It communicates with the API through @rawstack/api-client and produces a static build that is deployed to S3 and served through CloudFront.

Tech specification

The Admin currently uses:

• TypeScript
• React 19
• Vite 6
• React Router v7
• TanStack React Query
• TanStack React Table v8
• @rawstack/api-client
• dnd-kit
• Radix UI
• Tabler Icons
• React Hook Form
• Zod
• Tailwind CSS v4

Architecture

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

UI

Shared UI components are built on top of shadcn/ui.

Styling is handled with Tailwind CSS. Only light default theming is applied so it is easier to customise the interface and apply your own branding without first undoing a heavily opinionated design system.

TanStack React Table is used for table-driven interfaces such as lists with sorting, filtering, and pagination. Drag-and-drop interactions are implemented with dnd-kit, and forms are handled with React Hook Form and validated with Zod.

Data and API

State management is intentionally minimal. The Admin uses React context for lightweight shared state and TanStack React Query for server state, caching, and refetching.

This avoids introducing a heavier state management library before one is clearly needed. Because different projects have different requirements, the codebase aims to stay simple and approachable so you can customize it without first learning an unnecessary abstraction.

The Admin is a single-page application with no server-side rendering. React Router handles client-side navigation, while API requests are made through @rawstack/api-client, which helps keep the frontend aligned with the API contract.

Directory structure

The main project structure looks like this:

apps/admin/
  src/
	main.tsx
	App.tsx
	routes/
	components/
	lib/
	assets/
  public/
  vite.config.ts
  tailwind.config.ts
  tsconfig.json
  index.html

• src/main.tsx: application entry point
• src/App.tsx: root component and shared providers
• src/routes: route-level components
• src/components: shared UI components
• src/lib: API helpers, hooks, and utilities
• src/assets: images and other bundled assets
• public: files copied directly into the final build output