CLAUDE.md Template: Angular Material + FastAPI + Google Cloud Storage Starter

Overview

The CLAUDE.md template demonstrates a practical, copyable CLAUDE.md starter for Angular Material UI, a FastAPI backend, and Google Cloud Storage (GCS) for assets. It provides Claude Code prompts tailored to this stack and enforces a clean separation between frontend, API, and storage concerns.

Direct answer: This page delivers a copyable CLAUDE.md template for a full-stack Angular Material + FastAPI + GCS project, with stack-specific rules and deployment guidance.

When to Use This CLAUDE.md Template

• Starting a new project that uses Angular Material for the frontend, FastAPI for the API, and GCS for storage.
• Needing a single, copyable Claude Code prompt set to bootstrap the stack consistently.
• Incorporating stack-specific constraints and security guidance baked into CLAUDE.md.

Copyable CLAUDE.md Template

# CLAUDE.md

Project role: You are a software engineer who designs and wires an Angular Material frontend with a FastAPI backend that stores media and configs in Google Cloud Storage. Produce clean, production-ready code prompts and architecture guidance for Claude Code.

Architecture rules:
- Split frontend, API, and storage concerns into distinct modules.
- Use RESTful endpoints with versioned routes for the API.
- Prefer signed URLs for secure Google Cloud Storage access from the frontend.
- Keep API payloads small and versioned.
- Use environment-based configuration for secrets and endpoints.

File structure rules:
- Frontend under frontend/
- Backend under backend/
- Storage config under config/gcs/
- Tests under tests/

Authentication rules:
- Use OAuth 2.0 / JWT for API authentication where applicable.
- Do not embed static API keys in client code.
- Validate tokens on every API request.

Database rules:
- GCS is used for file storage; there is no traditional relational database required for this starter.
- If a database is used, keep access via backend service account and use IAM roles.

Validation rules:
- Validate request schemas in FastAPI using pydantic models.
- Validate file uploads for size and type on the API layer.
- Validate all user input on the frontend before sending.

Security rules:
- Never expose service account credentials in the client.
- Use signed URLs for upload/download to GCS.
- Enable CORS with minimal origins in the backend during development; restrict in production.

Testing rules:
- Backend: unit tests for endpoints using pytest and httpx.
- Frontend: unit tests for components with Jasmine/Karma.
- End-to-end: simple tests via API mocks for storage calls.

Deployment rules:
- Dockerize frontend and backend; publish separately in CI.
- Use environment variables for secrets and endpoints.
- Enable automated backups of GCS data if necessary.

Things Claude must not do:
- Do not generate credentials or leak secrets.
- Do not bypass API authentication checks.
- Do not embed cloud keys in the frontend bundle.
- Do not assume any database features beyond a simple storage backend.

Recommended Project Structure

project/
├── frontend/
│   └── angular-material-app/
│       ├── src/
│       │   ├── app/
│       │   └── styles/
│       ├── angular.json
│       └── package.json
├── backend/
│   ├── main.py
│   ├── requirements.txt
│   ├── app/
│   │   ├── api/
│   │   │   └── v1/
│   │   │       └── routes.py
│   │   └── models/
│   └── Dockerfile
├── config/
│   └── gcs/
│       ├── bucket_config.json
│       └── service_account.json
└── tests/
    ├── unit/
    └── integration/

Core Engineering Principles

• Clear separation of concerns between UI, API, and storage.
• Idempotent endpoints and deterministic builds.
• Explicit contracts with typed schemas for all requests and responses.
• Environment-driven configuration and 12-factor style deployment.
• Observability through structured logging and metrics.

Code Construction Rules

• Frontend uses Angular Material components with a dedicated API service to FastAPI endpoints.
• Backend defines pydantic models for requests and responses; keep schemas minimal and explicit.
• All storage operations use the Google Cloud Storage client; prefer signed URLs for client uploads.
• Validate inputs on both frontend and backend; never trust client input.
• Use dependency injection patterns in FastAPI for testability.
• Do not hard-code credentials; load from environment or GCS service accounts.

Security and Production Rules

• Enable CORS with restricted origins in production; log and monitor CORS violations.
• Store secrets in environment variables and secret managers; never commit to repo.
• Use signed URLs for all uploads/downloads to GCS; enforce expiration times.
• Validate and rate-limit API calls to prevent abuse; implement proper authentication on each request.

Testing Checklist

• Backend unit tests for endpoints and data validation.
• Frontend unit tests for Angular components and services.
• Integration tests for API -> storage flows using mocks.
• End-to-end smoke tests for key user journeys and file upload/download paths.

Common Mistakes to Avoid

• Assuming client can securely bypass authentication checks.
• Using non-signed URLs for uploads; risk of exposing data.
• Over-fetching data in API responses; keep payloads lean.
• Storing credentials in frontend code or repository history.

FAQ

What is this CLAUDE.md Template for?

It provides a copyable CLAUDE.md starter for a stack using Angular Material on the frontend, FastAPI on the backend, and Google Cloud Storage for assets.

What should Claude not do in this template?

Do not embed credentials, bypass authentication, or generate insecure signed URLs without expiration.

Which files should Claude generate?

Claude should generate architecture notes, a CLAUDE.md block, and a recommended project structure aligned to Angular Material + FastAPI + GCS.

Is this suitable for production?

Yes, with proper environment configurations, credentials management, and signed URL usage.

Can I adapt this template to other stacks?

Yes, adjust the project roles, storage layer, and API endpoints to fit the stack while preserving CLAUDE.md guidance.