Frontend
The frontend stack - the shared UI package, TanStack Start conventions, data fetching, and the web app structure.
The frontend is a React 19 + TanStack stack: TanStack Start for apps, TanStack Router for routing, TanStack Query for data, and a shared component library in @africaos/ui. This section documents the conventions every frontend developer needs.
UI library
The @africaos/ui component package and how to use it.
TanStack Start
Server functions, server-first rendering, and routing conventions.
Data fetching
How server functions, Query, and hooks compose.
Web app
The unified shell app structure.
The stack in one line
React 19 renders the UI; TanStack Start serves it (server components first, server functions for data); TanStack Router maps URLs to pages; TanStack Query caches server data; @africaos/ui supplies the components; Tailwind v4 styles everything.
Who owns what
| Layer | Package | Responsibility |
|---|---|---|
| App framework | @tanstack/react-start |
Server rendering, server functions, file routing. |
| Routing | @tanstack/react-router |
Route tree, guards, loaders, params. |
| Data | @tanstack/react-query |
Server-state caching, mutations, invalidation. |
| UI | @africaos/ui |
Shared component library. |
| Styling | tailwindcss v4 |
Utility-first styling. |
The frontend rule
Server components and server functions first. Data fetching happens on the server through server functions; client components are added only when interactivity requires it (forms, sheets, real-time updates). This keeps the client bundle small and the tenancy logic server-side.