CLAUDE.md Template: Angular Material + Django REST Framework

Overview

The CLAUDE.md template for Angular Material + Django REST Framework is a copyable Claude Code starter that codifies a modern full-stack architecture: Angular Material UI on the frontend and a Django REST Framework API backend. It includes a ready-to-paste CLAUDE.md block, a stack-specific project structure, authentication, validation, and deployment guidance designed for a clean, scalable frontend/backend integration.

Direct answer: This template delivers a complete CLAUDE.md instruction set to scaffold a secure, testable Angular Material + DRF project with clear file layout, auth, and deployment rules.

When to Use This CLAUDE.md Template

• You are starting a new Angular Material UI with a Django REST Framework API.
• You want a single CLAUDE.md block to copy into Claude Code for consistent scaffolding.
• You need a stack-specific project structure, authentication, and deployment rules ready to implement.
• You require a template that emphasizes security, validation, and testability from day one.

Copyable CLAUDE.md Template

# CLAUDE.md

Project role: Full-stack engineer responsible for Angular Material frontend and Django REST Framework backend.

Architecture rules:
- Use Django REST Framework for all API endpoints with ViewSet-based controllers.
- Authenticate using JWT (drf-simplejwt) with access/refresh tokens and HttpOnly cookies.
- Frontend uses Angular Material for UI components, theming, and responsive layouts.
- Endpoints follow REST conventions and versioned paths under /api/v1/.
- Enable CORS for the Angular domain and enforce CSRF protection on state-changing calls.
- Enforce strict input validation on all serializers and form models.
- Use environment-based configuration and secret management (e.g., environment variables).

File structure rules:
- Root contains backend/ and frontend/ folders.
- backend/ is a Django project (e.g., drf_project/) with apps like api/.
- frontend/ is an Angular workspace with modules for features and shared UI.
- Use clear module boundaries: api/ (backend), ui/ components, services, models (frontend).
- Include a single .env.example and a README with install steps.

Authentication rules:
- DRF: JWT-based authentication with access/refresh tokens.
- Backend must expose an /api/v1/auth/ endpoints for login, refresh, and logout.
- Frontend must store tokens in HttpOnly cookies and send them with requests; CSRF token must be included for state-changing calls.
- All protected endpoints require valid authentication; otherwise return 401.

Database rules:
- Use PostgreSQL in production; use migrations for schema changes.
- Do not store plaintext passwords; rely on Django's authentication system.
- Enforce unique constraints where appropriate and validate per-model constraints.

Validation rules:
- DRF serializers must implement field-level validators and an overall validate() method.
- Client-side forms must reflect server-side validation messages.
- Ensure server-side validation for all inputs and proper error codes.

Security rules:
- Use HTTPS in all environments; set SECURE_SSL_REDIRECT, CSRF_COOKIE_SECURE, and SESSION_COOKIE_SECURE.
- Set ALLOWED_HOSTS, Content-Security-Policy, and X-Content-Type-Options headers.
- Keep SECRET_KEY secret and load from environment variables.
- Do not enable risky Django shortcuts (e.g., DEBUG=True in production).

Testing rules:
- Backend: unit tests for models/serializers, integration tests for API endpoints, and authentication tests.
- Frontend: unit tests for services and components; integration tests for API calls; end-to-end tests where feasible.
- CI should run lints, tests, and a small build check before merge.

Deployment rules:
- Deploy with Gunicorn and Nginx; use a process manager and proper static file handling.
- Use containerization (Docker) for reproducible builds if possible; configure separate prod/dev environments.
- Collect logs and monitor API endpoints; implement health checks.

Things Claude must not do:
- Do not bypass authentication or expose protected endpoints publicly.
- Do not generate models or serializers without migrations.
- Do not rely on deprecated DRF features; avoid insecure defaults.
- Do not hard-code secrets or API keys in code blocks.

Recommended Project Structure

project-root/
  frontend/
    angular.json
    package.json
    src/
      app/
        components/
        pages/
        services/
        shared/
  backend/
    manage.py
    config/
      settings.py
      urls.py
    apps/
      accounts/
      api/
      core/
    requirements.txt
  docker-compose.yml
  .env.example
  CLAUDE.md

Core Engineering Principles

• Keep Angular UI concerns separate from Django REST Framework API concerns.
• Use explicit serializers, typed request contracts, and versioned API routes.
• Make authentication, authorization, validation, and error handling visible in the architecture.
• Prefer small, testable services over large viewsets with mixed business logic.

Code Construction Rules

• Use Django REST Framework serializers for all request and response validation.
• Use ViewSets or APIViews consistently; do not mix patterns without a clear reason.
• Keep Angular Material components thin and move API calls into typed services.
• Use environment-driven configuration for API URLs, CORS, JWT settings, and database credentials.

Security and Production Rules

• Use JWT access and refresh tokens with secure cookie or header handling.
• Restrict CORS to approved frontend origins and keep CSRF rules explicit.
• Never commit Django secret keys, database passwords, or token signing secrets.
• Disable debug mode in production and configure secure headers, HTTPS, and logging.

Testing Checklist

• Test serializers, permissions, viewsets, and authentication flows with Django test tools or pytest.
• Test Angular services and components with realistic API response fixtures.
• Run migration checks, linting, frontend builds, and backend tests in CI.
• Add integration tests for protected API routes and frontend login flows.

Common Mistakes to Avoid

• Putting business logic directly in serializers or Angular components.
• Trusting frontend validation without repeating validation on the backend.
• Using wildcard CORS settings or debug defaults in production.
• Skipping migrations or generating models without corresponding tests.

FAQ

What is this CLAUDE.md template for?

It is a copyable Claude Code instruction block for building an Angular Material frontend with a Django REST Framework backend, including API structure, authentication, validation, testing, and deployment rules.

Can this template be used with JWT authentication?

Yes. The template expects JWT access and refresh tokens, protected API routes, clear permission classes, and secure handling of token storage between the Angular frontend and Django backend.

Does the template cover frontend and backend testing?

Yes. It recommends serializer, permission, and API tests for Django REST Framework, plus Angular component and service tests using realistic API fixtures.

Where should project-specific settings go?

Project-specific settings should live in environment variables or dedicated configuration files that are not committed with secrets. Django settings, frontend API URLs, CORS origins, and database credentials should be environment driven.