Angular Material + Django Ninja — CLAUDE.md Template

Overview

A CLAUDE.md template is a copyable Claude Code instruction block designed to scaffold a project for a specific stack. This page covers Angular Material front-end with a Django Ninja back-end, enabling a clean, secure full-stack setup.

Direct answer: This template provides a ready-to-paste CLAUDE.md that defines architecture, file structure, authentication, data validation, security, testing, and deployment rules for Angular Material + Django Ninja.

When to Use This CLAUDE.md Template

• Kickstart a full-stack project combining a modern Angular Material UI with a Django Ninja API.
• Standardize architecture, security, and testing practices for rapid onboarding of new developers.
• Provide a copyable Claude Code block for reproducible results across environments.

Copyable CLAUDE.md Template

# CLAUDE.md

Project role: You are Claude Code. You will generate a secure, maintainable Angular Material frontend with a Django Ninja backend API. This document is a copyable CLAUDE.md template for the stack.

Architecture rules:
- Separate frontend (Angular Material) and backend (Django Ninja).
- API endpoints must be clearly versioned under /api/v1/.
- Use JWT-based auth against Django Ninja endpoints; refresh tokens stored securely.
- Do not bypass authentication for protected data.
- All API responses must be versioned and typed.

File structure rules:
- frontend/ for Angular app; backend/ for Django Ninja API.
- src/app/ components, services, views organized by feature modules.
- backend/app/ api/ endpoints/ schemas/ models/ serializers/

Authentication rules:
- Use JWT tokens (access and refresh) with proper expiration.
- Implement /auth/login, /auth/refresh, /auth/logout endpoints.
- CSRF should be disabled for pure API endpoints; ensure CORS allowed origins are restricted.

Database rules:
- PostgreSQL recommended; use migrations; define models explicitly; use Django Ninja schemas.

Validation rules:
- Validate inputs with Pydantic-like Django Ninja schemas; serialize/validate on both sides.

Security rules:
- Enforce HTTPS; disable verbose error messages in production; use secure cookies.
- Limit CORS to known origins; implement rate limiting per IP if needed.

Testing rules:
- Unit tests for Django Ninja endpoints; integration tests for API contracts; frontend tests with Angular TestBed.
- End-to-end tests where feasible using headless browser.

Deployment rules:
- Dockerized services (frontend, backend); use Gunicorn with Django and NGINX in production.
- Environment variables for secrets; use Docker Compose in development.

Things Claude must not do:
- Do not expose secret keys in logs or code.
- Do not bypass authentication or skip input validation.
- Do not use deprecated Django settings in production.

Recommended Project Structure

frontend/
├─ angular.json
├─ package.json
├─ src/
│  └─ app/
│     ├─ components/
│     ├─ modules/
│     ├─ services/
│     └─ pages/
│        └─ shared/
│
backend/
├─ manage.py
├─ requirements.txt
├─ app/
│  ├─ api/
│  │  ├─ endpoints/
│  │  └─ schemas/
│  ├─ models/
│  └─ serializers/
└─ tests/

Core Engineering Principles

• Clear separation between frontend and backend responsibilities.
• Type safety and explicit contracts between API and UI.
• Secure authentication and authorization by default.
• Repeatable, auto-documented API endpoints with Claude Code templates.

Code Construction Rules

• Frontend must use Angular Material components for UI consistency.
• Backend endpoints must be defined with Django Ninja and typed pydantic-like schemas.
• All API calls must include proper error handling and status codes.
• Environment-based configuration; never hard-code secrets.

Security and Production Rules

• Enable HTTPS; configure secure cookies and HTTPOnly tokens.
• Restrict CORS to allowed origins; enforce rate limiting on sensitive endpoints.
• Use Django settings for allowed hosts, CSRF, and secret keys; keep them out of source control.

Testing Checklist

• Unit tests for Django Ninja endpoints and validators.
• Integration tests for API contracts between frontend and backend.
• Frontend component tests with Angular TestBed.
• End-to-end tests in CI for critical user flows.

Common Mistakes to Avoid

• Assuming Django REST Framework is required; Django Ninja is sufficient for typed APIs.
• Exposing API secrets or not securing environment variables.
• Skipping input validation on either side; unvalidated data leaks risks.

FAQ

Q1: What is this CLAUDE.md Template for Angular Material + Django Ninja?
A: It provides a paste-ready Claude Code block and guidance to build a secure, modular Angular Material frontend with a Django Ninja API backend.

Q2: Which tools do I need to install?
A: Node.js, npm, Python, Django, Django Ninja, and Angular CLI. Use virtualenv for Python.

Q3: How do I run the stack locally?
A: Start the Django Ninja backend, then run the Angular development server; ensure API base URL points to the backend.

Q4: How is authentication handled?
A: JWT-based authentication with access and refresh tokens; login via /auth/login; refresh via /auth/refresh.

Q5: How do I deploy?
A: Use Docker Compose for frontend and backend, gunicorn for Django, and NGINX as a reverse proxy.