Angular Material + Django Auth App CLAUDE.md Template

Overview

A CLAUDE.md template is a copyable Claude Code blueprint that helps engineers scaffold a specific tech stack. This page provides a CLAUDE.md template tailored for an Angular Material frontend paired with a Django REST backend and Django authentication. It codifies architecture, file layout, security, validation, testing, and deployment rules so Claude Code can generate a production-ready starter kit with minimal drift.

Direct answer: This template yields a ready-to-paste CLAUDE.md block that you can drop into your Claude Code workflow to reproduce a consistent Angular Material + Django Auth App scaffold.

When to Use This CLAUDE.md Template

• Starting a new project that combines an Angular Material UI with a Django REST backend and Django authentication.
• Standardizing the initial CLAUDE.md instructions across multi-creator teams working on the same stack.
• Providing stack-specific constraints to Claude Code to avoid architectural drift.

Copyable CLAUDE.md Template

# CLAUDE.md

Project role: You are Claude Code. Your task is to generate a copyable CLAUDE.md template for an Angular Material + Django Auth App. Produce a complete, production-ready CLAUDE.md block that a developer can paste into Claude Code.

Architecture rules:
- Frontend: Angular 16+ with Angular Material. Scaffold with Angular CLI. Use Material components and responsive layout.
- Backend: Django 4.x with Django REST Framework. Use SimpleJWT for authentication. Expose REST endpoints under /api/. Use PostgreSQL as the database.
- Data exchange: JSON over HTTPS; enforce typed boundaries via serializers and interfaces.

File structure rules:
- frontend/ contains the Angular app (src/app, features, services, guards, interceptors).
- backend/ contains Django project, apps, serializers, views, urls, and migrations.
- shared/ holds cross-cutting utilities and environment configs.

Authentication rules:
- Sign-up: POST /api/auth/register
- Sign-in: POST /api/auth/login
- Token handling: Use HttpOnly cookies for access/refresh tokens. Do not store tokens in localStorage.
- Protected routes require a valid access token and appropriate Django permissions.

Database rules:
- PostgreSQL recommended. Use Django ORM and migrations.
- Never store plaintext passwords. Use Django's default password hasher.

Validation rules:
- Backend serializers validate required fields, types, and unique constraints.
- Frontend forms use Angular Reactive Forms with validators (required, email, minLength, maxLength).

Security rules:
- Enable CSRF protection on Django endpoints; restrict CORS to the frontend domain.
- Use HTTPS in production. Retrieve SECRET_KEY, DB_URL, and JWT_SIGNING_KEY from environment variables.
- Disable verbose error messages in production; log errors to a secure sink.

Testing rules:
- Backend: pytest-django tests for serializers, viewsets, and auth endpoints.
- Frontend: Jasmine/Karma unit tests for components/services; Cypress for end-to-end tests.
- Run tests in CI on push/PRs with coverage thresholds.

Deployment rules:
- Dockerized: docker-compose up (frontend, backend, postgres); collectstatic and migrate before starting.
- Backend uses Gunicorn; backend and frontend served via a reverse proxy (e.g., Nginx) in production.
- Secrets must be provided via environment variables or a secret manager; do not bake credentials into images.

Things Claude must not do:
- Do not rely on Mongoose, Prisma, or non-existent libraries in this stack.
- Do not bypass Django CSRF protection or expose tokens in insecure cookies.
- Do not generate endpoints that bypass authentication checks or permissions.
- Do not assume a different frontend framework or backend database beyond PostgreSQL for this pattern.

Recommended Project Structure

frontend/
  angular.json
  package.json
  tsconfig.json
  src/
    main.ts
    index.html
    styles.css
    app/
      app.module.ts
      app-routing.module.ts
      components/
      features/
      guards/
      services/
      interceptors/
backend/
  manage.py
  requirements.txt
  django_project/
    settings.py
    wsgi.py
  apps/
    accounts/
      models.py
      serializers.py
      views.py
      urls.py
  templates/
  static/
shared/
  config/
  enums/
  utils/

Core Engineering Principles

• Single source of truth: Clearly separate frontend and backend contracts via typed DTOs and serializers.
• Repeatable builds: Use CI/CD to automate lint, tests, and deployment; pin exact dependency versions.
• Type safety: Prefer TypeScript on the frontend and Python type hints on the backend; validate inputs at every layer.
• Security by default: Enforce CSRF, proper authentication, secure cookies, and secret management from the start.
• Observability: Structured logging, request tracing, and metrics for both frontend and backend.
• Declarative APIs: Maintain stable REST API contracts and clear versioning strategy.

Code Construction Rules

• Frontend must use Angular Material components and modern Angular routing patterns.
• Backend must implement DRF viewsets with permissions; use serializers for all data exchange.
• Authentication uses Django + DRF SimpleJWT; access tokens expire after a short window; refresh tokens rotate.
• Environment-specific configs must come from environment variables; avoid hard-coded secrets.
• Migrations must be part of the deployment flow; never run with an empty database in production.
• Code must be linted and tested in CI; enforce type checking and test coverage.
• If a library is not part of the stack, Claude must not introduce it.
• Do not hard-code host names or secrets in the source tree.

Security and Production Rules

• Use HTTPS in all environments; enforce secure cookies for tokens.
• Enable CSRF protection on Django endpoints and configure CORS strictly to the frontend.
• Harden Django by setting SECURE_PROXY_SSL_HEADER, X-Content-Type-Options, and Content-Security-Policy sparingly.
• Store secrets in a vault or environment management tool, not in code or images.
• Log sensitive events with redaction and forward to a secure log sink.

Testing Checklist

• Backend: unit tests for serializers and validators; integration tests for auth endpoints using DRF test client.
• Frontend: unit tests for components/services; integration tests for forms and HTTP services; E2E tests with Cypress.
• CI: run lint, type checks, tests, and build on every PR; require minimum coverage thresholds.
• Deployment: ensure migrations run, static assets collected, and services health-checked after start.

Common Mistakes to Avoid

• Omitting migrations or seeding data in development; assuming prod settings work locally.
• Exposing tokens in localStorage or debug endpoints; bypassing CSRF in production.
• Ignoring dependency pinning or forgetting to lock transitive dependencies.
• Using non-existent libraries or mixing Django versions with outdated DRF features.

FAQ

• What is this CLAUDE.md Template for? It provides a copyable Claude Code starter for building an Angular Material frontend with a Django authentication backend.
• Which stack does it target? Angular Material frontend with a Django REST Framework backend and Django authentication.
• How do I run tests? Run backend tests with pytest-django and frontend tests with Angular CLI Jest/Jasmine setup; use Cypress for E2E tests.
• How do I deploy? Use docker-compose to run frontend, backend, and PostgreSQL; collect static files and run migrations before startup.
• Can I customize the template? Yes. Adapt endpoints, models, and UI components to your project while maintaining the CLAUDE.md structure.