A starter for building robust, state-of-the-art web apps — even if you've never written web code before.
You describe what you want in plain language; Claude Code builds it on top of this template, following the conventions baked in here so the result stays clean and professional.
| Layer | Technology | What it does |
|---|---|---|
| Frontend | React 19 + TypeScript | The user interface, in a type-safe language |
| Build tool | Vite | Instant dev server + optimized production build |
| Styling | Tailwind CSS v4 | Utility classes for styling |
| Components | shadcn/ui | Ready-made, customizable UI components |
| State | Zustand | Local app state (theme, current view…) |
| Server data | TanStack Query | Fetching/caching data from the backend |
| i18n | i18next | Multi-language (English / French) |
| Backend (optional) | FastAPI (Python) | API, database, auth |
| Monorepo | Turborepo | Runs front + back together |
The frontend works on its own (client-only). The backend is optional — add it only if your app needs to store data on a server, authenticate users, or run server-side logic.
# 1. Install frontend dependencies
npm install
# 2. Start the frontend (http://localhost:3000)
npm run dev:webTo also run the backend:
# In apps/api, create a virtual env and install
cd apps/api
python3 -m venv .venv && source .venv/bin/activate
pip install -e ".[dev]"
# Then, from the repo root:
npm run dev:api # http://localhost:8000
# or run both at once:
npm run dev:allThe home page is a short onboarding screen — it points you to where to start. You can switch the navigation layout (header tabs or sidebar), theme, and language from Settings.
Just talk to Claude Code in plain language:
- "Add a page that lists products"
- "Add a dark mode toggle"
- "I need users to log in"
- "Connect a database to store tasks"
Claude reads CLAUDE.md (the project rules) and follows the conventions automatically.
This template ships with its own commands (in .claude/skills/):
/create-page— adds a new page (route + sidebar + translations) the right way/enable-backend— sets up or extends the optional FastAPI backend
Run these from time to time — they don't require web expertise:
/security-review— checks for security issues (leaked secrets, injection, auth…)/code-review— checks the latest changes for bugs and quality issues
These two are built into Claude Code.
webapp-template/
├── apps/
│ ├── web/ # Frontend (React)
│ │ └── src/
│ │ ├── app/ # App shell & routing
│ │ ├── components/ # UI components (ui/ = shadcn)
│ │ ├── features/ # Your pages & features
│ │ ├── lib/ # Utilities (i18n, helpers)
│ │ ├── locales/ # Translations (en/fr)
│ │ └── stores/ # Zustand state
│ └── api/ # Backend (FastAPI) — optional
├── CLAUDE.md # Rules Claude follows on every task
└── README.md # You are here
npm run dev:web # Frontend only (most common)
npm run dev:api # Backend only
npm run dev:all # Both
npm run build # Production build
npm run lint # Check code style