Initialize Fullstack

Use uv for all Python package management.

cd backend
uv init --python ">=3.12"
uv venv
uv add "fastapi[standard]"

Add backend/.venv to root .gitignore.

Update pyproject.toml with description and author if missing.

Create .vscode/settings.json:

{
  "python.defaultInterpreterPath": "${workspaceFolder}/backend/.venv/bin/python",
  "python.terminal.activateEnvironment": true
}

3. Frontend Setup

cd frontend
npm create vite@latest . -- --template react-ts
npm install tailwindcss @tailwindcss/vite @types/node -D

Configure Tailwind — Replace src/index.css:

@import "tailwindcss";

Configure path aliases — Add to compilerOptions in both tsconfig.json and tsconfig.app.json:

"baseUrl": ".",
"paths": { "@/*": ["./src/*"] }

Update vite.config.ts:

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: { "@": path.resolve(__dirname, "./src") }
  }
})

Initialize shadcn/ui:

npx shadcn@latest init
npx shadcn@latest add button

Apply theme (default: twitter, or user's choice):

# Options: twitter | supabase
npx shadcn@latest add https://tweakcn.com/r/themes/twitter.json

4. Docker Configuration

backend/Dockerfile — Use ghcr.io/astral-sh/uv:alpine (or uv:debian-slim only if Debian packages required).

frontend/Dockerfile — Two-stage build: build with Node, serve with node:slim or nginx alpine.

docker-compose.yaml — Configure both services with appropriate ports and networking.

5. Sanity Check

Verify the stack works end-to-end:

1. Backend: Create /ping endpoint returning {"message": "pong"}
2. Frontend: Add a Button that calls /ping and displays the response
3. Test: Run docker-compose up and confirm the button works

Theme Options