Angular Material + FastAPI ERP Dashboard - CLAUDE.md Template

Overview

CLAUDE.md template is a copyable Claude Code starter for the Angular Material + FastAPI ERP Dashboard stack. It defines how Claude should operate to generate, guide, and validate code for the frontend built with Angular Material and the backend built with FastAPI, enabling an ERP dashboard workflow.

Direct answer: This CLAUDE.md Template provides a stack-specific, copyable blueprint for Claude Code to assist in building an ERP dashboard using Angular Material on the frontend and FastAPI on the backend.

When to Use This CLAUDE.md Template

• Start a new ERP dashboard project with Angular Material UI and a FastAPI backend.
• Provide Claude Code with stack-specific constraints for consistent architecture.
• Document frontend-backend interfaces, authentication, and data validation in one place.
• Share a repeatable CLAUDE.md template across similar projects for speed and consistency.

Copyable CLAUDE.md Template

# CLAUDE.md
Project role:
- You are a senior frontend (Angular Material) and backend (FastAPI) engineer who can design, generate, and validate code for an ERP dashboard stack.
Architecture rules:
- Frontend uses Angular 16 with Angular Material; Backend uses FastAPI with Python 3.11+; Data stored in PostgreSQL.
- Maintain strict separation between UI (frontend) and API (backend) with clearly defined DTOs.
File structure rules:
- Do not include unrelated folders; keep frontend and backend in separate top-level directories.
- Frontend: src/app/modules/erp-dashboard, src/app/shared, assets; Backend: app/api/v1, app/models, app/schemas, core.
Authentication rules:
- Use JWT-based authentication with short-lived access tokens and refresh tokens; store tokens securely; attach Authorization headers on all API calls.
Database rules:
- PostgreSQL with SQLAlchemy models; use Alembic for migrations; use explicit relationships and constraints.
Validation rules:
- Backend: Pydantic models for request validation; frontend: TypeScript interfaces aligned with backend DTOs.
Security rules:
- Enable HTTPS; implement CORS with a tight policy; validate input; guard against SQL injection and XSS; avoid storing secrets in code.
Testing rules:
- Backend: pytest with fixtures; frontend: Jest + Testing Library; integration tests simulate UI interactions with API mocks; include end-to-end tests where feasible.
Deployment rules:
- Dockerize frontend and backend; use docker-compose for local dev; provide a lightweight production-ready Dockerfile; CI should run tests on PRs.
Things Claude must not do:
- Do not assume remote access to production secrets; do not bypass authentication; do not use deprecated Angular or FastAPI features; do not mix frontend and backend business logic in the same module; do not infer database schemas not defined by the API; do not generate code that violates the constraints above.

Recommended Project Structure

frontend/
  src/
    app/
      modules/
        erp-dashboard/
      shared/
    assets/
  index.html
  angular.json
  package.json
  tsconfig.json
backend/
  app/
    api/
      v1/
        endpoints/
        dependencies/
    core/
    models/
    schemas/
    main.py
requirements.txt
Dockerfile
docker-compose.yml
README.md

Core Engineering Principles

• Explicit typing and validation across frontend and backend.
• Separation of concerns: UI modules isolated from API logic.
• Idempotent operations and deterministic API calls.
• Documented interfaces and data contracts via CLAUDE.md templates.
• Testability by design with unit, integration, and E2E tests.

Code Construction Rules

• Frontend must use Angular Material components with accessible markup; avoid custom UI libraries unless part of the stack.
• Backend must expose typed Pydantic models for requests and responses; use SQLAlchemy for persistence.
• API routes should be RESTful with versioned paths (e.g., /api/v1/...).
• DTOs on the frontend must mirror backend schemas; no shape drift.
• Configuration via environment variables; do not hard-code secrets.
• Error handling should provide consistent error responses with codes and messages.

Security and Production Rules

• Use HTTPS in production; enforce secure cookies and CSRF protection where applicable.
• Limit CORS to the frontend domain; implement rate limiting on API endpoints.
• Validate all input; escape dynamic strings in UI and API responses; avoid eval or dangerous constructs.
• Rotate secrets; store them in a vault; never commit secrets to source control.
• Monitor dependencies for known vulnerabilities; pin versions to avoid drift.

Testing Checklist

• Unit tests for frontend components and services; unit tests for backend models and endpoints.
• Integration tests verifying API contracts and data stores.
• End-to-end tests simulating user interactions with the ERP dashboard.
• CI pipelines run tests on PRs; ensure build passes in production-like environment.

Common Mistakes to Avoid

• Overloading components with business logic; keep components lean and testable.
• Ignoring API contracts; UI changes must be reflected in both frontend and backend DTOs.
• Using global state unsafely; prefer explicit services with clear lifecycles.
• Neglecting authentication flows; ensure tokens, expiry, and refresh handling are correct.
• Inconsistent directory structure; maintain the separation between frontend and backend.

FAQ

What is this CLAUDE.md Template for Angular Material + FastAPI ERP Dashboard?

A copyable Claude Code starter that defines frontend Angular Material UI and backend FastAPI API patterns for an ERP dashboard.

What should I paste into CLAUDE.md?

Paste the entire copied CLAUDE.md block into your CLAUDE.md file to guide Claude Code for this stack.

Which files are required for the ERP dashboard starter?

Frontend: Angular app with Angular Material; Backend: FastAPI app with SQLAlchemy models; Shared API types in Pydantic.

How do I run this locally?

Install dependencies for frontend and backend, run frontend with ng serve and backend with uvicorn.

Is authentication using JWT recommended?

Yes. Use JWT tokens in Authorization headers, with short-lived access tokens and refresh tokens.