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