# Quickstart: View Attendee List (011)

## Prerequisites

- Java 25 (SDKMAN)
- Node.js 20+ / npm
- PostgreSQL running (or Docker for Testcontainers)

## Development Flow

### 1. Update OpenAPI spec

Edit `backend/src/main/resources/openapi/api.yaml` to add the `GET /events/{token}/attendees` endpoint and response schemas (see `contracts/api.md`).

### 2. Generate types

```bash
# Backend: regenerate Spring interfaces
cd backend && ./mvnw compile

# Frontend: regenerate TypeScript types
cd frontend && npm run generate:api
```

### 3. Backend implementation (TDD)

```bash
# Write tests first
cd backend && ./mvnw test

# Run specific test class
cd backend && ./mvnw test -Dtest=EventControllerIntegrationTest
cd backend && ./mvnw test -Dtest=RsvpServiceTest
```

### 4. Frontend implementation (TDD)

```bash
# Unit tests
cd frontend && npm run test:unit

# E2E tests
cd frontend && npx playwright test e2e/view-attendee-list.spec.ts
```

### 5. Verify

```bash
# Backend full verify (includes checkstyle)
cd backend && ./mvnw verify

# Frontend build check
cd frontend && npm run build
```

## Key Files to Modify

| Layer | File | Change |
|-------|------|--------|
| API Spec | `backend/src/main/resources/openapi/api.yaml` | Add endpoint + schemas |
| Port (in) | `de.fete.domain.port.in.GetAttendeesUseCase` | New interface |
| Port (out) | `de.fete.domain.port.out.RsvpRepository` | Add `findByEventId` |
| Service | `de.fete.application.service.RsvpService` | Implement use case |
| Persistence | `de.fete.adapter.out.persistence.RsvpJpaRepository` | Add query method |
| Persistence | `de.fete.adapter.out.persistence.RsvpPersistenceAdapter` | Implement port method |
| Controller | `de.fete.adapter.in.web.EventController` | Add endpoint handler |
| Frontend | `src/views/EventDetailView.vue` | Integrate AttendeeList |
| Frontend | `src/components/AttendeeList.vue` | New component |

## Testing Checklist

- [ ] Backend unit test: `RsvpService.getAttendeeNames` — valid token, invalid token, no RSVPs
- [ ] Backend integration test: `GET /events/{token}/attendees` — 200, 403, 404
- [ ] Frontend unit test: `AttendeeList.vue` — renders names, empty state, loading
- [ ] Frontend unit test: `EventDetailView.vue` — shows list for organizer, hides for visitor
- [ ] E2E test: organizer sees attendee names, visitor sees count only