---
title: Frontend
description: 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.

<CardGroup cols={2}>
  <Card title="UI library" href="/frontend/ui-library" icon="palette">
    The @africaos/ui component package and how to use it.
  </Card>
  <Card title="TanStack Start" href="/frontend/tanstack-start" icon="zap">
    Server functions, server-first rendering, and routing conventions.
  </Card>
  <Card title="Data fetching" href="/frontend/data-fetching" icon="server">
    How server functions, Query, and hooks compose.
  </Card>
  <Card title="Web app" href="/frontend/web-app" icon="globe">
    The unified shell app structure.
  </Card>
</CardGroup>

### 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.