Angular Material + Django AI Dashboard CLAUDE.md Template

Overview

CLAUDE.md Template for the Angular Material + Django AI Dashboard stack provides a copyable Claude Code instruction block you can paste into CLAUDE.md to bootstrap a Django backend (with Django REST Framework) and an Angular Material frontend. This page is a complete starter with architecture, file structure, and security guidelines tailored for a Django-based AI dashboard paired with a polished Angular UI.

Direct answer: This CLAUDE.md Template delivers a ready-to-paste Claude Code block and explicit stack rules to get an Angular Material frontend talking to a Django AI dashboard backend securely and scalably.

When to Use This CLAUDE.md Template

• You are building an AI-powered admin dashboard using Angular Material on the frontend and Django REST Framework on the backend.
• You need a consistent CLAUDE.md template block to onboard developers quickly.
• You require explicit rules for architecture, authentication, database, validation, and deployment for this stack.
• You want a stack-specific recommended project structure and security guidance.

Copyable CLAUDE.md Template

# CLAUDE.md

Project role: Frontend + Backend AI Dashboard Architect (Angular Material + Django)

Architecture rules:
- Use Django REST Framework to expose a clean API layer & JWT-based authentication. Angular Material frontend consumes /api endpoints.
- Maintain a clear separation between frontend and backend; run on separate ports in development; behind a reverse proxy in production.
- Prefer RESTful endpoints with versioning v1, v2 as needed.
- Use DRF routers; keep business logic in services, not in views.

File structure rules:
- backend/ contains Django project, apps, requirements.txt, and docker configs.
- frontend/ contains Angular app with Angular Material UI, package.json, and environment files.
- docker-compose.yml wires backend + frontend for local development; CI uses separate pipelines.
- CLAUDE.md is placed at the repository root next to README.md.

Authentication rules:
- Django REST Framework Simple JWT for access/refresh tokens.
- Store tokens in HttpOnly cookies where possible; rotate refresh tokens; disable CSRF for API if using token auth with proper CORS.
- Enforce HTTPS in production; set SECURE_COOKIE and CSRF_COOKIE properly.

Database rules:
- PostgreSQL with proper migrations; use Django models with related constraints; run migrations in startup scripts for deployments.
- Use environment-based DATABASE_URL; avoid hard-coded credentials.

Validation rules:
- DRF serializers enforce required fields, value ranges, and cross-field validation.
- Server-side validation must be authoritative; never rely solely on client-side validation.

Security rules:
- Do not commit secrets or keys; fetch from environment vars; set ALLOWED_HOSTS and SECURE_HSTS_SECONDS.
- Enable security middleware (SecurityMiddleware, CSRF, X-Content-Type-Options, etc.).
- Use CSP headers to restrict sources for scripts/styles.

Testing rules:
- Django: unit tests for models/serializers, integration tests for API endpoints.
- Angular: unit tests with Jasmine/Karma; end-to-end tests with Cypress for critical flows.
- Run tests in CI; ensure tests run on push/PR.

Deployment rules:
- Docker Compose stack: backend + frontend; migrations run on container startup; collectstatic for Django; build frontend assets.
- Use environment variables for SECRET_KEY, DATABASE_URL, and API keys; rotate credentials periodically.
- Health checks for both services; fallback strategies in production.

Things Claude must not do:
- Do not modify DB schema without migrations; do not bypass authentication checks; do not expose SECRET_KEY or database credentials in code; do not skip tests; do not enable DEBUG in production.

Recommended Project Structure

backend/
  manage.py
  django_project/
    settings.py
    wsgi.py
  requirements.txt
  apps/
    ai_dashboard/
      __init__.py
      models.py
      serializers.py
      views.py
      urls.py
      migrations/
frontend/
  angular-app/
    src/
      app/
        components/
        pages/
      assets/
    angular.json
    package.json
    tsconfig.json
docker-compose.yml
Dockerfile.backend
Dockerfile.frontend

Core Engineering Principles

• Clear separation of concerns between Angular Material UI and Django API backend.
• Config-as-code and reproducible builds across environments.
• Security-by-default with strong authentication and encrypted secrets.
• Strong typing, validation, and explicit contracts between frontend and backend.
• Observability through structured logging, metrics, and traceability.
• Automated testing for backend and frontend with CI integration.

Code Construction Rules

• Frontend must use Angular Material components for consistent UI patterns.
• Backend must expose a versioned REST API (e.g., /api/v1/).
• Models and serializers must include validation and error handling; avoid business logic in views.
• Authentication uses JWT with HttpOnly cookies and proper CSRF handling for SPA.
• Environment-based configuration; never commit secrets.
• Migrations must be used for all schema changes; backfill data with fixtures if needed.

Security and Production Rules

• Enable HTTPS and HTTP Strict Transport Security (HSTS) in production.
• Use Django security middleware, CSP headers, and secure cookies.
• Limit API surface with proper permissions and throttling; audit admin access.
• Store secrets via environment variables or a secret manager; rotate keys regularly.
• Regularly scan dependencies for vulnerabilities; pin dependency versions.

Testing Checklist

• Backend: unit tests for models/serializers, integration tests for API endpoints, and migrations tests.
• Frontend: unit tests for components/services, integration tests for UI flows, and Cypress end-to-end tests.
• Deployment: smoke tests post-deploy, health-check endpoints, and rollback procedures.

Common Mistakes to Avoid

• Assuming frontend validation is sufficient; always enforce server-side validation.
• Storing credentials in source code or environment files not loaded in production.
• Ignoring API versioning and inconsistent data contracts.
• Forgetting to run migrations in development and CI environments.
• Neglecting security headers and CSRF considerations for SPA backends.

FAQ