CLAUDE.md Template: Angular Material + FastAPI Admin Dashboard

Overview

CLAUDE.md Template for Angular Material + FastAPI admin dashboard provides a complete, copy-paste ready CLAUDE.md block and structured guidance to scaffold a modern admin interface. It targets a frontend built with Angular Material and a backend powered by FastAPI, backed by PostgreSQL, with JWT/OAuth2 authentication and a clean data model shape via Pydantic.

Direct answer: This CLAUDE.md Template yields a reproducible full-stack starter that you can paste into Claude Code to generate a production-ready Angular Material UI + FastAPI backend scaffold with standardized security, validation, and testing rules.

When to Use This CLAUDE.md Template

• Starting a new admin dashboard project that uses Angular Material on the frontend and FastAPI on the backend.
• Standardizing CLAUDE.md instructions across full-stack projects for repeatable scaffolds.
• Educating Claude Code on the architecture and file layout for this stack to reduce dev-ops friction.

Copyable CLAUDE.md Template

# CLAUDE.md
- Project role: You are a Claude Code assistant tasked with generating a production-ready admin dashboard scaffold. You must output only code blocks and strictly follow architecture and security rules for Angular Material + FastAPI.
- Architecture rules:
  - Frontend: Angular Material SPA consuming a REST API from FastAPI
  - Backend: FastAPI with PostgreSQL, SQLAlchemy, Alembic migrations
  - Authentication: JWT/OAuth2; token refresh pattern
  - Data layer: PostgreSQL with SQLAlchemy models and Pydantic schemas
- File structure rules:
  - Top level: frontend/ and backend/
  - frontend/ contains Angular workspace files and src/ with app/, assets/, environments/
  - backend/ contains main.py, app/, models/, schemas/, core/, db/
- Authentication rules:
  - Use OAuth2PasswordBearer for login endpoints, JWT for access tokens, and refresh tokens with rotation
  - Environment-based secrets; never commit credentials
- Database rules:
  - PostgreSQL; use SQLAlchemy for ORM and Alembic for migrations
  - Enforce unique constraints and proper indexes on critical fields
- Validation rules:
  - Pydantic models on backend; DTOs for response shape; strict input validation on endpoints
- Security rules:
  - Enable CORS for frontend domain; CSRF not required with JWT in header; enforce TLS in prod
  - Secure headers; disable verbose error messages in prod
- Testing rules:
  - Backend: pytest with HTTPX for integration tests; unit tests for models
  - Frontend: Jest + Angular testing utilities; e2e tests where applicable
- Deployment rules:
  - Dockerized, with docker-compose for dev; Kubernetes manifests for prod if needed
  - Migrate database on startup; health checks enabled
- Things Claude must not do:
  - Do not generate hard-coded secrets; do not rely on localhost in production
  - Do not implement insecure authentication flows or inline credentials
  - Do not assume Prisma, Mongoose, or other non-core tools unless required by stack

# File examples
frontend/
backend/
- Do not mix frontend and backend config in a single file
- Do not ignore linting and type checks during generation

# End of CLAUDE.md block

Recommended Project Structure

frontend/
  angular.json
  package.json
  tsconfig.json
  src/
    main.ts
    index.html
    styles.css
    app/
      app.module.ts
      app-routing.module.ts
      components/
        admin-dashboard/
      pages/
      services/
      models/
    assets/
backend/
  Dockerfile
  docker-compose.yml
  requirements.txt
  main.py
  app/
    api/
      endpoints/
    core/
      config.py
      security.py
    db/
      database.py
    models/
      user.py
    schemas/
      user.py

Core Engineering Principles

• Define a clear separation between frontend and backend concerns; keep API contracts stable
• Favor explicit typing (TypeScript, Pydantic) and strong validation
• Prefer modular components and reusable UI patterns in Angular Material
• Automate tests for both frontend and backend; ensure CI enforces linting
• Use robust authentication/authorization patterns with tokens and rotation

Code Construction Rules

• Frontend uses strict TypeScript configuration and Angular Material components with a consistent design system
• Backend uses FastAPI endpoints with Pydantic models for request/response validation
• Define database models with SQLAlchemy and create Alembic migration scripts
• Endpoints must validate inputs, sanitize outputs, and return standard response shapes
• Use environment-based configuration and secret management; do not inline secrets
• All code must compile locally in dev and pass unit tests before export
• Follow non-functional requirements: performance, accessibility, and responsive design
• Do not introduce alternate ORMs or database abstractions unless necessary

Security and Production Rules

• Use HTTPS; enforce TLS in prod
• JWT tokens with short lifetimes and refresh rotation; store tokens securely
• Enable CORS for trusted frontend domains only
• Protect endpoints with proper authorization checks; avoid over-permissioned roles
• Use secure defaults for cookies and headers; disable verbose error output in prod

Testing Checklist

• Backend: unit tests for models, integration tests for API endpoints
• Frontend: unit tests for components/services; integration tests for UI flows
• End-to-end tests for login, data fetch, and admin dashboard interactions
• Linting and type checks run on CI; test coverage goals defined
• Deployment smoke tests to verify containers start and API responds

Common Mistakes to Avoid

• Overfetching data or under-fetching API endpoints; ignore API contracts
• Storing secrets in source control or client-side code
• Skipping migrations or using db seeds inconsistent with models
• Neglecting input validation on both client and server

Related implementation resources: AI Use Case for Software Agencies Using Github Copilot To Accelerate Boilerplate Code Generation for New Client Mvps and Skill files and templates for rapid, reliable FastAPI backend generation.

FAQ

What does this CLAUDE.md Template generate?

A ready-to-run CLAUDE.md block plus a full-stack scaffold for Angular Material frontend and FastAPI backend.

Which stack is targeted?

Angular Material on the frontend with a FastAPI backend and PostgreSQL database.

What are the key security guidelines?

JWT/OAuth2 for auth, proper CORS, TLS, secure storage of secrets, and sanitized inputs.

How do I productionize the template?

Follow deployment rules: Docker, docker-compose or Kubernetes manifests, db migrations, and CI/CD checks.

What should Claude not do?

Avoid hard-coded secrets, insecure endpoints, or non-standard libraries beyond the stack.