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.

Related implementation resources: AI Use Case for Software Agencies Using Github Copilot To Accelerate Boilerplate Code Generation for New Client Mvps and Using Skill Files to Stop SQL Injection in Generated Backend Code.

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.