CLAUDE.md Template: Angular Material + Django Channels Starter

Overview

CLAUDE.md template for Angular Material + Django Channels is a copyable Claude Code starter designed for real-time Angular frontends backed by Django Channels websockets. It provides a complete, stack-specific instruction block you can paste into Claude Code to generate a consistent, secure implementation plan for this stack. Direct answer: this CLAUDE.md template defines the end-to-end workflow, file structure, validation, security, testing, and deployment rules for the Angular Material + Django Channels stack.

When to Use This CLAUDE.md Template

• Starting a real-time Angular Material project with a Django Channels backend.
• Documenting architecture decisions and deployment guidance for teams.
• Onboarding new developers with a standard CLAUDE.md template for this stack.

Copyable CLAUDE.md Template

# CLAUDE.md

Project role: You are Claude, a precise coding assistant. Your job is to produce a complete, copyable Claude Code instruction block for the Angular Material + Django Channels stack. Paste and run as-is in Claude Code.

Architecture rules:
- Use Django 4.x with channels for websockets, Redis as a channel layer backend, and Daphne as the ASGI server in development and production.
- Use PostgreSQL as the primary database; configure migrations and transactions; avoid raw SQL in app code except for read-only utilities.
- Use Django REST Framework for APIs; secure endpoints with JWT tokens and DRF permissions.
- Use Angular 15+ with Angular Material for frontend; communicate with backend APIs over HTTPS and real-time via WebSocket.
- All secrets must be sourced from environment variables; do not hardcode credentials.

File structure rules:
- Frontend lives under frontend/ with a standard Angular workspace layout.
- Backend lives under backend/ with Django apps; Channels routing under backend/channels/.
- Shared code under common/ or libs/ for validators and utilities.

Authentication rules:
- JWT-based authentication for REST APIs; refresh tokens; access tokens short-lived.
- WebSocket connections authenticated via token passed in query or headers; verify using Django channels auth and JWT verification.
- Do not expose login endpoints publicly beyond standard authentication flows.

Database rules:
- PostgreSQL with strict migrations; use Django ORM; avoid migrations that drop important data unintentionally in production.

Validation rules:
- Server-side validation via DRF serializers; client-side validation for UX with Angular forms.
- Validate input types/lengths, sanitize strings, reject unexpected fields.

Security rules:
- Enable CSRF protection for REST endpoints; use CSRF exempt only where appropriate.
- Use HTTPS; set Secure, HttpOnly cookies; configure Content-Security-Policy.
- Do not trust client-side secrets; rotate keys; monitor logs for anomalies.

Testing rules:
- Backend: pytest-django tests for models, serializers, views, and channels consumers.
- Frontend: Jasmine/Karma tests for components; test WebSocket behaviors with mocks.
- End-to-end: basic Cypress tests for critical real-time flows.

Deployment rules:
- Docker Compose with frontend and backend services; Daphne or Uvicorn ASGI server; Redis for channel layer.
- Use gunicorn or uvicorn as WSGI/ASGI worker in production; use Nginx as reverse proxy.
- Environment variables for configuration; separate dev/prod settings; health checks.

Things Claude must not do:
- Do not implement non-existent features; do not bypass authentication or CSRF.
- Do not propose insecure crypto or unsafe dependencies.
- Do not generate code that leaks secrets or hardcodes credentials.
- Do not misrepresent the stack scope; do not pretend to be a full production deployment guide.

Recommended Project Structure

angular-material-django-channels/
  frontend/
    src/
      app/
        modules/
          material/
        components/
        services/
      app.module.ts
      main.ts
    angular.json
    package.json
  backend/
    manage.py
    requirements.txt
    project/
      asgi.py
      settings.py
    apps/
      chat/
        models.py
        consumers.py
        routing.py
        views.py
      users/
        models.py
        serializers.py
        views.py
    docker/
      Dockerfile
      docker-compose.yml
  docker-compose.yml

Core Engineering Principles

• Single source of truth: Claude Code blocks map to a concrete, stack-specific setup.
• Explicit constraints: The template provides exact file structure rules and deployment steps.
• Idempotence: Claude Code should produce the same results when run against the same inputs.
• Security-minded: Emphasize secure defaults for authentication, CSRF, and deployment.
• Testability: Each rule supports test-driven development with unit/integration tests.

Code Construction Rules

• Frontend: Angular Material components should be used with TypeScript strict mode; components must be isolated, testable, and accessible.
• Backend: Django 4.x with channels, async consumers where appropriate, and ORM-based data access.
• Claude Code should reference stack-specific commands and environment variables; avoid hard-coded values.
• Use Docker and Docker Compose for dev and prod parity.
• Use proper typing, linting, and tests; avoid dynamic property additions.

Security and Production Rules

• CSRF protection for REST endpoints; use safe HTTP methods; configure CSRF cookies with Secure and HttpOnly attributes.
• HTTPS in all environments; use TLS; set HSTS; configure CORS to trusted origins only.
• Redis channel layer uses authentication; restrict access with ACLs; rotate Redis credentials.
• Secrets management: load from environment; avoid printed secrets; use secret management service in prod.
• Logging and monitoring: structured logs; error reporting; metrics in prod.

Testing Checklist

• Unit tests for Angular components; test Material UI interactions and forms.
• Backend unit tests for Django models/serializers; channels consumers tests with in-memory channel layer.
• Integration tests for REST endpoints and WebSocket real-time flows.
• Deployment Smoke tests: run docker-compose up -d and verify health endpoints.

Common Mistakes to Avoid

• Assuming real-time WebSocket behavior works without authentication; always verify token-based auth on WS.
• Overloading frontend with non-performant computations in components; keep UI responsive by using OnPush change detection.
• Ignoring server-side validation; do not rely on client-side validation alone.
• Using insecure defaults for Redis, database, or secrets in production.

FAQ

Which stack does this CLAUDE.md Template apply to?

Angular Material on the frontend with Django Channels on the backend for real-time WebSocket features.

What is the purpose of this template?

To provide a copyable Claude Code block that defines the rules, structure, and expectations for implementing this stack.

Where can I paste this CLAUDE.md?

Into Claude Code to generate a consistent implementation plan for the Angular Material + Django Channels stack.

Do I need Redis for channels?

Yes, Redis is typically used as the channel layer backend for Django Channels.

How do I test WebSocket flows?

Use Django Channels testing utilities and frontend integration tests to validate real-time behavior.