Integrating Claude Code into a Real Project: Play The Event
In the first 10 articles of this series, we explored Claude as a technical partner, from initial setup to deployment and maintenance. Now it's time to see all of this applied to a real production project: Play The Event, an enterprise multi-stack platform with DDD, Hexagonal, and CQRS architecture.
In this article, I share the hands-on experience of integrating Claude Code into the daily development workflow, showing how it radically transforms productivity on a project with Java/Spring Boot backend, Angular 19 frontend, and Python/FastAPI analytics.
What You'll Learn
- Configure CLAUDE.md as a centralized instruction file
- Create custom slash commands for repetitive tasks
- Apply an iterative development workflow with Claude Code
- Manage complex tasks with automatic subdivision
- Leverage Claude Code's multi-stack knowledge
- Integrate WCAG 2.1 AA accessibility into the development process
- Perform contextual cross-file refactoring
- Manage the full lifecycle of external library integration
- Apply bilingual naming conventions (Italian/English)
- Use Claude Code for debugging and problem solving
- Leverage persistent memory for recurring patterns
- Structure work plans with Plan Mode
Series Overview
| # | Article | Focus |
|---|---|---|
| 1 | Claude as Technical Partner | Setup and first steps |
| 2 | Context and Project Setup | CLAUDE.md and configuration |
| 3 | Ideation and Requirements | MVP and user personas |
| 4 | Backend and Frontend Architecture | Spring Boot and Angular |
| 5 | Code Structure | Organization and conventions |
| 6 | Advanced Prompt Engineering | Advanced techniques |
| 7 | Testing and Quality | Strategies and test generation |
| 8 | Professional Documentation | README, API, ADR |
| 9 | Deploy and DevOps | Docker, CI/CD, monitoring |
| 10 | Evolution and Maintenance | Refactoring and scalability |
| 11 | Real Project Integration (you are here) | Claude Code in production |
1. Project Configuration with CLAUDE.md
The core of Claude Code integration in Play The Event is the CLAUDE.md file, placed in the repository root. This file defines the complete project context, allowing Claude to automatically inherit the architecture, conventions, and constraints at every session.
# CLAUDE.md - Play The Event
## Architecture
- Domain-Driven Design (DDD)
- Hexagonal Architecture (Ports & Adapters)
- CQRS (Command Query Responsibility Segregation)
## Development Commands
### Backend (Java/Spring Boot)
- mvn spring-boot:run -pl backend
- mvn test -pl backend
### Frontend (Angular 19)
- npm start --prefix frontend
- npm run build --prefix frontend
### Analytics (Python/FastAPI)
- uvicorn main:app --reload --port 8001
## Naming Conventions
- Source code: ITALIAN (Evento, Partecipante, creaEvento())
- REST APIs: ENGLISH (/api/v1/events, /api/v1/participants)
- Database: snake_case English (event_participants)
## Accessibility (MANDATORY)
- WCAG 2.1 AA for every UI change
- Minimum contrast 4.5:1
- Aria-labels on all interactive elements
- Complete keyboard navigation
## Commit Format
- [fe] - Frontend Angular changes
- [be] - Backend Spring Boot changes
- [py] - Analytics Python changes
- [deploy] - Deployment configuration
- [docs] - Documentation
Thanks to this file, Claude Code doesn't need repeated explanations about the architecture. At every new session, it reads the CLAUDE.md and operates with full awareness of the stack, conventions, and project constraints.
2. Custom Slash Commands
For repetitive tasks, Claude Code supports custom slash commands that automate common operations. In Play The Event, we use several to maintain consistency and speed.
Custom Commands
| Command | Description | Typical Use |
|---|---|---|
| /commit | Generate commit with validated format | After each completed change |
| /create-aggregate | Complete DDD scaffolding | New domain entity |
| /create-component | Angular 19 standalone component | New UI feature |
| /create-migration | Flyway SQL script | Database schema evolution |
| /review-ddd | Architectural compliance check | Automated code review |
| /generate-tests | Automatic unit test generation | Quick test coverage |
# The /create-aggregate command automatically generates:
## Domain Layer
src/main/java/com/pte/domain/model/Evento.java # Entity
src/main/java/com/pte/domain/model/EventoId.java # Value Object ID
src/main/java/com/pte/domain/repository/EventoRepository.java # Port
## Application Layer
src/main/java/com/pte/application/command/CreaEventoCommand.java
src/main/java/com/pte/application/handler/CreaEventoHandler.java
src/main/java/com/pte/application/query/GetEventoQuery.java
## Infrastructure Layer
src/main/java/com/pte/infrastructure/persistence/EventoJpaRepository.java
src/main/java/com/pte/infrastructure/persistence/EventoEntity.java
## Interface Layer
src/main/java/com/pte/interfaces/rest/EventoController.java
src/main/java/com/pte/interfaces/rest/dto/EventoRequest.java
src/main/java/com/pte/interfaces/rest/dto/EventoResponse.java
Every command generates code that respects the conventions defined in CLAUDE.md: Italian class names, English REST endpoints, strict Hexagonal structure.
3. Iterative Development Workflow
The development cycle with Claude Code follows a natural iterative pattern that starts from a natural language request and arrives at verified code.
Typical Development Cycle
- Request: The user describes the feature in natural language
- Analysis: Claude automatically reads the relevant files
- Implementation: Proposes and applies changes with explanations
- Verification: Runs the build to check for compilation errors
- Iteration: The user reports issues, Claude corrects
# User request:
"Improve the CSS of the expense-analytics section"
# Claude Code:
1. Reads expense-analytics.component.scss
2. Reads expense-analytics.component.html
3. Analyzes the existing design system
4. Proposes improvements: grid layout, spacing, responsive
5. Applies the changes
6. Runs: npm run build --prefix frontend
7. Result: Build OK, 0 errors
# Second iteration:
"The export should be in Excel, not JSON"
# Claude Code:
1. Identifies the need for an external library
2. Installs: npm install xlsx --prefix frontend
3. Modifies the export function
4. Creates 8 structured Excel sheets (one per analytics section)
5. Verifies the build: OK
4. Complex Task Management
When a task is too large to be completed in a single step, Claude Code automatically subdivides it into trackable subtasks, completing them sequentially with verification.
# Request: "Dashboard Analytics improvements"
Claude automatically subdivides into:
[1/6] Empty States for sections with no data
[2/6] Quick Actions Bar with frequent actions
[3/6] Visual improvements to KPI cards
[4/6] Comparative trends with previous month
[5/6] Upcoming events section
[6/6] Sparklines in KPIs for quick trends
Each subtask is:
- Implemented individually
- Verified with build
- Committed separately
This approach ensures that each change is isolated, verifiable, and easily reversible in case of issues.
5. Multi-Stack Knowledge
Play The Event operates on three different technology stacks in the same repository. Claude Code understands the relationships between layers and operates on all three with awareness of mutual dependencies.
Backend - Java/Spring Boot
- DDD domain entities
- Repositories and application services
- REST controllers
- Spring Security configuration
- Flyway database migrations
Frontend - Angular 19
- Standalone components with Signals
- HTTP services and interceptors
- Reactive state management
- Lazy-loaded routing
- SCSS with design system
Analytics - Python/FastAPI
- Machine Learning for participant clustering
- Event attendance predictions
- Automated reports with charts
- RESTful API for frontend integration
Claude understands that a backend DTO corresponds to a TypeScript model in the frontend and a response schema in analytics. When modifying an entity, it propagates changes across all involved layers.
6. Built-in Accessibility
WCAG 2.1 AA guidelines are integrated directly into the CLAUDE.md. Claude Code applies them automatically during every UI change, without needing manual reminders.
## Accessibility Checklist (MANDATORY for every UI change)
### Contrast and Colors
- Minimum ratio 4.5:1 for normal text
- Minimum ratio 3:1 for large text (18px+ or 14px+ bold)
- DO NOT use #F39C12 on white background (insufficient contrast)
- Accessible colors documented in design system
### HTML Structure
- Correct heading hierarchy (h1 > h2 > h3, never skip levels)
- Semantic elements: nav, main, section, article, aside
- Aria-labels on all interactive elements without visible text
- Role attributes where necessary
### Interaction
- Logical and sequential tab order
- Visible focus on all interactive elements
- Touch targets minimum 44x44px
- Complete keyboard navigation support
When Claude Code generates a new component or modifies an existing template, it automatically verifies compliance with these rules, adding aria-labels, checking contrast ratios, and ensuring keyboard navigation.
7. Contextual Refactoring
Claude Code understands cross-file dependencies in the project. When modifying a model, service, or component, it automatically propagates changes to all related files.
Automatic Change Propagation
| Action | Automatic Propagation |
|---|---|
| Modify TypeScript model | Updates services, components, and templates that use it |
| Rename property | Propagates the change across all related files |
| Remove a feature | Cleans up imports, i18n translations, and routes |
| Modify backend DTO | Updates corresponding TypeScript interface |
# Request: "Rename 'dataEvento' to 'dataInizio' in the Evento entity"
# Claude Code automatically propagates:
1. domain/model/Evento.java → dataEvento → dataInizio
2. interfaces/rest/dto/EventoResponse.java → field updated
3. infrastructure/persistence/EventoEntity.java → mapped column
4. frontend/models/evento.model.ts → TypeScript property
5. frontend/components/evento-detail.component.html → template binding
6. frontend/components/evento-list.component.html → table column
7. resources/db/migration/V12__rename_data_evento.sql → ALTER TABLE
8. External Library Integration
Claude Code manages the entire lifecycle of integrating new libraries, from identifying the need to verifying the final build.
Complete Integration Cycle
- Identify: Recognizes when an external library is needed for the requested task
- Install: Runs the appropriate installation command (npm, maven, pip)
- Implement: Imports, configures, and uses the library API
- Verify: Runs the build to ensure zero compilation errors
# Request: "The report export should be in Excel, not JSON"
# Step 1 - Identify
Claude: "Generating Excel files requires the xlsx library"
# Step 2 - Install
$ npm install xlsx --save --prefix frontend
# Step 3 - Implement
import * as XLSX from 'xlsx';
exportToExcel(data: ReportAnalytics): void {{ '{' }}
const workbook = XLSX.utils.book_new();
// Create 8 structured sheets
XLSX.utils.book_append_sheet(workbook,
XLSX.utils.json_to_sheet(data.kpiSummary), 'KPI');
XLSX.utils.book_append_sheet(workbook,
XLSX.utils.json_to_sheet(data.participants), 'Participants');
// ... 6 more sheets
XLSX.writeFile(workbook, `report-






