Skip to content
Stadium Documentation Stadium Documentation Stadium Documentation

The Application

The app lives in the web/ folder. It starts as a small Next.js project with an API client, form validation and toast notifications already in place. Each epic you build adds to it.

Technology

Section titled “Technology”

Stadium 8 applications are built on a fixed stack:

  • Next.js 16 with the App Router
  • React 19
  • TypeScript 5 in strict mode
  • Tailwind CSS 4 for styling
  • shadcn/ui for UI components
  • React Hook Form and Zod for forms and validation
  • Vitest and React Testing Library for unit and integration tests
  • Playwright for end-to-end browser tests
  • MSW (Mock Service Worker) for the mock backend, when your project needs one
  • GitHub Actions for the automated quality gates

Authentication is chosen per project during Intake: a Backend for Frontend (BFF, recommended), frontend-only sign-in with next-auth, or your own approach. No authentication library is bundled by default.

Claude fixes type and lint errors properly. It never silences them with suppression comments such as @ts-ignore or eslint-disable.

What the application includes

Section titled “What the application includes”
  • Your features: every epic and story you approved
  • Unit and integration tests: for every story, written before the code they cover
  • End-to-end tests: a Playwright test for every story that has its own page, run at the end of each epic against a production build
  • Accessibility checks: colour contrast, layout and focus order, tested in a real browser
  • Central styling: colours, fonts and spacing come from design tokens in web/src/app/globals.css, so you can restyle the app from one file
  • A mock backend: built when your backend isn’t running yet or doesn’t exist, so the app works from day one
  • Environment settings: web/.env.example lists every variable the app needs
  • A Dockerfile: at the project root, ready for container deployment

The mock backend

Section titled “The mock backend”

When your backend is still in development, or your project has no backend, Claude builds a mock that answers the app’s API calls with realistic data. The mock files live in web/src/mocks/.

The setting NEXT_PUBLIC_USE_MOCK_API=true in web/.env.local turns the mock on. When your real backend is ready, /api-go-live tests the connection and switches the app over. See Mocking vs. Real Backend.

If your backend is already running, Claude connects to it directly and doesn’t build a runtime mock.