Getting Started

Getting Started: Your First Vertical Slice

A ~30‑minute walkthrough to feel the SAE loop end‑to‑end. Builds one feature — schema → API → UI — in a single cycle.

This assumes you've read Module 2. We'll build a trivial "Notes" slice to internalize the rhythm, not to ship a product.

---

0. Set up the Zero‑Ops stack (5 min)

Pick from the Approved Zero‑Ops Tooling List. A minimal default:

• Engineer: Cursor or Claude Code
• Frontend: Next.js + Shadcn
• Data: Supabase or Neon (Postgres)
• Compute: Vercel

npx create-next-app@latest sae-notes
cd sae-notes

---

1. Lay out for AI readability (3 min)

sae-notes/
├── .cursorrules            # behavioural constraints for the agent
├── specs/
│   └── notes.md            # the source of truth for this slice
└── src/
    └── features/
        └── notes/          # the bounded context

A minimal .cursorrules:

- Build only inside src/features/<slice>. Never cross bounded contexts.
- Keep files single-responsibility, ~100 lines max.
- The spec in specs/<slice>.md is the source of truth. If code and spec
  disagree, the spec wins — flag the conflict, don't silently diverge.
- Generate schema, routes, and view together as one vertical slice.

---

2. Write the spec FIRST (10 min)

This is the real work. Use the SDD Spec Template. A compressed specs/notes.md:

# Bounded Context: Notes

## Data model
note: id (uuid, pk), title (text, required, ≤120 chars),
      body (text), created_at (timestamptz, default now())

## API
GET  /api/notes        → list notes, newest first
POST /api/notes        → create { title, body }; 400 if title empty/too long

## UI (/notes)
- List of notes (title + relative time)
- "New note" form (title required), optimistic insert
- Empty state: "No notes yet."

## Edge cases
- Empty title → inline validation, no request sent
- Title > 120 chars → block with counter
- Network failure on create → roll back optimistic insert, show retry

---

3. Generate the slice (5 min)

Point the Engineer at the spec:

"Read specs/notes.md and the repo. Generate the full vertical slice in src/features/notes/: schema.sql, routes.ts, and view.tsx. Honour every edge case in the spec. Keep files ~100 lines."

Review the output for structural drift — does the API shape match the UI's expectations? Do the types line up with the schema?

---

4. Unleash the Guardian (5 min)

Open a fresh context (this matters — see Module 3) and task it adversarially:

"You are QA. Try to break the Notes slice. Write integration tests for every edge case in specs/notes.md, plus hostile inputs the spec didn't mention (XSS in body, 10k‑char title, duplicate rapid submits). Report what fails."

Fix findings by editing the spec first, then regenerating — not by hand‑patching.

---

5. Ship (2 min)

git push        # Vercel deploys on push — Zero-Ops in action

---

What you just practised

Step	Pillar
Spec before code	Spec‑Driven Development
schema + API + UI in one go	Single‑shot vertical slice
Fresh‑context adversarial QA	The Guardian
Push‑to‑deploy	Zero‑Ops stack

Reality check. A toy "Notes" app collapses the layers cleanly because it has no real auth, money, or compliance surface. Your first production slice will surface the hard parts — that's expected and good. Treat the friction you hit as data, and write it up in Solo Production Case Studies.