Frontend overview

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.

export function useProjects() {
  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.