Dubrovnik Maritime Heritage Museum -- Website

Client: Ivan Babic, Director, Muzej Pomorske Bastine Dubrovnik Location: Dubrovnik, Croatia

What you're building

A modern, accessible museum website for the Dubrovnik Maritime Heritage Museum. The site serves four audiences: tourists checking on mobile (fast), researchers browsing the collection (searchable), members accessing exclusive content (secure), and visitors using assistive technology (accessible). The site must comply with the European Accessibility Act.

Tech stack

Next.js 14+ (App Router, Server Components, SSR/SSG/CSR hybrid)
TypeScript
PostgreSQL + Prisma
Clerk or NextAuth.js (OAuth/OIDC for member authentication)
Playwright + @axe-core/playwright (E2E and accessibility testing)
Prometheus (custom metrics instrumentation)
Grafana (dashboards)
Tailwind CSS

Rendering strategy

SSG: Static pages (About, Visit, History) -- pre-built at deploy, served from CDN
SSR: Collection browsing -- dynamic search/filter, built on each request
CSR: Members dashboard -- interactive, behind auth, client-side rendering

File structure

p7/
  materials/
    CLAUDE.md (this file)
    first-contact.md
    accessibility-audit.md
    collection-data.json (150 artifacts)
    photos/ (20 artifact images)
  src/
    app/
      page.tsx (home -- SSG)
      about/page.tsx (SSG)
      visit/page.tsx (SSG)
      history/page.tsx (SSG)
      collection/
        page.tsx (SSR -- search/filter)
        [id]/page.tsx (SSR -- artifact detail)
      members/
        layout.tsx (auth wrapper)
        dashboard/page.tsx (CSR)
        lectures/page.tsx (CSR)
        archives/page.tsx (CSR)
      login/page.tsx
    components/
    lib/
      db.ts
      auth.ts
      metrics.ts
  prisma/
    schema.prisma
  tests/
    e2e/
    integration/
    factories/
  public/

Tickets

T1: Project setup and architecture -- Scaffold Next.js, document rendering strategy, create CLAUDE.md
T2: Static public pages (SSG) -- About, Visit, History pages with semantic HTML, ARIA landmarks
T3: Collection browsing (SSR) -- Search, filter by category/era, artifact detail pages, Suspense boundaries
T4: Member authentication -- OAuth/OIDC setup, RBAC (public/member), server-side enforcement
T5: Members dashboard (CSR) -- Exclusive content area, lecture recordings, high-res images, archives
T6: Accessibility deep-dive -- WCAG AA compliance, keyboard navigation, focus management, axe-core integration
T7: Testing suite -- Factories, integration tests for auth, E2E for user journeys, cross-model review
T8: Observability -- Prometheus custom metrics, Grafana dashboards (business + developer)
T9: Performance and deploy -- Cache-Control headers per route, CDN configuration, production deployment

Verification targets

Lighthouse accessibility >= 95
Full keyboard-only navigation through collection search and member login
axe-core integrated in test suite -- build fails on violations
Server-side auth enforcement (302 redirect, not client-side)
All tests pass; intentional auth break causes test failure
Grafana dashboards show live custom metrics
Page load < 2 seconds on 3G (deployed site)
Cache-Control headers correct per route type

Commit convention

Commit after each ticket. Message format: T{N}: {brief description}.