# Frontend overview

> The React SPA: its slice-per-feature layout, routing with TanStack, and the shadcn/ui design system.

## The stack

The frontend is a Vite + React 19 single-page app written in TypeScript. It uses:

- **TanStack Router** for type-safe routing.
- **TanStack Query** for server state: caching, invalidation and background refetching.
- **shadcn/ui** components on **Tailwind v4**, with light and dark themes.

## Slice-per-feature

Like the API, the frontend is organised by feature rather than by file type. A feature folder holds
everything it needs:

```
features/
  projects/
    api.ts          // typed client calls
    queries.ts      // TanStack Query hooks
    ProjectList.tsx // components
    route.tsx       // the TanStack route
```

Shared primitives (the UI kit, the API client, theme handling) live in `components/` and `lib/`.
Anything feature-specific stays inside the feature.

## Routing

Routes are defined per feature and composed into the router. Because TanStack Router is type-safe,
navigation and route params are checked at compile time, so a renamed route surfaces as a type error,
not a runtime 404.

## Server state with TanStack Query

Data fetching lives in query hooks, one concern per hook. Components call a hook and render; the hook
owns caching, loading and error state. Mutations invalidate the queries they affect, so the UI stays
consistent without manual refetching.

```ts

  return useQuery({ queryKey: ['projects'], queryFn: listProjects })
}
```

## Theming

The app supports light, dark and system themes. The choice is persisted under the `slicekit.theme` key
and applied before first paint to avoid a flash, the same key this marketing site uses, so the two
agree on the active theme.

## Talking to the API

All requests go through one typed client that handles cookies and CSRF. That contract is important
enough to have [its own page](/docs/api-client).