Angular Material + FastAPI Recharts Dashboard CLAUDE.md Template

Overview

CLAUDE.md template for Angular Material + FastAPI + Recharts dashboard. This page provides a copyable CLAUDE.md template that codifies architecture, file layout, and Claude Code rules for a production-grade stack where Angular Material powers the UI, FastAPI serves the API, and a Recharts-like charting experience is delivered via a React micro-frontend or Angular-compatible charts integration.

When to Use This CLAUDE.md Template

• Starting a new dashboard project that pairs an Angular Material frontend with a FastAPI API backend.
• Enforcing consistent Claude Code instructions across frontend, backend, and charting components.
• Standardizing security, validation, testing, and deployment practices for a data visualization platform.

Copyable CLAUDE.md Template

# CLAUDE.md

Project role: You are Claude Code, responsible for delivering a precise CLAUDE.md template for an Angular Material + FastAPI + Recharts dashboard. You generate clear, actionable rules that developers can implement directly.

Architecture rules:
- Separate frontend, backend, and charting concerns. Consider a React-based Recharts micro-frontend or an Angular compatible chart library with strict API contracts.
- Backend uses FastAPI with OpenAPI docs and async endpoints. JWT-based auth secures routes.
- Data flows via REST with JSON; charts consume API endpoints through a controlled gateway.

File structure rules:
- frontend-angular-material/
  - src/app/
  - src/styles.css
  - angular.json
- charts-mfe-react/
  - src/
  - package.json
- backend-fastapi/
  - main.py
  - app/
  - models/
  - routers/
- infra/
  - docker-compose.yml

Authentication rules:
- Use OAuth2 password flow with JWTs for access tokens. Refresh tokens are HTTP-only cookies.
- Protect all sensitive endpoints with dependency checks and proper scopes.

Database rules:
- Use PostgreSQL with SQLModel or SQLAlchemy. Define models in a separate models/ module and use Alembic for migrations.
- Never store plaintext secrets in code; use environment variables and a secret manager in prod.

Validation rules:
- Pydantic models for all request payloads and response schemas. Validate shapes, types, ranges, and required fields.
- Validate IDs, dates, and user input at the boundary; return structured error responses.

Security rules:
- Enable HTTPS, set strict CORS, and configure secure headers. Do not disable security checks in production.
- Do not expose secrets or keys in code or logs.

Testing rules:
- Backend: pytest for unit and integration tests; test API endpoints with realistic payloads.
- Frontend: unit tests with Angular TestBed; E2E tests with Cypress or Playwright.
- Charts: verify data correctness and rendering through integration tests.

Deployment rules:
- Docker Compose with services for frontend, backend, and charts. Use a reverse proxy like nginx with TLS.
- Use environment-specific configs; do not bake prod secrets into images.

Things Claude must not do:
- Do not hardcode credentials or API keys.
- Do not bypass authentication or authorization checks.
- Do not generate insecure default configurations for production.

Recommended Project Structure

/angular-material-fastapi-recharts-dashboard/
  /frontend-angular-material/
  /charts-mfe-react/
  /backend-fastapi/
  /infra/

Core Engineering Principles

• Clear separation of concerns between UI, API, and data visualization.
• Explicit contracts between frontend and backend via OpenAPI and typed DTOs.
• Type safety and immutable state where applicable.
• Reproducible builds and automated tests for every component.
• Security by default: proper auth, validation, and secure configuration.

Code Construction Rules

• Frontend must be Angular 16 with Material components and lazy-loaded modules for routes.
• Backend must be FastAPI with async endpoints and Pydantic models for validation.
• Charts can be a React micro-frontend using Recharts or an Angular compatible chart library; ensure a clean integration boundary.
• Use TypeScript for frontend code and Python typing for backend code.
• Follow a strict API naming convention and document endpoints in OpenAPI comments.

Security and Production Rules

• Use HTTPS with TLS certificates; configure a reverse proxy in prod.
• JWT-based authentication; protect all sensitive endpoints with proper scopes.
• Secret management via environment variables or a vault; avoid hardcoding secrets.
• Implement CORS policies that allow only the frontend origin(s).

Testing Checklist

• Backend unit tests cover validators and business logic; integration tests cover API endpoints.
• Frontend unit tests cover components, services, and guards; E2E tests cover critical user flows.
• Chart data rendering tests verify correct data mapping and edge cases.
• CI runs tests on PRs; production build uses production optimizations.

Common Mistakes to Avoid

• Mixing React charting logic directly inside Angular components; isolate with a micro-frontend or replace with a native Angular chart library.
• Neglecting OpenAPI contract drift between backend and frontend.
• Storing secrets in source code or Dockerfiles.
• Skipping input validation and treating user input as trusted.

FAQ

What is this CLAUDE.md Template for

It provides a copyable CLAUDE.md template for building an Angular Material + FastAPI + Recharts dashboard.

Can I use Recharts directly in Angular

Recharts is a React library; for Angular you should use a compatible charting library or host a React micro-frontend for charts.

How do I use this CLAUDE.md Template

Copy the Copyable CLAUDE.md Template block into your CLAUDE.md file and follow the code block instructions.

What deployment approach is recommended

Use Docker Compose to run a frontend Angular app, a React-based chart micro-frontend, and a FastAPI backend behind a reverse proxy.

Are there security tips

Enable JWT authentication, use HTTPS, configure proper CORS, and avoid exposing secrets.