PokéSector 35
¿Aún no te has echado una partidita a este homenaje de uno de los juegos míticos de la Game Boy?...
Impresionante
Tecnologías
- HTML 5
- CSS 3
- JavaScript
- Docker
- React.js
- Vite
- Node.js
- Express
- PostgreSQL
- Sequelize
- Pug
- JWT
- PM2
- Apache
El proyecto
PokéSector 35 es un videojuego fullstack con estética retro de Game Boy, desarrollado con React, Express y PostgreSQL.
En el juego, el jugador explora un mapa de 5×7 celdas (35 en total), encuentra Pokémon salvajes de forma aleatoria y trata de capturarlos antes de llegar a la casilla de meta.
El juego cuenta con modo invitado, donde los datos se guardan en localStorage sin persistencia. En el modo registrado, los usuarios pueden guardar partidas en slots, mantener una Pokédex persistente y acceder a rankings.
El backend expone una API REST documentada con Swagger y el proyecto incluye además un panel de administración SSR con Pug para gestionar usuarios, slots, Pokédex y ranking sin acceder directamente a la base de datos.
El reto
El principal reto consistía en diseñar y trasladar al navegador la experiencia de juego clásica de una Game Boy, manteniendo su estética retro, su simplicidad de controles y su esencia de juego dentro de un entorno moderno.
Para ello, había que desarrollar un videojuego completo en el navegador con un sistema de exploración, combate y captura totalmente funcional, manteniendo una experiencia fluida sin recargas de página.
Además, era necesario gestionar la persistencia de datos, así como diseñar una arquitectura capaz de soportar autenticación, progresión del usuario y ranking global.
También se buscaba integrar controles múltiples (teclado, touch y gamepad) y mantener la coherencia del estado del juego entre frontend, backend y base de datos.
La solución
Se desarrolló una arquitectura fullstack separada en frontend y backend.
El frontend combina React con JavaScript vanilla. React se encarga únicamente del renderizado de pantallas y la navegación entre vistas, mientras que toda la lógica del juego (movimiento, combate, menús, sonido y estado) se implementa en módulos ES puros para evitar re-renders constantes y mantener control total del loop del juego.
El backend está construido con Express y PostgreSQL, siguiendo una arquitectura MVC con separación por controllers, models, routes, services y middlewares. Incluye autenticación con JWT, sistema de refresh tokens, rate limiting y un panel de administración SSR con Pug.
La base de datos gestiona usuarios, slots de partida, Pokédex, rankings y tokens de sesión, con relaciones diseñadas para permitir eliminación en cascada y evitar inconsistencias.
Mi aportación
- Diseño e implementación del sistema de gameplay (exploración, combate y captura)
- Desarrollo de la arquitectura híbrida React + Vanilla JS
- Sistema de slots de partidas y persistencia de progreso
- Integración de la API externa PokeAPI
- Implementación de autenticación JWT con refresh tokens
- Sistema de ranking global por dificultad
- Sistema de replay de movimientos
- Controles completos con teclado, touch y gamepad
- Desarrollo del panel de administración con Pug
- Diseño e implementación de la interfaz visual tipo consola Game Boy mediante CSS, incluyendo estética retro, layout de la consola, animaciones y personalización visual
- Configuración de Docker y entorno de base de datos
Lo que aprendí
Este proyecto me permitió profundizar en el desarrollo fullstack con JavaScript, especialmente en la separación de responsabilidades entre frontend y backend.
Trabajé en el diseño de un game loop completo en el navegador, la gestión de estado sin depender exclusivamente de frameworks, la integración de APIs externas y la creación de una API REST con autenticación segura.
También aprendí a estructurar bases de datos relacionales con PostgreSQL, a utilizar Docker para entornos de desarrollo reproducibles y a diseñar sistemas de persistencia complejos como slots, replays y rankings.
