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

# 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