Angular Material + FastAPI Approval System CLAUDE.md Template

Overview

CLAUDE.md template is a copyable Claude Code prompt for building an Angular Material + FastAPI Approval System. It covers the stack: Angular Material frontend, FastAPI backend, PostgreSQL database, and an approval workflow API.

When to Use This CLAUDE.md Template

• When scaffolding a secure, auditable approval workflow between an Angular Material UI and a FastAPI REST API
• When you want a ready-to-paste Claude Code block that enforces architecture and security constraints
• When you need a stack-specific project structure and testing guidelines

Copyable CLAUDE.md Template

# CLAUDE.md
Project Role: Full-stack Engineer for Angular Material + FastAPI Approval System
Architecture Rules:
- frontend is an Angular Material SPA that communicates with the backend via REST
- backend is a FastAPI service exposing /v1/approvals endpoints
- database: PostgreSQL with a dedicated approvals schema
- all data flows must be validated on both sides
- use token-based auth (OAuth2 or JWT Bearer) for API calls
- do not embed secrets in the client
- log and trace API calls with structured logs
File Structure Rules:
- place frontend under frontend/ and backend under backend/
- frontend must have a clean module and feature structure with strictly typed services
- backend must define routers, models, schemas, and a core config module
- avoid circular imports and ensure deterministic import order
Authentication Rules:
- use OAuth2PasswordBearer or JWT Bearer tokens
- endpoints protected by dependency injection that validates tokens
- refresh tokens must be rotated
Database Rules:
- PostgreSQL database with tables approvals, approvals_history, users
- enforce foreign keys, proper indexing (btree on id, created_at)
- use async DB access where possible
Validation Rules:
- Pydantic models (BaseModel) for all request bodies
- validate all path params and query params
- reject unknown fields unless explicitly allowed
Security Rules:
- enforce HTTPS in production
- use secure cookies for session-based flows
- CSRF protection for cookie-based sessions
- limit request size and rate-limit sensitive endpoints
Testing Rules:
- unit tests for utilities and validators
- integration tests for API endpoints using TestClient
- e2e tests for the approval flow using a headless browser if feasible
Deployment Rules:
- Docker compose for local development
- separate containers for frontend and backend
- run migrations on startup
- health checks and graceful shutdowns
Things Claude Must Not Do:
- do not bypass model validation
- do not implement insecure authentication or hardcoded secrets
- do not couple frontend and backend with shared business logic in the UI layer

Recommended Project Structure

angular-material-fastapi-approval/
├── frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── components/
│   │   │   ├── services/
│   │   │   └── app.module.ts
│   │   ├── assets/
│   │   └── index.html
│   ├── angular.json
│   └── package.json
├── backend/
│   ├── app/
│   │   ├── api/
│   │   │   └── v1/
│   │   │       ├── approvals.py
│   │   │       ├── auth.py
│   │   │       └── __init__.py
│   │   ├── models/
│   │   ├── schemas/
│   │   └── main.py
│   ├── requirements.txt
│   └── migrations/
└── docker/
    ├── docker-compose.yml
    ├── frontend.Dockerfile
    └── backend.Dockerfile

Core Engineering Principles

• Explicit contracts between Angular Material frontend and FastAPI backend
• Strong typing and validation on both sides
• Security by default with token-based auth and proper data access controls
• Observability through structured logs and clear error handling
• Testability with unit, integration, and end-to-end checks

Code Construction Rules

• Frontend: TypeScript strict mode, typed HttpClient calls, and RxJS with proper error handling
• Backend: FastAPI routers with clear dependencies, Pydantic models for all payloads
• Database: PostgreSQL with well-defined schemas and migrations; avoid raw SQL whenever possible
• Validation: validate path, query, and body data at the API boundary
• Architecture: place business logic in services, keep routes thin
• Do not: introduce tight coupling between frontend logic and backend models

Security and Production Rules

• Enforce HTTPS and HSTS in production
• Use OAuth2/JWT tokens for API authentication; prefer HttpOnly cookies when applicable
• Enable CSRF protection if cookies are used; otherwise rely on Authorization header
• Store secrets in environment variables; never commit credentials
• Implement rate limiting and input validation to prevent abuse

Testing Checklist

• Unit tests for validators and utilities
• Integration tests for API endpoints using TestClient
• End-to-end tests for the approval workflow using a headless browser if feasible
• CI gates require passing tests before merge

Common Mistakes to Avoid

• Relying on client-side validation alone
• Exposing sensitive data in API error messages
• Hardcoding secrets or credentials
• Creating monolithic code that mixes UI and business logic

FAQ

1. Q: What is this CLAUDE.md Template for Angular Material + FastAPI?

   A: A copyable Claude Code prompt that scaffolds an approval system with an Angular Material frontend and a FastAPI backend, with PostgreSQL as the database.

2. Q: Which stack is covered?

   A: Angular Material frontend with a FastAPI backend and PostgreSQL database for approvals.

3. Q: What should Claude avoid?

   A: Do not bypass validation, expose secrets, or create insecure authentication or tightly coupled frontend-backend logic.

4. Q: How is authentication handled?

   A: Token-based auth (OAuth2/JWT) with proper scopes; endpoints protected via dependency injection.

5. Q: How are tests defined?

   A: Unit tests for API validators, integration tests for endpoints, and end-to-end tests for the approval flow.