Angular Material + FastAPI Compliance Dashboard CLAUDE.md Template

Overview

Direct answer: This CLAUDE.md template provides a copyable Claude Code starter to scaffold a Compliance Dashboard built with Angular Material on the frontend and FastAPI on the backend. It codifies architecture, security, testing, and deployment rules for a modern Angular Material + FastAPI stack.

The CLAUDE.md template is designed to be paste-ready. It delivers a complete skeleton with a frontend and backend, plus a concrete set of constraints Claude Code should follow to generate a clean, production-ready project.

When to Use This CLAUDE.md Template

• You're building a compliance dashboard that requires a modern Angular Material UI and a RESTful API backend.
• You want a copyable Claude Code instruction block to generate a starter project with architecture, file structure, and deployment rules.
• You need consistent security, validation, and deployment guidelines across frontend and backend.
• You prefer a monorepo structure with separate frontend and backend apps.

Copyable CLAUDE.md Template

# CLAUDE.md
Project role: You are Claude Code. Produce a complete starter repository for a compliance dashboard using Angular Material (frontend) and FastAPI (backend). Provide a ready-to-paste Claude Code block that creates a skeleton with architecture rules, file structure, authentication, database, validation, security, testing, deployment, and clear "do not" rules.

Architecture rules:
- Monorepo with two apps: apps/frontend (Angular Material) and apps/backend (FastAPI).
- Backend uses FastAPI, Pydantic for validation, SQLAlchemy for ORM, Alembic for migrations, PostgreSQL as the database.
- Frontend uses Angular (14+), Angular Material, and a small shared UI library for components and styles.
- Use environment-based configuration and a single source of truth for API URL.

File structure rules:
- Root contains apps/frontend, apps/backend, and infra as needed.
- Frontend contains src/app with components, services, and modules.
- Backend contains main.py, api/, models/, schemas/, services/, and config/.
- Include Dockerfile for frontend and backend, and a docker-compose.yml for local development.

Authentication rules:
- Use OAuth2/OIDC with JWT access tokens for API access.
- Frontend stores tokens securely (httpOnly cookies preferred; if not possible, store in memory with rotation).
- Backend validates JWT on protected endpoints via Authorization: Bearer tokens.
- Implement refresh tokens flow with short-lived access tokens.

Database rules:
- PostgreSQL with SQLAlchemy models and Alembic migrations.
- Use migrations for schema changes; define created_at and updated_at timestamps.
- Do not seed production credentials in code; use env vars.

Validation rules:
- Pydantic models on backend; ensure strict typing with validators.
- DTOs for input/output; sanitize all inputs on API.
- Frontend form validation restricted to explicit controls; error messages consistent.

Security rules:
- Enable CORS for frontend domain; disallow wildcard origins in production.
- Use HTTPS in deployment; disallow insecure endpoints.
- Do not expose internal errors; provide user-friendly messages.
- Do not disable CSRF protection if cookies are used for auth.

Testing rules:
- Backend tests with pytest; use TestClient for endpoints.
- Frontend tests with Cypress or Jest + Testing Library.
- Include at least one end-to-end test for login and data fetch flow.
- CI should run lint, tests, and type checks.

Deployment rules:
- Use multi-stage Dockerfiles; separate frontend and backend builds.
- Provide docker-compose for local dev and Kubernetes manifests for prod (optional).
- Environment variables must be injected securely; avoid hard-coded secrets.
- Do not deploy with debug mode enabled.

Things Claude must not do:
- Do not generate insecure auth flows.
- Do not bypass type checks or validation.
- Do not include production secrets in code or images.
- Do not assume external services without configuration.

Recommended Project Structure

angular-material-fastapi-compliance-dashboard/
  frontend/
    src/
      app/
        components/
        modules/
        services/
        models/
        pages/
      index.html
    angular.json
    package.json
    tsconfig.json
  backend/
    app/
      main.py
      api/
      models/
      schemas/
      services/
      core/
    requirements.txt
    alembic.ini
  infra/
    postgres/
      init.sql
  docker/
    frontend.Dockerfile
    backend.Dockerfile
    docker-compose.yml

Core Engineering Principles

• Single source of truth for API endpoints and UI tokens; shared data models across frontend and backend.
• Secure by default: JWT authentication, least privilege, and proper validation on all inputs.
• Explicit contracts between frontend and backend via Pydantic models and TypeScript interfaces.
• Idempotent actions and clear error handling; backend returns meaningful error codes without leaking internals.
• Automated testing and CI/CD; tests cover unit, integration, and end-to-end flows.

Code Construction Rules

• Frontend Angular code must use Angular Material components and reactive forms with validation.
• Backend FastAPI endpoints must use Pydantic models for request/response bodies and path/query validation.
• Do not bypass type checks; both TypeScript and Python typings are enforced in CI.
• Follow a consistent file naming convention: kebab-case for files, PascalCase for classes where appropriate.
• Do not hard-code secrets; load from environment variables via a config module.

Security and Production Rules

• Enable CORS with explicit origins; do not use wildcard in production.
• Use HTTPS in all deployments; enforce secure cookies if using cookies for tokens.
• Regularly rotate JWT signing keys; implement token revocation strategy if required.
• Audit logs and monitoring; do not expose verbose stack traces to clients.

Testing Checklist

• Backend: unit tests for models and validators; integration tests for API endpoints using FastAPI TestClient.
• Frontend: unit tests for components/services; end-to-end tests for login and data fetch using Cypress/Jest.
• CI: lint, type checks, unit tests, and a basic end-to-end smoke test.

Common Mistakes to Avoid

• Rushing to add features without validating inputs or securing endpoints.
• Neglecting environment-based configuration in Docker/CI.
• Using global state for auth tokens; prefer a centralized auth service.
• Over-securing or misconfiguring CORS leading to blocked legitimate frontend requests.

FAQ

What is this CLAUDE.md Template for?

A copyable CLAUDE.md starter for a full-stack Angular Material frontend and FastAPI backend compliance dashboard.

Which stack does this template target?

Angular Material frontend and FastAPI backend with PostgreSQL via SQLAlchemy.

What should I paste into CLAUDE.md?

Paste the copyable CLAUDE.md template block exactly as shown to scaffold the project along with rules.

Does this template include deployment guidance?

Yes; it includes Docker-based deployment rules and a basic docker-compose setup for local development.

What tests are recommended?

Backend tests with pytest, frontend tests with Cypress/Jest, and CI validation for linting and typing.

What are the security constraints?

JWT-based auth, secure storage of tokens, proper validation, CORS control, and error handling without exposing internals.