Angular Material + FastAPI D3 Dashboard CLAUDE.md Template

Overview

CLAUDE.md Template for Angular Material + FastAPI + D3 Dashboard. This page serves as a copyable CLAUDE.md template page optimized for Claude Code to scaffold a full-stack dashboard with a polished Angular Material UI, a FastAPI backend, and D3 visualizations.

When to Use This CLAUDE.md Template

• Starting a new dashboard project with Angular Material, FastAPI, and D3 charts
• Creating a consistent CLAUDE Code block for frontend, backend, and data endpoints
• Enforcing architecture, security, and testing guidelines from day one

Copyable CLAUDE.md Template

# CLAUDE.md
Project role: You are Claude Code guiding the Angular Material + FastAPI + D3 Dashboard project.

Architecture rules:
- Separate frontend (Angular Material) and backend (FastAPI) with clear API boundaries
- Backend exposes RESTful endpoints with OpenAPI specs; data contracts use Pydantic models
- Frontend consumes backend APIs and renders D3-based charts; components are modular
- Use a shared types layer where possible to ensure consistency across stacks

File structure rules:
- frontend/ contains an Angular workspace with src/app components, services, and modules
- backend/ contains FastAPI app with routers under app/api/v1 and models/schemas under app/models and app/schemas
- shared/ contains shared types and utilities used by both sides
- config/ contains environment and runtime configuration

Authentication rules:
- JWT tokens with HS256 signing
- Passwords stored with bcrypt; verify on login
- Backend validates tokens for protected endpoints; frontend sends Authorization header

Database rules:
- PostgreSQL as the primary database; SQLModel (or SQLAlchemy) used on the backend
- Use Alembic migrations; seed essential data
- Use connection pooling; avoid raw string concatenation

Validation rules:
- Server-side validation of request bodies with Pydantic models
- Client-side type checks with TypeScript; guard against invalid data

Security rules:
- CORS restricted to the frontend domain
- HTTPS in production; secrets in environment variables
- Do not expose DB credentials on the client
- Use secure cookies or token storage strategies where appropriate

Testing rules:
- Backend: pytest with fixtures for app and client
- Frontend: Angular tests with TestBed; component and service tests
- Integration tests for API endpoints and chart data routes
- CI should run tests, linting, and type checks

Deployment rules:
- Dockerize frontend and backend; use docker-compose for local dev
- CI/CD pipelines build and push images; run tests prior to deploy
- Use environment-specific configurations via env vars and config files

Things Claude must not do:
- Do not rely on browser-local storage for sensitive data
- Do not use Mongoose, Prisma, or other unsupported ORMs
- Do not skip input validation or trust client data
- Do not bypass authentication checks on protected endpoints

Recommended Project Structure

frontend/
  src/
    app/
      dashboard/
      components/
      services/
  angular.json
  package.json
  tsconfig.json
backend/
  app/
    main.py
    api/
      v1/
        endpoints/
        models/
        schemas/
        routers/
    core/
      config.py
      security.py
    database/
  requirements.txt
  Dockerfile
shared/
  types/
  utils/

Core Engineering Principles

• Explicit frontend/backend boundaries to reduce coupling
• Type safety and strict input validation across stack
• Automated tests for backend APIs and frontend components
• Clear versioning and explicit dependencies
• Idempotent operations and safe data handling for dashboards

Code Construction Rules

• Frontend uses Angular Material components with responsive layouts
• Backend uses FastAPI with Pydantic models and SQLModel/SQLAlchemy
• Define data contracts using shared types when possible
• Endpoints follow RESTful patterns with versioned paths (v1)
• Authentication via JWT; validate tokens on protected endpoints
• Enforce validation for request bodies and query params
• Avoid non maintained libraries; prefer official adapters and standard stacks
• Do not perform raw string concatenation for DB queries

Security and Production Rules

• Configure CORS to allow only the frontend domain
• HTTPS in production; secrets via environment variables
• Robust input validation and output encoding to prevent injection
• Structured logging for observability
• Rotate tokens and secrets; implement short lived access tokens

Testing Checklist

• Backend unit tests for models, schemas, utilities
• Backend integration tests for API endpoints with in-memory DB
• Frontend unit tests for components and services
• End to end tests for authentication and dashboard rendering
• CI runs tests, linting, and type checks

Common Mistakes to Avoid

• Relying on frontend for security controls only
• Skipping migrations or using in memory DB in prod
• Not validating inputs or relying on client side checks
• Overcomplicating architecture without necessity

FAQ

• What is this CLAUDE.md Template for? A copyable CLAUDE.md template to scaffold an Angular Material + FastAPI + D3 dashboard.
• Which stack does it cover? Angular Material UI, FastAPI backend, D3 charts, with Claude Code guidance.
• How do I use the CLAUDE.md block? Copy the CLAUDE.md block into your CLAUDE.md file and adapt paths and envs.
• What about security basics? JWT auth, bcrypt passwords, CORS, and secret management are included.
• How do I test and deploy? Unit/integration tests for backend and frontend; Docker Compose for local and CI/CD for prod.