SantiArcade
Arcade web privado para publicar, jugar y compartir juegos HTML autocontenidos creados con IA.
Descripción del Proyecto
SantiArcade es una aplicación web full stack construida con Next.js, React, TypeScript, Tailwind CSS y shadcn/ui. Funciona como un arcade personal donde un administrador puede subir juegos HTML autocontenidos, añadir descripción, prompt original, modelo de IA utilizado y thumbnail, y publicarlos automáticamente en una experiencia pública navegable.
La arquitectura usa App Router, Server Components, Server Actions y API Routes. La persistencia está resuelta con SQLite y Drizzle ORM, con tablas para juegos, upvotes y sesiones administrativas. Los archivos HTML y thumbnails no se guardan en `public`, sino en almacenamiento persistente bajo `data/`, y se sirven mediante endpoints controlados.
El proyecto incluye un panel de administración protegido con NextAuth/Auth.js y credenciales hasheadas con bcrypt. Desde el admin se pueden subir, editar, publicar/ocultar y eliminar juegos. La app pública incluye homepage con hero cyber-neón, grid responsive de juegos, página de detalle, upvotes anónimos con rate limit por IP hasheada y un player fullscreen.
La seguridad del player se resolvió con iframe sandbox, CSP estricta, validación anti path traversal, headers de seguridad, sanitización liviana del HTML subido y límites de tamaño para archivos. También incluye SEO con metadata dinámica, Open Graph por juego, robots.txt, sitemap, estados de loading/error/404 y smoke tests con Playwright.
La IA cumple dos roles principales: primero, como motor creativo del contenido que la plataforma aloja, ya que cada juego puede registrar el prompt original y el modelo usado; segundo, como copiloto de desarrollo para diseñar, implementar y endurecer la arquitectura del producto. La aplicación no depende de una API de IA en runtime, lo que reduce costos y complejidad operativa.
El deploy está preparado para VPS Ubuntu con Nginx como reverse proxy, PM2 como process manager, certificados SSL de Let's Encrypt y build standalone de Next.js. El script de despliegue instala dependencias, ejecuta build de producción, sincroniza assets estáticos, recarga PM2 y realiza un health-check final.
Problema que Resuelve
El proyecto resuelve la necesidad de publicar y compartir rápidamente juegos creados con IA sin depender de plataformas externas, cuentas públicas de terceros o procesos manuales de hosting por cada juego. Centraliza el catálogo, la subida, la metadata, el player seguro, los votos y el SEO en una sola aplicación de bajo costo operativo, pensada para correr en un VPS pequeño con SQLite y archivos persistentes.
Características Clave
- Homepage pública con hero cyber-neón, estadísticas y grid responsive de juegos
- Panel de administración protegido con NextAuth/Auth.js
- Login privado con credenciales y password hasheado con bcrypt
- Upload de juegos HTML autocontenidos con metadata y thumbnail opcional
- Validación de formularios con Zod y límites de tamaño configurables
- Generación automática de slugs únicos
- Sanitización liviana de HTML subido para bloquear patrones peligrosos
- Almacenamiento persistente fuera de public para juegos y thumbnails
- API segura para servir juegos HTML con CSP estricta e iframe sandbox
- Página de detalle por juego con descripción, modelo IA, fecha, upvotes y prompt original
- Player fullscreen dedicado para jugar sin distracciones
- Sistema de upvotes anónimos con hash de IP, rate limit y bloqueo de doble voto
- Dashboard admin con listado de juegos, estado publicado/oculto, upvotes y tamaño
- Edición de título, descripción, prompt, modelo IA y visibilidad
- Eliminación de juegos con borrado de registro y archivos asociados
- SEO con metadata dinámica, Open Graph, sitemap y robots.txt
- Estados de loading, error boundary y página 404 personalizados
- Tests smoke end-to-end con Playwright
- Deploy standalone en VPS con Nginx, PM2, SSL y health-check
Ficha Técnica
Enlaces
¿Te interesa esta solución?
Puedo diseñar y desarrollar un sistema similar adaptado al 100% a las operaciones y dimensiones de tu empresa.
Consultar Presupuesto