Skip to content
Nano Kit

Setup

This tutorial teaches Nano Kit by building a small app in stages. The app is Event Board, a public listing of frontend events.

It starts as a single React page, then grows into a routed, data-driven, SSR-ready app.

What We Build

Section titled “What We Build”

The finished app can:

  • list upcoming events;
  • filter events by search text and category;
  • load more events with cursor pagination;
  • open a public event page;
  • log in with a session cookie and create a new event;
  • RSVP with an optimistic attendee count;
  • render every page on the server, with the session and locale intact;
  • speak English and Russian with a locale switcher.

Packages

Section titled “Packages”

The tutorial starts with a plain Vite React app:

Terminal window
pnpm create vite event-board --template react-ts

Nano Kit packages are installed along the way — each chapter adds the ones it introduces.

API Shape

Section titled “API Shape”

To keep the focus on Nano Kit, assume the app already has a small HTTP API. In the final source this is an in-memory Hono server, but the UI code only needs to know these endpoints:

GET  /api/events
GET  /api/events/:slug
POST /api/events
POST /api/events/:id/rsvp
POST /api/auth/login
POST /api/auth/logout
GET  /api/users/me

The events endpoints are public. Event creation requires a session, and RSVP counts a logged in user personally — but that arrives late in the tutorial. Until the authentication chapter, the app works with the API anonymously.

You can compare each step with the complete implementation in the Event Board source.