Tech Kit

Double — Web + API monorepo

A public Next.js site talking to a separate Go API. One Turborepo, two deploy targets.

grit new --double gives you a Turborepo with apps/web (Next.js marketing + product site) and apps/api (Go API). Shared Zod schemas + TS types live in packages/shared so both sides stay typed end-to-end. Each app deploys on its own schedule.

apps/web (Next.js) + apps/api (Go)
Shared Zod schemas + TS types in packages/shared
CORS, JWT, cookie-vs-Authorization-header all pre-wired
Deploy the web on Vercel, the API on Fly/Railway/your VPS
Quick install
$grit new my-app --double
my-app.com
apps/web→ apps/api
apps/web/app/page.tsxGET /api/posts
apps/web/app/blog/[slug]/page.tsxGET /api/posts/:slug
apps/web/app/(auth)/login/page.tsxPOST /api/auth/login
packages/shared/schemas/post.tsshared

What's included

Every batteries-included primitive the framework ships, wired into this kit by default.

Next.js 14 + App Router

Server components, ISR, route handlers; everything modern.

Turborepo

Cached builds, single pnpm install, parallel dev.

Auth + 2FA

JWT, OAuth, TOTP. The Go API owns auth; Next.js calls in.

GORM + Postgres

Production DB by default; SQLite for tests.

Type sharing

grit sync regenerates TS from Go structs.

Background jobs

Asynq queue + cron + webhook receiver in the API.

AI Gateway

100+ models, streaming, server or client-initiated.

Audit log

Tamper-evident SHA-256 chain on every mutation.

Two Dockerfiles

One per app; compose ships for local dev.

Starter prompt for claude.ai

Plan this kit with an AI

Paste this into claude.ai with your idea. Claude returns four planning files (project-description.md, project-phases.md, design-style-guide.md, prompt.md) that you feed to Claude Code with the grit new my-app --double command.

Customize with the wizard
prompt — Double — Web + API monorepo
I want to build the project below using the **Grit framework**.

## What Grit is

Grit is a full-stack meta-framework that scaffolds production-ready apps in one command. It pairs a **Go (Gin + GORM)** backend with React on the front and ships every battery — auth, payments, jobs, mail, file storage, AI, observability, security WAF, and a Filament-style admin panel — out of the box.

- Docs: https://gritframework.dev/docs
- Repo: https://github.com/MUKE-coder/grit

## The kit I want to use — `Double — Web + API monorepo`

I'm using the **double** kit, which produces:

- A Turborepo monorepo with `apps/web` (Next.js) + `apps/api` (Go)
- `packages/shared` for Zod schemas + TypeScript types shared between web and API
- `grit sync` keeps TS types in sync with Go structs
- CORS pre-wired between web and API
- Deploy each app on its own schedule (separate Dockerfiles)
- JWT + OAuth + 2FA, Asynq jobs, S3 storage, Resend mail, AI Gateway
- In-app **Sentinel** + **Pulse** admin pages on the API

The scaffold command I'll run is:

```
grit new my-app --double
```

Reference docs for this kit:

- https://gritframework.dev/docs/tech-kits/double
- https://gritframework.dev/docs/concepts/architecture-modes/double

## What I need from you

Generate exactly **four files** I'll save to my project root before scaffolding.

### 1. `project-description.md` — the full project briefing

A complete, opinionated brief on the project. Cover:

- One-line positioning (what it is in 12 words)
- Target users (3–5 concrete personas with names and motivations)
- The core problem and why existing alternatives fall short
- Top 5 features ranked by importance, with one sentence each on the user value
- Non-goals (what we are NOT building — anti-scope is as important as scope)
- Success metrics (3 concrete numbers we'd judge success against)
- Inspirations / references (apps to learn from + what to copy / avoid)
- Tech-stack alignment — explain how each Grit battery (auth, jobs, mail, storage, AI, admin) maps to the project's needs

### 2. `project-phases.md` — the phased build plan

A sequenced roadmap with checkbox tasks. Use this structure:

```
## Phase 1 — Scaffold & Skeleton
- [ ] Run `grit new my-app --double`
- [ ] Configure `.env` (database, JWT, SMTP, S3, ...)
- ...

## Phase 2 — Core Data Model
- [ ] Define User model extensions
- [ ] `grit generate resource Order`
- ...

## Phase 3 — Authentication & RBAC
## Phase 4 — Core User Flows
## Phase 5 — Admin Panel (or mobile screens / desktop pages — match the kit)
## Phase 6 — Payments / Webhooks (if applicable)
## Phase 7 — Polish & UX
## Phase 8 — Deploy
```

Rules for the phases doc:

- Each phase has 5–12 checkbox tasks
- Tasks must be small enough to complete in <30 minutes each
- Reference Grit CLI commands (`grit generate ...`, `grit migrate`, `grit sync`) where appropriate
- Each phase ends with a "Verify" step listing what should work before moving on

### 3. `design-style-guide.md` — visual design system

Opinionated and specific. Cover:

- Brand voice (3 adjectives + tagline)
- Color palette — **all with hex codes** — in both dark and light mode: bg primary/secondary/tertiary/elevated, border, text primary/secondary/muted, accent (primary brand color), success, danger, warning, info
- Typography: UI font + code font (specific Google Fonts), type scale (xs through 4xl with px values)
- Spacing scale (4-px base)
- Border radius scale
- Key component patterns: buttons (primary, ghost, outline), cards (elevated, flat), data tables, forms, toasts, modals
- Page-level patterns: navbar, sidebar, dashboard layout, empty states, loading states
- Animation principles (durations, easings)
- Reference apps (e.g., "navbar feels like Linear; tables feel like Vercel dashboard")

### 4. `prompt.md` — the Claude Code prompt

This is the file I'll paste into Claude Code. It should:

- Open with a one-paragraph project recap
- Tell Claude Code to **read** `project-description.md`, `project-phases.md`, and `design-style-guide.md` **first** and hold those as load-bearing context
- Reference the Grit docs URLs above
- Tell Claude Code to scaffold with `grit new my-app --double` if the project directory doesn't exist yet
- Tell Claude Code to work through `project-phases.md` **one phase at a time**, checking off boxes as it goes, and to **stop and report** at the end of each phase for review before starting the next
- Specify code conventions: snake_case Go files, kebab-case TS files, no `any` type, every error handled in Go, business logic lives in services not handlers, all data fetching through React Query / TanStack Query
- Specify the Grit API response shape it must use (`{ data, meta }` for lists, `{ data, message }` for single, `{ error: { code, message, details } }` for errors)
- Tell Claude Code to run `grit sync` after every Go model change
- Tell Claude Code to lean on `design-style-guide.md` for any UI work — never invent colors or spacing on the fly

## Critical instructions for you (planning Claude)

- Do NOT write Go or React code. You are planning only.
- Be opinionated. If I gave you a vague idea, make concrete choices and explain them in one sentence.
- For every feature you propose, ask yourself "what specific Grit primitive ships this?" and name it.
- If the idea has non-engineering admin users (support, ops), recommend the `--triple` kit so the admin panel is a separate app with its own auth scope.
- Output the four files as separate fenced code blocks, each with a `filename:` annotation, in order: project-description.md → project-phases.md → design-style-guide.md → prompt.md.

## My idea

[YOUR IDEA — replace this block with a detailed paragraph describing what your app does, who it's for, the core user flows, and any reference apps or inspirations you'd like to draw from.]
1

Copy

Hit Copy prompt above.

2

Paste in claude.ai

Replace [YOUR IDEA] with a paragraph about your project.

3

Feed Claude Code

Save the 4 files Claude returns to your project root, then run prompt.md in Claude Code.

Ready to build?

One command, your app online in 30 seconds. Read the quick-start guide for the rest of the wiring.