From 168f443875ee085354985ea94ae891c1bedf4375 Mon Sep 17 00:00:00 2001 From: consultoria-as Date: Sun, 22 Feb 2026 02:13:01 +0000 Subject: [PATCH] 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 --- .../2026-02-21-project-afterlife-design.md | 196 ++++++++++++++++++ 1 file changed, 196 insertions(+) create mode 100644 docs/plans/2026-02-21-project-afterlife-design.md diff --git a/docs/plans/2026-02-21-project-afterlife-design.md b/docs/plans/2026-02-21-project-afterlife-design.md new file mode 100644 index 0000000..89342de --- /dev/null +++ b/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