Full-stack web app

Next.js App Router + Supabase + Tailwind: the boring stack that ships.

Run it as a prompt

Paste this into any AI agent, or fetch it: curl -s https://uplift.page/api/v1/prompts/full-stack-web-app/raw

prompt.md

# Full-stack web app

Stand up a production web app with auth, a relational database, and CI deploys - in days, with no servers to babysit.

## Recommended stack

- **Next.js (App Router)** - framework. Server components and route handlers cover UI + API in one deployable.
- **Supabase** - Postgres + auth + storage. Real Postgres with row-level security; auth that hands you a JWT your DB enforces.
- **Tailwind CSS** - styling. Design tokens in markup; no stylesheet drift between teammates or agents.
- **Vercel** - hosting & CI. Preview deploy per PR is the review workflow.
- **zod** - validation. Parse, don't trust: every boundary (form, API, webhook) gets a schema.

## Build steps

1. Model the schema first; write SQL migrations with RLS policies for every table (deny by default).
2. Wire Supabase auth with the SSR helpers; gate server components on the session.
3. Build one vertical slice end-to-end (page → server action → DB → render) before broadening.
4. Validate all inputs with zod at the boundary; return typed errors the UI can show.
5. Set up Vercel previews; treat `npm run build` passing as the merge gate.

## Watch out for

- Skipping RLS because "the API checks it" - defense in depth starts in the database.
- Client-fetching data a server component could render - it's slower and leaks API shape.
- Hand-rolled auth flows when the platform provides them.

## Definition of done

- Sign up → do the core action → sign out works on a phone
- Anonymous users can't read or write protected rows (test with curl, not the UI)
- Lighthouse performance ≥ 90 on the main page

The full prompt

Stand up a production web app with auth, a relational database, and CI deploys - in days, with no servers to babysit.

Recommended stack

Next.js (App Router) - framework. Server components and route handlers cover UI + API in one deployable.
Supabase - Postgres + auth + storage. Real Postgres with row-level security; auth that hands you a JWT your DB enforces.
Tailwind CSS - styling. Design tokens in markup; no stylesheet drift between teammates or agents.
Vercel - hosting & CI. Preview deploy per PR is the review workflow.
zod - validation. Parse, don't trust: every boundary (form, API, webhook) gets a schema.

Build steps

Model the schema first; write SQL migrations with RLS policies for every table (deny by default).
Wire Supabase auth with the SSR helpers; gate server components on the session.
Build one vertical slice end-to-end (page → server action → DB → render) before broadening.
Validate all inputs with zod at the boundary; return typed errors the UI can show.
Set up Vercel previews; treat npm run build passing as the merge gate.

Watch out for

Skipping RLS because "the API checks it" - defense in depth starts in the database.
Client-fetching data a server component could render - it's slower and leaks API shape.
Hand-rolled auth flows when the platform provides them.

Definition of done

Sign up → do the core action → sign out works on a phone
Anonymous users can't read or write protected rows (test with curl, not the UI)
Lighthouse performance ≥ 90 on the main page

Served from the uplift.page library and refreshed within 5 minutes of every update.