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.

Related implementation resources: AI Use Case for Potter Studios Using Excel To Calculate Glaze Material Costs and Project Overall Price Margins Per Piece and How skill files guide dependency choices for production AI workflows.

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.