Add Project Afterlife design document

Initial design doc covering architecture, data model, tech stack,
and interactive documentary experience for the game preservation initiative.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

docs/plans/2026-02-21-project-afterlife-design.md

@@ -0,0 +1,196 @@
+# Project Afterlife — Design Document
+
+> Preservando juegos online que merecen una segunda vida
+
+**Date**: 2026-02-21
+**Status**: Approved
+**Team**: 4 programmers
+
+---
+
+## 1. Vision
+
+Project Afterlife is an initiative dedicated to preserving discontinued online games by running private servers and documenting each game's history through interactive web documentaries with human-narrated audiobooks.
+
+Monetization is 100% donation-based through external platforms (Patreon/Ko-fi).
+
+## 2. Target Audience
+
+- Multilingual (Spanish + English at launch)
+- Former players of discontinued online games
+- Gaming preservation community
+- Gaming history enthusiasts
+
+## 3. Web Structure
+
+### Public Pages
+
+| Page | Description |
+|---|---|
+| **Landing / Home** | Initiative mission, latest games added, donation CTA |
+| **Game Catalog** | Filterable grid/list of all documented games (by genre, year, status) |
+| **Game Page** | Individual game card: basic info, screenshots, private server link, documentary link |
+| **Interactive Documentary** | Per-game chapter-based experience (text, images, video, narrated audio player) |
+| **About Us** | Team, mission, how to contribute |
+| **Donations** | Patreon/Ko-fi links + fund allocation transparency |
+
+### CMS (Strapi Admin)
+
+- Game CRUD management
+- Documentary chapter editor (rich content)
+- Media management (images, videos, audio files)
+- Translation management (ES/EN)
+- Team/collaborator management
+
+## 4. Data Model
+
+### Game
+- `title` (localized)
+- `slug`
+- `description` (localized)
+- `genre` (enum: MMORPG, FPS, Casual, Strategy, Sports, Other)
+- `releaseYear`
+- `shutdownYear`
+- `developer`
+- `publisher`
+- `screenshots` (media[])
+- `coverImage` (media)
+- `serverStatus` (enum: online, maintenance, coming_soon)
+- `serverLink` (URL)
+- `documentary` (relation → Documentary)
+
+### Documentary
+- `game` (relation → Game)
+- `title` (localized)
+- `description` (localized)
+- `chapters` (relation → Chapter[], ordered)
+- `totalDuration` (computed from chapters)
+- `publishedAt`
+
+### Chapter
+- `documentary` (relation → Documentary)
+- `title` (localized)
+- `content` (localized, rich text with inline media)
+- `audioFile` (media — narrated audio)
+- `audioDuration` (seconds)
+- `order` (integer)
+- `coverImage` (media)
+
+### Translation Strategy
+- Strapi i18n plugin for all content types
+- Each content entry has locale variants (es, en)
+- Frontend uses `next-intl` for UI strings
+
+## 5. Interactive Documentary Experience
+
+### Structure
+Each game's documentary is divided into navigable chapters. Example:
+
+1. "El Nacimiento" — How and why the game was created
+2. "La Era Dorada" — Peak popularity, the community
+3. "Así Se Jugaba" — Mechanics, classes, maps, gameplay
+4. "El Declive" — What went wrong, player loss
+5. "Luces Apagadas" — Server shutdown, community reactions
+6. "La Restauración" — How it was restored, current server state
+
+Chapters are fully customizable per game from the CMS.
+
+### Chapter Components
+- **Persistent audio player** — Fixed bottom bar (podcast/Spotify mini style)
+  - Play/pause, progress bar, playback speed
+  - Syncs with chapter navigation
+  - Can play full documentary or chapter-by-chapter
+- **Narrative text** — Rich formatted content
+- **Image gallery** — Screenshots, concept art, period photos
+- **Embedded videos** — Trailers, gameplay, community moments
+- **Side navigation** — Chapter index always visible for jumping between sections
+- **Reading progress** — Bar indicating documentary completion
+
+### Audio Player (Howler.js)
+- Fixed bottom bar, always visible during documentary
+- Controls: play/pause, seek, speed (0.5x–2x), volume
+- Chapter sync: switching chapters updates audio position
+- Continuous mode: plays all chapters in sequence
+- Chapter mode: plays one chapter at a time
+
+## 6. Tech Stack
+
+### Frontend
+| Technology | Purpose |
+|---|---|
+| Next.js 15 (App Router) | Main framework, SSR/ISR |
+| TypeScript | Static typing |
+| Tailwind CSS | Utility-first styles |
+| Framer Motion | Documentary animations |
+| next-intl | Internationalization (ES/EN) |
+| Howler.js | Robust audio player |
+
+### Backend / CMS
+| Technology | Purpose |
+|---|---|
+| Strapi 5 | Headless CMS, REST/GraphQL API |
+| PostgreSQL | Database |
+| MinIO | S3-compatible self-hosted object storage (audio, images, video) |
+
+### Infrastructure (100% Self-Hosted)
+| Technology | Purpose |
+|---|---|
+| Nginx | Reverse proxy + static serving |
+| Docker + Docker Compose | All services orchestration |
+| VPS (own servers) | All hosting |
+| Let's Encrypt / Certbot | Free SSL |
+| GitHub Actions | CI/CD → automatic deploy to VPS |
+
+## 7. Repository Structure
+
+```
+project-afterlife/
+├── apps/
+│   ├── web/                  # Next.js frontend
+│   │   ├── src/
+│   │   │   ├── app/          # App Router pages
+│   │   │   ├── components/   # React components
+│   │   │   ├── lib/          # Utilities, API client
+│   │   │   ├── messages/     # i18n translation files
+│   │   │   └── styles/       # Global styles
+│   │   ├── public/           # Static assets
+│   │   └── package.json
+│   └── cms/                  # Strapi 5 CMS
+│       ├── src/
+│       │   ├── api/          # Content types
+│       │   └── plugins/      # Custom plugins
+│       └── package.json
+├── packages/
+│   └── shared/               # Shared TypeScript types
+│       ├── src/
+│       │   └── types/
+│       └── package.json
+├── docker/
+│   ├── docker-compose.yml    # All services
+│   ├── nginx/
+│   │   └── nginx.conf
+│   └── certbot/
+├── .github/
+│   └── workflows/
+│       └── deploy.yml
+├── docs/
+│   └── plans/
+├── package.json              # Monorepo root (workspaces)
+├── turbo.json                # Turborepo config
+└── README.md
+```
+
+## 8. Monetization
+
+- **Patreon**: Recurring donations with tiers (early access to documentaries, credits, etc.)
+- **Ko-fi**: One-time donations
+- Links prominently displayed on landing page and donation page
+- Transparency: public breakdown of fund allocation
+
+## 9. Non-Functional Requirements
+
+- **Performance**: Static generation where possible, ISR for dynamic content
+- **Accessibility**: Semantic HTML, ARIA labels, keyboard navigation, screen reader support
+- **SEO**: Meta tags, Open Graph, structured data for games
+- **Mobile**: Fully responsive, audio player adapts to mobile
+- **Security**: HTTPS, CORS, rate limiting, CSP headers