Skill v1.0.0
currentAutomated scan100/100version: "1.0.0" name: init-tanstack-fastapi description: Initialize a full-stack monorepo with TanStack Start + shadcn/ui frontend (Bun, Biome, tsc) and FastAPI backend (uv, Ruff, ty). Includes hey-api OpenAPI client generation with Zod and TanStack Query, a justfile task runner, and Docker production setup. Use when creating a new full-stack project, scaffolding a monorepo, or setting up TanStack Start with FastAPI. allowed-tools: Bash Read Write
Initialize TanStack Start + FastAPI Monorepo
Create a production-ready monorepo with a TanStack Start frontend and FastAPI backend.
For detailed configuration file contents, see references/stack-details.md.
Prerequisites
Verify these tools are installed before proceeding:
bun --version # >= 1.2uv --version # >= 0.6just --version # >= 1.0jj --version # >= 0.25lefthook --version # >= 1.0docker --version # >= 24.0 (optional, for production builds)
If any required tool is missing (bun, uv, just, jj, lefthook), stop and inform the user. Docker is optional — warn if missing but continue.
Step 1: Initialize Version Control
jj git init --colocate
Create .jj/.gitignore with content /* so git ignores jj metadata.
Step 2: Scaffold the Frontend
Run the shadcn create command to scaffold a TanStack Start project:
bunx --bun shadcn@latest create \--preset "https://ui.shadcn.com/init?base=base&style=mira&baseColor=neutral&theme=indigo&iconLibrary=lucide&font=geist&menuAccent=subtle&menuColor=default&radius=medium&template=start&rtl=false" \--template start \frontend
After scaffolding completes:
- Remove the nested git repository created by shadcn (the project uses the root-level jj/git repo):
``bash rm -rf frontend/.git ``
- Remove ESLint configuration if present (the project uses Biome instead):
- Delete
eslint.config.jsor.eslintrc.*if they exist - Remove
eslint,@eslint/*, andprettierpackages frompackage.jsondevDependencies - Remove any eslint/prettier scripts from
package.json
- Install Biome:
``bash cd frontend && bun add -d @biomejs/biome ``
- Create
frontend/biome.jsonwith the configuration from stack-details.md section "Biome Configuration".
- Auto-fix the scaffolded code to conform to Biome rules (formatting, imports):
``bash cd frontend && bunx biome check --write --unsafe . ``
- Install hey-api and API client dependencies:
``bash cd frontend && bun add @hey-api/client-fetch zod @tanstack/react-query cd frontend && bun add -d @hey-api/openapi-ts vitest jsdom ``
- Create
frontend/openapi-ts.config.tswith the configuration from stack-details.md section "Hey-API Configuration".
- Create
frontend/vitest.config.tsandfrontend/src/__tests__/smoke.test.tsfrom stack-details.md section "Frontend Test Configuration".
- Merge these scripts into
frontend/package.json(preserve existing scripts from scaffolding):
``json { "scripts": { "check": "biome check .", "check:fix": "biome check --write .", "typecheck": "tsc --noEmit", "test": "vitest run", "gen:api": "bunx --bun @hey-api/openapi-ts" } } ``
Step 3: Scaffold the Backend
- Initialize a Python project with uv (pinned to Python 3.13 to match Docker images):
``bash uv init backend --app --python 3.13 ``
- Add FastAPI and dependencies:
``bash cd backend && uv add "fastapi[standard]" ``
- Add development dependencies:
``bash cd backend && uv add --dev ruff ty pytest httpx mkdocs mkdocs-material "mkdocstrings[python]" ``
- Create the backend application structure:
`` backend/ ├── app/ │ ├── __init__.py │ ├── main.py │ └── routers/ │ ├── __init__.py │ └── health.py └── scripts/ └── generate_schema.py ``
- Write
backend/app/main.pywith the starter code from stack-details.md section "FastAPI Main App".
- Write
backend/app/routers/health.pywith the health check router from stack-details.md section "Health Router".
- Create empty
backend/app/__init__.pyandbackend/app/routers/__init__.py.
- Write
backend/scripts/generate_schema.pywith the schema export script from stack-details.md section "Schema Generation Script".
- Append the Ruff and ty configuration to
backend/pyproject.tomlfrom stack-details.md section "Ruff and ty Configuration" (includes pytest config).
- Create test files from stack-details.md section "Backend Tests":
backend/tests/__init__.py(empty)backend/tests/conftest.pybackend/tests/test_health.py
- Create
backend/mkdocs.ymlfrom stack-details.md section "MkDocs Configuration".
- Create
backend/docs/index.mdfrom stack-details.md section "MkDocs Index Page".
- Create
backend/docs/api-reference.mdfrom stack-details.md section "MkDocs API Reference".
- Remove
backend/hello.pyif it was created byuv init(the app now lives inbackend/app/).
Step 4: Create the Root Justfile
Create justfile in the project root with the content from stack-details.md section "Justfile".
Key recipes:
set dotenv-loadto read.envdevspawns frontend and backend in paralleldev-frontend/dev-backendfor individual servicescheckruns all linters, formatters, and type checkersgen-apigenerates OpenAPI client from static schemagen-api-livefetches schema from running backend serverdocs-serve/docs-buildfor backend API documentation
Step 5: Create Docker Configuration
- Create
frontend/Dockerfilefrom stack-details.md section "Frontend Dockerfile". - Create
backend/Dockerfilefrom stack-details.md section "Backend Dockerfile". - Create
docker-compose.ymlin the project root from stack-details.md section "Docker Compose". - Create
frontend/.dockerignoreandbackend/.dockerignorefrom stack-details.md section "Dockerignore Files".
Step 6: Create Root Configuration Files
- Create
.env.examplefrom stack-details.md section "Environment Template". - Copy
.env.exampleto.env:
``bash cp .env.example .env ``
- Create
.gitignorefrom stack-details.md section "Gitignore". - Create
README.mdfrom stack-details.md section "Project README". - Create
.editorconfigfrom stack-details.md section "EditorConfig". - Create
.vscode/extensions.jsonfrom stack-details.md section "VS Code Extensions". - Create
.vscode/settings.jsonfrom stack-details.md section "VS Code Settings". - Create
.github/workflows/ci.ymlfrom stack-details.md section "GitHub Actions CI".
Step 7: Install Pre-commit Hooks
- Create
lefthook.ymlat the project root from stack-details.md section "Lefthook Configuration".
- Install the hooks:
``bash lefthook install ``
Step 8: Generate Initial API Client
cd backend && uv run python scripts/generate_schema.pycd frontend && bun run gen:api
Step 9: Verify Everything Works
- Run checks:
``bash just check ``
- Run tests:
``bash just test ``
- Run dev servers:
``bash just dev `` Verify:
- Frontend at http://localhost:3000
- Backend at http://localhost:8000
- API docs at http://localhost:8000/docs
- Stop the dev servers after verification.
Final Project Structure
project/├── frontend/│ ├── app/ # TanStack Start app directory│ ├── public/│ ├── src/│ │ ├── __tests__/ # Frontend tests│ │ └── client/ # Generated API client (gitignored)│ ├── biome.json│ ├── openapi-ts.config.ts│ ├── vitest.config.ts│ ├── package.json│ ├── tsconfig.json│ ├── Dockerfile│ └── .dockerignore├── backend/│ ├── app/│ │ ├── __init__.py│ │ ├── main.py│ │ └── routers/│ │ ├── __init__.py│ │ └── health.py│ ├── tests/│ │ ├── conftest.py│ │ └── test_health.py│ ├── scripts/│ │ └── generate_schema.py│ ├── docs/│ │ ├── index.md│ │ └── api-reference.md│ ├── mkdocs.yml│ ├── pyproject.toml│ ├── uv.lock│ ├── Dockerfile│ └── .dockerignore├── .github/│ └── workflows/│ └── ci.yml├── .vscode/│ ├── extensions.json│ └── settings.json├── justfile├── lefthook.yml├── docker-compose.yml├── .editorconfig├── .env.example├── .env├── .gitignore└── README.md
Report the final status to the user, including any warnings or errors encountered during setup.