CLAUDE.md Template: Angular Material + FastAPI Data Visualization App

Overview

A CLAUDE.md template for the Angular Material + FastAPI Data Visualization App provides a copyable Claude Code block to scaffold a production-ready UI and API workflow. This page is stack-specific and yields a ready-to-paste CLAUDE.md instruction block you can drop into Claude Code.

Direct answer: Use this CLAUDE.md Template to quickly boot a Claude Code workflow for a frontend built with Angular Material and a backend powered by FastAPI, with data visualization endpoints.

When to Use This CLAUDE.md Template

• When starting a new data visualization project that uses Angular Material for UI components and FastAPI for the backend.
• When you need a copyable CLAUDE.md block that covers architecture, file structure, auth, validation, and deployment for this stack.
• When you want consistent boilerplate that enforces security and testing guidelines for production-grade apps.

Copyable CLAUDE.md Template

# CLAUDE.md

Project role: You are Claude Code, guiding the build of an Angular Material frontend + FastAPI backend data-visualization app. Produce clean, production-ready code blocks, and avoid unsupported libraries.

Architecture rules:
- Frontend: Angular with Angular Material; Backend: FastAPI; Communication via REST API; Data visualisation panel renders data from API endpoints. Use JWT-based authentication. Backend models defined with Pydantic; ORM with SQLAlchemy; migrations via Alembic; database PostgreSQL.
- Deployments: Dockerized frontend and backend; use docker-compose for dev; env vars for secrets; run in HTTPS in prod.
- Environment: Separate config per environment; use .env files; never commit secrets.

File structure rules:
- Frontend: src/app, src/environments, src/styles; angular.json; tsconfig.json
- Backend: app, core, db, tests; requirements.txt

Authentication rules:
- Use OAuth2Bearer or JWT Bearer tokens; Token must be sent in Authorization header as Bearer .
- Backend exposes auth/login to obtain token; tokens expire and refresh flow should be documented.

Database rules:
- PostgreSQL with SQLAlchemy models; Alembic migrations; Do not use SQLite for production. Use environment variables for credentials.

Validation rules:
- Backend: All inputs validated by Pydantic models; On backend, strict type definitions; Validate all query params.

Security rules:
- Enforce HTTPS; Do not log tokens; Use CORS with allowed origins; Sanitize outputs; Rate limiting recommended; Do not expose raw error stacks.

Testing rules:
- Backend: pytest + TestClient for endpoints; frontend: Jasmine/Karma for unit tests; integration tests with Playwright or Cypress; CI runs tests on PRs.

Deployment rules:
- Build with docker; Use multi-stage Dockerfiles; Use docker-compose in dev; Deploy to cloud with proper environment vars; Use Docker secrets where possible.

Things Claude must not do:
- Do not implement security bypasses; Do not hardcode secrets; Do not bypass input validation; Do not modify production data; Do not assume default credentials; Do not generate production-ready secrets in code.

Recommended Project Structure

project-root/
├── frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── components/
│   │   │   │   └── data-visualization/
│   │   │   ├── services/
│   │   │   ├── app.module.ts
│   │   │   └── app.component.ts
│   │   └── index.html
│   ├── angular.json
│   └── package.json
├── backend/
│   ├── app/
│   │   ├── api/
│   │   │   └── endpoints/
│   │   ├── models/
│   │   └── schemas/
│   ├── core/
│   │   └── config.py
│   ├── tests/
│   ├── requirements.txt
│   └── Dockerfile
└── docker-compose.yml

Core Engineering Principles

• Clear separation of concerns between frontend and backend.
• Single source of truth for data models and UI state.
• Type safety and strict input validation with Pydantic and TypeScript types.
• Idempotent, testable components and endpoints.
• Secure by default: proper authentication, authorization, and data validation.

Code Construction Rules

• Frontend must use Angular Material components with accessible ARIA labels.
• Backend endpoints must validate inputs via Pydantic models and respond with proper HTTP status codes.
• Use JWT Bearer tokens for authentication; include token verification middleware.
• Database interactions via SQLAlchemy with Alembic migrations; never modify schema at runtime without migrations.
• All config via environment variables; secret values never hard-coded.
• Do not bypass CORS and security headers; ensure HTTPS in production.

Security and Production Rules

• Enforce TLS, secure cookies, and proper CORS policy.
• Mask and rotate secrets; store tokens securely; log minimal data in production.
• Use container runtime security best practices; scan images; limit privileges.
• Implement input validation, output encoding, and robust error handling to avoid information leaks.

Testing Checklist

• Backend: unit tests for models and endpoints with pytest; integration tests for data endpoints.
• Frontend: unit tests for components/services with Jasmine/Karma; accessibility checks.
• End-to-end: end-to-end tests to ensure data flow from API to charts works as expected.
• Linting and type checks run in CI; docker image builds validated in CI as well.

Common Mistakes to Avoid

• Hardcoding secrets or credentials in code or repository.
• Skipping input validation or returning generic 500 errors for bad input.
• Neglecting accessibility in UI components.
• Overfetching data or exposing sensitive fields via API responses.
• Ignoring migrations and direct schema changes in production.

FAQ