CLAUDE.md Template: Angular Material + FastAPI Voice Assistant Starter

Overview

CLAUDE.md template for building a voice assistant with Angular Material frontend and FastAPI backend. This page provides a copyable CLAUDE.md block, a stack-specific project structure, and Claude Code rules for this stack.

Direct answer: This CLAUDE.md Template gives you a ready-to-paste CLAUDE.md block and concrete stack-specific constraints to guide development from bootstrapping to deployment.

When to Use This CLAUDE.md Template

• Starting a voice-enabled SPA with Angular Material for UI and FastAPI for backend.
• Need a copyable CLAUDE.md block to accelerate Claude Code integration.
• Want stack-specific project structure and deployment guidance.

Copyable CLAUDE.md Template

# CLAUDE.md

Project role: You are a Claude Code expert helping to bootstrap a voice assistant using Angular Material for the UI and FastAPI for the backend.
Architecture rules:
- Frontend: Angular Material app with voice UI using Web Speech API; calls backend endpoints
- Backend: FastAPI with endpoints for voice processing, intents, and responses
- Use JWT-based authentication for protected endpoints

File structure rules:
- frontend-angular-material-app/
  src/app/
  angular.json
  package.json
- backend-fastapi-app/
  main.py
  app/routers/
  app/models/
  app/schemas/

Authentication rules:
- Login returns a JWT token
- Protected endpoints require Bearer token

Database rules:
- Use SQLAlchemy models; migrations via Alembic
- SQLite for development, PostgreSQL for production

Validation rules:
- Pydantic models with strict typing

Security rules:
- Enable TLS in production
- Do not log secrets
- Sanitize all inputs

Testing rules:
- Unit tests for frontend components and backend endpoints
- Integration tests for voice flow

Deployment rules:
- Docker Compose with frontend and backend services
- Use env vars for secrets

Things Claude must not do:
- Do not bypass authentication
- Do not expose secrets
- Do not assume default credentials

Recommended Project Structure

frontend/
  angular-material-frontend/
    angular.json
    package.json
    tsconfig.json
    src/
      app/
        components/
        services/
        pages/
      index.html
      styles.css
backend/
  fastapi-backend/
    main.py
    app/
      routers/
      models/
      schemas/
    requirements.txt
    alembic/

Core Engineering Principles

• Explicit types and validation across TypeScript and Python
• Single source of truth for data models
• Fail-fast error handling and clear error messages
• Secure by default with proper authentication and input sanitization
• Clear separation between frontend and backend concerns

Code Construction Rules

• Frontend uses Angular Material components for UI consistency
• Backend endpoints are typed with FastAPI and Pydantic models
• Do not access DOM directly from TypeScript; use Angular patterns
• Environment-based configuration for all secrets
• Backend uses SQLAlchemy; migrations via Alembic

Security and Production Rules

• Enable TLS certificates and HSTS in production
• JWT-based authentication for API endpoints
• Validate and sanitize all user inputs
• Enforce CORS policy to trusted frontend domains

Testing Checklist

• Unit tests for frontend components and services
• Unit tests for FastAPI endpoints (pytest)
• Integration tests for voice command flow
• CI verification for build, test, and lint

Common Mistakes to Avoid

• Assuming default credentials or exposing secrets
• Overly broad CORS or permissive authentication
• Skipping migrations or keeping stale schemas
• Fracturing the stack with non-standard file layouts

FAQ