---
name: client-server
description: This skill should be used when the user asks about "client server architecture", "when to use client server", "request response", "frontend backend", "remote procedure call", or mentions needing to separate client presentation from server processing.
version: 1.0.0
---

# Client-Server Architecture Pattern

## What Is It
Client-Server architecture separates the client (presentation and user interaction) from the server (data storage and business logic). Clients request services from servers over a network, and servers respond with the requested data or results.

## When to Use
- **Web applications** - Browser clients, backend servers
- **Mobile apps** - Mobile client, cloud backend
- **Desktop apps** - Rich client, central server
- **APIs** - Any client consuming server APIs
- **Multi-user systems** - Shared server resources

## When NOT to Use
- **Peer-to-peer** - No central authority needed
- **Offline-first** - Server dependency problematic
- **Real-time gaming** - Latency issues
- **Embedded systems** - No network available

## How to Implement

### Implementation Steps
1. Define client-server communication protocol
2. Implement server with API endpoints
3. Implement client with request handling
4. Handle network errors and retries
5. Implement authentication/authorization

### TypeScript Implementation

```typescript
// Server
class ApiServer {
  private routes: Map<string, Handler> = new Map();

  addRoute(path: string, handler: Handler): void {
    this.routes.set(path, handler);
  }

  async handleRequest(request: Request): Promise<Response> {
    const handler = this.routes.get(request.path);
    if (!handler) {
      return { status: 404, body: "Not found" };
    }
    return handler(request);
  }
}

// Client
class ApiClient {
  constructor(private baseUrl: string) {}

  async get<T>(path: string): Promise<T> {
    const response = await fetch(`${this.baseUrl}${path}`);
    return response.json();
  }

  async post<T>(path: string, body: unknown): Promise<T> {
    const response = await fetch(`${this.baseUrl}${path}`, {
      method: 'POST',
      body: JSON.stringify(body),
    });
    return response.json();
  }
}
```

## Code Examples
See `examples/` directory for runnable TypeScript implementations:
- `examples/client-server.ts` - Basic implementation with HTTP simulation
- `examples/client-server-advanced.ts` - Real-world example with authentication

## Related Patterns
- **Layered** - Client-server is a layered distribution
- **Proxy** - Client may use proxy to access server
- **MVC** - Client often uses MVC for presentation