Angular Material + FastAPI Accounting Dashboard CLAUDE.md Template

Overview

Direct answer: This CLAUDE.md template provides a complete blueprint to build an Angular Material frontend + FastAPI backend for an accounting dashboard, with a PostgreSQL database, authentication, and containerized deployment. It defines stack-specific prompts and rules so Claude Code outputs are consistent and production-ready.

This page is a copyable CLAUDE.md template page for the Angular Material + FastAPI stack, designed to be pasted into CLAUDE.md to generate scaffolded code and contracts.

When to Use This CLAUDE.md Template

• You are building an accounting dashboard with an Angular Material UI and a FastAPI API.
• You want a repeatable CLAUDE.md prompt that yields frontend, backend, and DB scaffolding with tests.
• You require strict type safety, input validation, and secure authentication across layers.
• You plan to deploy with containerization (Docker) and an optional nginx reverse proxy.

Copyable CLAUDE.md Template

# CLAUDE.md

Project Role: You are a Senior Full-Stack Engineer responsible for delivering an Angular Material frontend and FastAPI backend for an Accounting Dashboard. Architect the system with a Postgres database, secure authentication, and containerized deployment. Produce a clean scaffold with files, folders, and code blocks ready to paste into CLAUDE.md.

Architecture Rules:
- Frontend: Angular with Angular Material, NgRx for state, and REST/HTTP API calls to FastAPI
- Backend: FastAPI with Pydantic schemas, SQLAlchemy for DB access, JWT authentication, and role-based authorization
- Database: PostgreSQL with clear schemas for users, accounts, transactions, and audit logs
- Deployment: Docker Compose for local dev; Dockerfiles for frontend/backend; Nginx as reverse proxy
- Claude Code output must be a single cohesive scaffold with minimal boilerplate but complete contracts

File Structure Rules:
- Maintain a clean separation: frontend/, backend/
- Each layer contains clear modules, services, tests, and configuration
- Do not mix concerns across frontend and backend folders

Authentication Rules:
- Use OAuth2 with Password flow or JWT Bearer tokens
- Store tokens securely; do not log tokens
- Validate tokens on each protected endpoint

Database Rules:
- Use PostgreSQL with well-defined schemas
- Enable migrations; track schema versioning
- Use parameterized queries to prevent SQL injection

Validation Rules:
- FastAPI: Pydantic models for requests and responses
- Angular: strict TypeScript types and forms validation; disable unchecked any types

Security Rules:
- Enforce HTTPS; configure CORS properly for frontend domain
- Do not expose sensitive secrets
- Implement rate limiting on API endpoints as appropriate

Testing Rules:
- Backend: unit tests with pytest; integration tests for DB
- Frontend: unit tests with Jasmine/Karma or Jest; end-to-end tests if possible
- Ensure tests run in CI and pass locally

Deployment Rules:
- Use docker-compose for local, Dockerfile for prod; use environment variables for secrets
- Configure health checks and logging

Things Claude Must Not Do:
- Do not hardcode credentials
- Do not bypass authentication or skip validation
- Do not rely on insecure defaults or outdated libs

Recommended Project Structure

project-root/
├── frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── components/
│   │   │   ├── modules/
│   │   │   ├── services/
│   │   │   ├── models/
│   │   └── main.ts
│   ├── angular.json
│   ├── package.json
│   └── tsconfig.json
├── backend/
│   ├── app/
│   │   ├── api/
│   │   │   ├── endpoints/
│   │   │   ├── routers/
│   │   │   └── dependencies/
│   │   ├── models/
│   │   ├── schemas/
│   │   └── main.py
│   ├── database/
│   │   └── migrations/
│   ├── requirements.txt
│   ├── Dockerfile
│   └── alembic.ini
├── infra/
│   ├── docker-compose.yml
│   └── nginx.conf
├── tests/
│   ├── backend/
│   └── frontend/
└── README.md

Core Engineering Principles

• Single source of truth: a clear contract between frontend and backend
• Type safety in both layers: TypeScript interfaces and Pydantic models
• Security by default: strong authentication, proper CORS, input validation
• Observability: structured logs, metrics, and health checks
• Automated testing: unit, integration, and end-to-end where feasible

Code Construction Rules

• Frontend components must consume a typed API client and use Angular Material components only for UI elements
• Backend endpoints must follow REST conventions and return typed responses
• Database access must be via SQLAlchemy with migrations
• Validation is enforced at API boundaries using Pydantic
• Environment-based configuration with secret management; avoid hardcoding secrets

Security and Production Rules

• Use HTTPS and proper TLS configuration in prod
• Enable CORS only for approved domains
• Protect endpoints with JWT/OAuth2; implement RBAC where needed
• Rotate secrets and use a secret manager in CI/CD
• Implement input validation and rate limiting

Testing Checklist

• Backend unit tests for models and validators
• Backend integration tests with a test database
• Frontend unit tests for components and services
• End-to-end tests with Playwright or Cypress if feasible
• CI runs tests and lints before merge

Common Mistakes to Avoid

• Skipping input validation and relying on client-side checks
• Ignoring secret management and hardcoding credentials
• Overly generic error messages that reveal internals
• Relying on outdated libraries or unsafe dependencies
• Not aligning frontend and backend contracts with the actual API

FAQ