Recipes Overview
Opinionated, end-to-end implementation tutorials that build complete features using Nebutra-Sailor's full stack.
Recipes are different from guides. Guides explain how a system works. Recipes show you how to build something real — from database schema to deployed feature, using the actual packages and patterns of this codebase.
How recipes work
Each recipe:
- Targets a concrete, representative feature that exercises multiple layers of the stack
- Provides working, copy-paste code at every step — not pseudocode
- Follows the canonical patterns from
CLAUDE.md(token usage, component imports, testing conventions) - Ends with tests (Vitest unit + Playwright E2E) and a Storybook story
Recipes are the fastest way to get oriented with a new part of the codebase. If you're onboarding a new engineer, point them at the most relevant recipe before asking them to write code.
Available recipes
Build a Usage Analytics Dashboard
Full end-to-end feature: Prisma schema → Hono API → React Server Component → Recharts visualization → RBAC gating → Vitest + Playwright tests.
Stack coverage: database, API, frontend, permissions, charts, testing, Storybook
More recipes coming soon
Multi-tenant data isolation, webhook event pipeline, file upload with progress, and CSV export are in progress. Community contributions welcome — see the contributing guide.
Stack coverage map
Use this table to find which recipe covers a technology you need to learn:
| Technology | Covered in |
|---|---|
| Prisma schema + migration | Build a Feature (Phase 1) |
| Hono API route + OpenAPI | Build a Feature (Phase 2) |
@nebutra/metering (ClickHouse) | Build a Feature (Phase 2) |
| TypeScript type generation | Build a Feature (Phase 3) |
| React Server Components | Build a Feature (Phase 4) |
| Recharts + dark-mode colors | Build a Feature (Phase 5) |
@nebutra/permissions RBAC | Build a Feature (Phase 6) |
| Sidebar navigation | Build a Feature (Phase 7) |
| Vitest unit tests | Build a Feature (Phase 8) |
| Playwright E2E tests | Build a Feature (Phase 8) |
| Storybook stories | Build a Feature (Phase 9) |
How recipes are maintained
Recipes are updated alongside the codebase when APIs change. Each recipe has a version comment at the top of the page indicating the last verified commit SHA.
Community contributions are welcome. To propose a new recipe:
- Open an issue describing the feature you want to document
- Follow the recipe template: Phase 1 (DB) → Phase N (Tests + Storybook)
- All code blocks must be verified against the current
mainbranch - Submit a PR against
apps/sailor-docs/content/docs/en/recipes/
Recipes are intentionally opinionated. They reflect the recommended way to build features in this codebase, not the only way. If your use case differs, use the recipe as a starting point and adapt as needed.
How is this guide?
Last updated on