Getting Started with TanStack Start

Amen B2B uses TanStack Start for its public site and authenticated church console. File-based routes, typed navigation and route-level pending states are shared by every specialization.

Route files

Routes live under web/src/routes. The route path is declared with createFileRoute and the generated route tree supplies typed links and parameters.

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/orgs/$orgSlug/projects/")({
  component: ProjectsPage,
  pendingComponent: ProjectsSkeleton,
});

Load through Amen clients

Components use the session-aware Core or product resource hooks. Those hooks wait for an active Identity session, request an audience-specific token, and send it only to its intended service.

const projects = useProductResource((client) => client.listProjects());

The frontend never imports a database client and never stores long-lived service tokens.

Preserve the application shell

Product pages render inside the organization sidebar inherited from the B2B boilerplate. Account, members, billing, API keys, theme, changelog and command search remain shared; only the product-domain navigation and screens are specialized.

What to build next

Start with a product route, add the product API contract, enforce the workspace boundary in its repository, and cover both the pending and failure states before adding it to the sidebar.