building-fullstack-features

name

building-fullstack-features

description

Guides end-to-end implementation of features in side projects, from design decision to deployment. Use when building a new feature from scratch, connecting frontend to backend, setting up a new side project architecture, or following a complete implementation checklist. Triggers on: "build this feature", "implement end-to-end", "new feature from scratch", "set up project structure", "ship this". Covers the Next.js 15 + React 19 + Supabase + Vercel stack.

Building Fullstack Features

Core Philosophy

Ship end-to-end, then iterate. A half-built feature is a bug waiting to happen — it creates confused state between the DB, API, and UI that takes longer to debug than building it right from the start.

Define the contract before writing a single line of code. The order is: scope → API contract → DB schema → frontend → deploy. Never skip to UI before the API is defined.

---

Workflow

Step 1 — Feature Scope

Write one sentence that answers: what does this feature do, who uses it, and what problem does it solve?

Feature: [Name]
Sentence: [User] can [action] so that [outcome].

Then list explicit non-goals — features that sound related but are out of scope for this iteration. Non-goals prevent scope creep during implementation.

Output: annotate the sentence + non-goals at the top of your implementation doc.

---

Step 2 — API Contract (before writing code)

Define every endpoint or server action before implementing any of them:

// Resource: [resource name]
// Base: /api/[resource]

POST   /api/[resource]          // Create
GET    /api/[resource]          // List (cursor-based pagination)
    /api/[resource]/:id      
  /api/[resource]/:id      
 /api/[resource]/:id