04 - Backend and Frontend Architecture with Claude

Architecture with Claude: Backend and Frontend

Architecture design is where Claude truly excels. Thanks to its transparent reasoning, Claude can help you explore trade-offs, compare architectural patterns, and make informed decisions that will influence the entire project lifecycle.

In this article, we'll see how to use Claude to design backend architectures with Spring Boot and frontend with Angular, applying Solution Architecture best practices.

Claude's Role in Architecture

Claude can take on the role of Solution Architect and guide you through complex decisions. The key is to provide sufficient context and explicitly ask for trade-off analysis.

You are a Senior Solution Architect with 15+ years of experience
in enterprise software development.

EXPERTISE:
- Microservices architecture (Spring Boot, Kubernetes)
- Frontend architecture (Angular, React, Vue)
- Event-driven systems (Kafka, RabbitMQ)
- Cloud platforms (AWS, Azure, GCP)
- DDD, Clean Architecture, Hexagonal

COMMUNICATION STYLE:
- Always explain trade-offs for every recommendation
- Use diagrams (ASCII or Mermaid) when helpful
- Cite industry standards (12-factor app, SOLID, etc.)
- Challenge assumptions when they seem problematic

CONSTRAINTS:
- Prioritize maintainability over cleverness
- Consider team size and skill level
- Focus on practical, implementable solutions
- Always address security implications

Backend Architecture: Spring Boot

Recommended Architectural Patterns

Example: Hexagonal Architecture with Spring Boot

order-service/
├── src/main/java/com/company/orders/
│   ├── domain/                     # Core Business Logic
│   │   ├── model/
│   │   │   ├── Order.java          # Aggregate Root
│   │   │   ├── OrderItem.java
│   │   │   └── OrderStatus.java
│   │   └── service/
│   │       └── OrderDomainService.java
│   │
│   ├── application/                # Use Cases / Ports
│   │   ├── port/
│   │   │   ├── in/                 # Inbound Ports
│   │   │   │   ├── CreateOrderUseCase.java
│   │   │   │   └── GetOrderQuery.java
│   │   │   └── out/                # Outbound Ports
│   │   │       ├── OrderRepository.java
│   │   │       └── PaymentGateway.java
│   │   └── service/
│   │       └── OrderApplicationService.java
│   │
│   ├── adapter/                    # Infrastructure
│   │   ├── in/web/
│   │   │   └── OrderController.java
│   │   └── out/persistence/
│   │       └── OrderJpaRepository.java
│   │
│   └── config/
│       └── BeanConfiguration.java

Frontend Architecture: Angular

Recommended Patterns for Angular

Service with Signals

@Injectable({{ '{' }} providedIn: 'root' {{ '}' }})
export class OrderService {{ '{' }}
  private http = inject(HttpClient);

  // State
  private ordersSignal = signal<Order[]>([]);
  private loadingSignal = signal(false);
  private errorSignal = signal<string | null>(null);

  // Public readonly signals
  readonly orders = this.ordersSignal.asReadonly();
  readonly loading = this.loadingSignal.asReadonly();
  readonly error = this.errorSignal.asReadonly();

  // Computed signals
  readonly pendingOrders = computed(() =>
    this.ordersSignal().filter(o => o.status === 'PENDING')
  );

  loadOrders(): void {{ '{' }}
    this.loadingSignal.set(true);
    this.errorSignal.set(null);

    this.http.get<Order[]>('/api/orders').pipe(
      catchError(err => {{ '{' }}
        this.errorSignal.set('Error loading orders');
        return of([]);
      {{ '}' }}),
      finalize(() => this.loadingSignal.set(false))
    ).subscribe(orders => this.ordersSignal.set(orders));
  {{ '}' }}
{{ '}' }}

API Contract: Frontend-Backend

## Orders API v1

### Create Order
POST /api/v1/orders
Content-Type: application/json

Request:
{{ '{' }}
  "customerId": "cust_123",
  "items": [
    {{ '{' }} "productId": "prod_456", "quantity": 2 {{ '}' }}
  ],
  "shippingAddress": {{ '{' }}
    "street": "123 Main St",
    "city": "New York",
    "zipCode": "10001"
  {{ '}' }}
{{ '}' }}

Response 201 Created:
{{ '{' }}
  "id": "ord_789",
  "status": "PENDING_PAYMENT",
  "total": 99.99,
  "createdAt": "2025-02-01T10:00:00Z"
{{ '}' }}

Response 400 Bad Request:
{{ '{' }}
  "type": "validation_error",
  "title": "Validation Failed",
  "status": 400,
  "errors": [
    {{ '{' }} "field": "items", "message": "At least one item required" {{ '}' }}
  ]
{{ '}' }}

Conclusion and Next Steps

In this article, we've seen how to use Claude to design solid architectures for Spring Boot backends and Angular frontends.

In the next article, we'll dive into code structure: folder organization, naming conventions, separation of concerns, and configuration management.