Guides

A dashboard on an existing API

Build a logged-in app with tables and forms against a backend you already have.

This guide builds a small admin dashboard for a backend that already exists: users sign in, see a sortable table of projects, and create new ones. It uses the app kit, which has everything needed.

1. Create the app

kitr new projects-admin --kit app

First time? Run npm i -g kitr once. Inside a project, the global kitr runs your project's own version.

Point it at your API in .env:

VITE_API_URL=https://api.example.com

No backend yet? The kit includes Mocks, which fakes API responses while you build.

2. Sign in

config/auth.ts already uses a token adapter that posts to /sign-in and reads /me. Adjust the paths to match your API, then protect every page under a layout route:

// app/routes/_app.tsx
import { createFileRoute, Outlet } from '@tanstack/react-router'
import { requireAuth } from 'kitr/router'

export const Route = createFileRoute('/_app')({
  beforeLoad: requireAuth(),
  component: () => <Outlet />,
})

Wire the token into the HTTP client so every request is signed. See Auth with the HTTP client.

3. Describe the data

kitr make:queries projects

First time? Run npm i -g kitr once. Inside a project, the global kitr runs your project's own version.

This writes app/features/projects/queries.ts with list, detail, create, update and delete, each backed by the HTTP client and wired with cache effects. Adjust the paths and the Project type to match your API.

4. Show a table

kitr ui add data-table

First time? Run npm i -g kitr once. Inside a project, the global kitr runs your project's own version.

Then follow Tables to bind sorting and paging to the URL. Pass the URL's page, size and sort to your list query so the API returns the right page.

5. Create projects

kitr make:form new-project

First time? Run npm i -g kitr once. Inside a project, the global kitr runs your project's own version.

Point the form's onSubmit at the create mutation. When it succeeds, the effect invalidates the project lists and the table refetches. If your API responds 422 with field errors, they appear under the right inputs. See Forms.

6. Test it

The kit includes Testing. renderWithKitr renders a component with the app's providers, and the mocks answer its requests:

npm test

Where to go next

  • Permissions: hide the delete button from members.
  • State: remember the user's preferred table density.