# Implementation Plan: View Event Landing Page

**Branch**: `007-view-event` | **Date**: 2026-03-06 | **Spec**: [spec.md](spec.md)
**Input**: Feature specification from `/specs/007-view-event/spec.md`

## Summary

Add a public event detail page at `/events/:token` that displays event information (title, date/time with IANA timezone, description, location, attendee count) without requiring authentication. The page handles four states: loaded, expired ("event has ended"), not found (404), and server error (retry button). Loading uses skeleton-shimmer placeholders. Backend adds `GET /events/{token}` endpoint and a `timezone` field to the Event model (cross-cutting change to US-1).

## Technical Context

**Language/Version**: Java 25 (backend), TypeScript 5.9 (frontend)
**Primary Dependencies**: Spring Boot 3.5.x, Vue 3, Vue Router 5, openapi-fetch, openapi-typescript
**Storage**: PostgreSQL (JPA via Spring Data, Liquibase migrations)
**Testing**: JUnit (backend), Vitest (frontend unit), Playwright + MSW (frontend E2E)
**Target Platform**: Self-hosted web application (Docker)
**Project Type**: Web service + SPA
**Performance Goals**: N/A (single-user scale, self-hosted)
**Constraints**: No external resources (CDNs, fonts, tracking), WCAG AA, privacy-first
**Scale/Scope**: Single new view + one new API endpoint + one cross-cutting model change

## Constitution Check

*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*

| Principle | Status | Notes |
|-----------|--------|-------|
| I. Privacy by Design | PASS | No PII exposed. Only attendee count shown (not names). No external resources. No tracking. |
| II. Test-Driven Methodology | PASS | TDD enforced: backend unit tests, frontend unit tests, E2E tests per spec. |
| III. API-First Development | PASS | OpenAPI spec updated first. Types generated. Response schemas include `example:` fields. |
| IV. Simplicity & Quality | PASS | Minimal changes: one GET endpoint, one new view, one model field. `attendeeCount` returns 0 (no RSVP stub). Cancelled state deferred. |
| V. Dependency Discipline | PASS | No new dependencies. Skeleton shimmer is CSS-only. |
| VI. Accessibility | PASS | Semantic HTML, ARIA attributes, keyboard navigable, WCAG AA contrast via design system. |

**Post-Phase-1 re-check**: All gates still pass. The `timezone` field addition is a justified cross-cutting change documented in research.md R-1.

## Project Structure

### Documentation (this feature)

```text
specs/007-view-event/
├── plan.md              # This file
├── spec.md              # Feature specification
├── research.md          # Phase 0: research decisions
├── data-model.md        # Phase 1: entity definitions
├── quickstart.md        # Phase 1: implementation overview
├── contracts/
│   └── get-event.yaml   # Phase 1: GET endpoint contract
└── tasks.md             # Phase 2: implementation tasks (via /speckit.tasks)
```

### Source Code (repository root)

```text
backend/
├── src/main/java/de/fete/
│   ├── domain/
│   │   ├── model/Event.java                          # Add timezone field
│   │   └── port/in/GetEventUseCase.java              # NEW: inbound port
│   ├── application/service/EventService.java          # Implement GetEventUseCase
│   ├── adapter/
│   │   ├── in/web/EventController.java               # Implement getEvent()
│   │   └── out/persistence/
│   │       ├── EventJpaEntity.java                    # Add timezone column
│   │       └── EventPersistenceAdapter.java           # Map timezone field
│   └── config/
├── src/main/resources/
│   ├── openapi/api.yaml                               # Add GET endpoint + timezone
│   └── db/changelog/                                  # Liquibase: add timezone column
└── src/test/java/de/fete/                             # Unit + integration tests

frontend/
├── src/
│   ├── api/schema.d.ts                                # Regenerated from OpenAPI
│   ├── views/EventDetailView.vue                      # NEW: event detail page
│   ├── views/EventCreateView.vue                      # Add timezone to create request
│   ├── router/index.ts                                # Point /events/:token to EventDetailView
│   └── assets/main.css                                # Skeleton shimmer styles
├── e2e/
│   └── event-view.spec.ts                             # NEW: E2E tests for view event
└── src/__tests__/                                     # Unit tests for EventDetailView
```

**Structure Decision**: Existing web application structure (backend + frontend). No new packages or modules — extends existing hexagonal architecture with one new inbound port and one new frontend view.

## Complexity Tracking

No constitution violations. No entries needed.