A ready-to-run Next.js 16.4 app with the guide's src/features layout, the appendix configs, a StyleX design system, an invoices feature (cached queries, Server Actions, forms, loading and error states), a nonce-based CSP and security headers, a signed dev-only sign-in, Vitest and Playwright with axe tests, and CI.
- 1
Download
Pick a PascalCase name; it becomes the app's display name and, lowercased, the package name.
- 2
Install
With Node.js 24 and corepack enabled, run pnpm install, then copy .env.example to .env.local.
- 3
Run
pnpm dev serves the app; pnpm lint, typecheck, test and build run the same checks as CI.
What you get
project/ ├── .github/ │ ├── workflows/ │ │ └── ci.yml │ └── dependabot.yml ├── docs/ │ └── adr/ │ └── 0001-project-scope.md ├── e2e/ │ ├── invoices.spec.ts │ └── security.spec.ts ├── public/ ├── src/ │ ├── app/ │ │ ├── (app)/ │ │ │ ├── invoices/ │ │ │ │ ├── [invoiceId]/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── new/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── error.tsx │ │ │ │ ├── loading.tsx │ │ │ │ └── page.tsx │ │ │ └── layout.tsx │ │ ├── (marketing)/ │ │ │ ├── sign-in/ │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── api/ │ │ │ └── health/ │ │ │ └── route.ts │ │ ├── global-error.tsx │ │ ├── layout.tsx │ │ └── not-found.tsx │ ├── components/ │ │ └── ui/ │ │ ├── button.tsx │ │ └── text-field.tsx │ ├── features/ │ │ ├── auth/ │ │ │ ├── components/ │ │ │ │ └── sign-in-form.tsx │ │ │ ├── actions.ts │ │ │ ├── schemas.test.ts │ │ │ └── schemas.ts │ │ └── invoices/ │ │ ├── components/ │ │ │ ├── create-invoice-form.tsx │ │ │ ├── invoice-actions.tsx │ │ │ ├── invoice-status-badge.test.tsx │ │ │ ├── invoice-status-badge.tsx │ │ │ ├── invoice-status-filter.tsx │ │ │ ├── invoice-summary.tsx │ │ │ ├── invoice-table-skeleton.tsx │ │ │ ├── invoice-table.test.tsx │ │ │ └── invoice-table.tsx │ │ ├── actions.test.ts │ │ ├── actions.ts │ │ ├── format.test.ts │ │ ├── format.ts │ │ ├── queries.ts │ │ └── schemas.ts │ ├── lib/ │ │ ├── auth.ts │ │ ├── csp.test.ts │ │ ├── csp.ts │ │ ├── db.ts │ │ ├── env.ts │ │ ├── session.test.ts │ │ └── session.ts │ ├── styles/ │ │ ├── globals.css │ │ └── tokens.stylex.ts │ ├── instrumentation.ts │ ├── proxy.test.ts │ └── proxy.ts ├── .env.example ├── .gitignore ├── .nvmrc ├── .prettierignore ├── babel.config.js ├── eslint.config.mjs ├── next.config.ts ├── package.json ├── playwright.config.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── postcss.config.js ├── prettier.config.mjs ├── README.md ├── tsconfig.json ├── vitest.config.mts └── vitest.setup.ts