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>
This commit is contained in:
consultoria-as
196
docs/plans/2026-02-21-project-afterlife-design.md
Normal file
196
docs/plans/2026-02-21-project-afterlife-design.md
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user