Part 5: Case Studies and Templates¶
22. Complete Starter Templates¶
“Templates aren't shortcuts. They're scaffolds for clarity.”
This chapter presents three real-world starter folder structures based on the philosophies and trade-offs explored throughout the book:
- Modular React + FastAPI Template
- Scalable React + FastAPI Template
- Hybrid AI Application Template (Modular features + Scalable backbone)
Each template includes:
- ✅ Folder layout
- ✅ Key file responsibilities
- ✅ CLI-ready structure (for cloning or bootstrapping)
- ✅ Recommendations for growth
Modular React + FastAPI Template¶
For rapid prototyping and clean feature isolation
Root Structure¶
project-root/
├── backend/
│ └── app/
│ └── features/
│ ├── users/
│ └── invoices/
├── frontend/
│ └── src/
│ └── features/
│ ├── users/
│ └── invoices/
├── tests/
│ ├── users/
│ └── invoices/
Ideal For:¶
- Small teams or solo devs
- Feature-driven apps
- Projects that may later scale
Growth Path:¶
- Move shared logic into
services/
as features multiply - Extract common types to
shared/
or external packages
Scalable React + FastAPI Template¶
For enterprise-grade apps or multi-team collaboration
Root Structure¶
project-root/
├── backend/
│ └── app/
│ ├── api/
│ ├── services/
│ ├── schemas/
│ ├── core/
│ ├── vectorstore/
│ └── workers/
├── frontend/
│ └── src/
│ ├── features/
│ ├── components/
│ ├── services/
│ ├── hooks/
│ └── shared/
├── tests/
│ ├── unit/
│ └── integration/
├── .env, Dockerfile, docker-compose.yml
Ideal For:¶
- Teams > 3 developers
- Microservices or LLM-powered systems
- RAG pipelines, background workers, CI/CD
Growth Path:¶
- Add
/jobs/
or/tasks/
for scheduled jobs - Implement
infra/
for IaC (e.g., Terraform, Pulumi)
Hybrid AI App Template (Best of Both Worlds)¶
Modular features + scalable service layers
Root Structure¶
project-root/
├── apps/
│ ├── frontend/
│ └── backend/
├── packages/
│ └── shared-schemas/
├── backend/
│ └── app/
│ ├── features/
│ │ ├── chatbot/
│ │ └── receipt/
│ ├── services/
│ ├── api/
│ ├── vectorstore/
│ └── core/
├── frontend/
│ └── src/
│ ├── features/
│ │ ├── chatbot/
│ │ └── receipt/
│ ├── shared/
│ ├── hooks/
│ └── components/
├── tests/
│ ├── chatbot/
│ └── receipt/
├── Dockerfiles, CI/CD, .envs
Ideal For:¶
- AI apps with multiple pipelines (OCR + GPT + vector search)
- Shared embedding or file logic
- Production-ready Chatbots, Invoice Parsers, or Document RAG tools
Growth Path:¶
- Add monorepo tools:
nx
,TurboRepo
, orpnpm workspaces
- Use
shared-schemas/
orshared-utils/
across frontend + backend
Bootstrapping Tips¶
Task | Tool |
---|---|
Dev containers | .devcontainer/ + VSCode Remote |
Dockerized local dev | docker-compose.yml with separate frontend and backend services |
Env management | .env per app, dotenv in Python, Vite env vars in React |
Linting & Formatting | black , ruff (Python), eslint , prettier (JS) |
Monorepo support | pnpm workspaces or TurboRepo |
Types & validation sharing | zod or pydantic in shared-schemas |
GitHub Repo Format Recommendation¶
Structure your repo like so:
ai-app-starter/
├── apps/
│ ├── frontend/
│ └── backend/
├── packages/
│ ├── shared-schemas/
│ └── shared-utils/
├── .github/
│ └── workflows/
│ ├── test.yml
│ └── deploy.yml
├── docker-compose.yml
├── README.md
Final Advice¶
- Structure reflects team dynamics. Modular for individuals, scalable for squads.
- Structure is a trade-off map. No “right” answer, only intentional trade-offs.
- Structure is code philosophy. Enforce conventions that encode your values: reusability, clarity, testability.