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.

Related implementation resources: AI Use Case for Software Agencies Using Github Copilot To Accelerate Boilerplate Code Generation for New Client Mvps and Production-Grade SSO for Enterprise SaaS: Patterns.

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.