MazeBreak GDD Wiki
Wiki privado y buscable del documento de diseño de juego para un equipo de desarrollo en Roblox — 24 capítulos, búsqueda fuzzy, navegación por teclado y autenticación con Clerk.
Video Demostrativo
Capturas de Pantalla
1 / 7
El Desafío
Los equipos de desarrollo de juegos que trabajan con documentos de diseño tradicionales enfrentan fricción acumulada: un documento Word de más de 30 páginas requiere scroll y Ctrl+F para encontrar cualquier cosa, rompiendo el flujo durante el desarrollo activo. Sistemas relacionados (ej. daño de enemigos y tablas de loot) viven en secciones separadas sin vinculación. La búsqueda de Word solo encuentra texto exacto — sin coincidencia fuzzy, sin ranking de relevancia, sin previews de fragmentos. Los desarrolladores trabajando en Roblox Studio necesitan alt-tab a una aplicación separada y localizar manualmente la sección relevante. Sin una herramienta de referencia construida a propósito, los documentos de diseño se convierten en artefactos que se escriben una vez y el equipo evita consultar.
La Solución
El MazeBreak GDD Wiki aborda cada punto de fricción con decisiones de diseño específicas: Ctrl+K abre un modal de búsqueda tipo command-palette con coincidencia fuzzy de Fuse.js. 24 capítulos organizados en 7 grupos lógicos con sidebar colapsable, navegación anterior/siguiente, y tabla de contenidos con seguimiento de scroll. Las actualizaciones de contenido se despliegan en 60 segundos vía Git push. La autenticación Clerk restringe el acceso a usuarios aprovisionados sin costo. Interfaz en modo oscuro inspirada en Linear, Raycast y Stripe Docs con tipografía JetBrains Mono, bloques de código Luau con resaltado de sintaxis, y tablas de estadísticas con estilo apropiado.
Destacados Técnicos
- React 19 + Vite 7 con reemplazo de módulos en caliente y características modernas de React
- Búsqueda del lado del cliente vía Fuse.js — sin servidor, respuesta sub-50ms, funciona offline después de la carga inicial
- Importaciones glob de Vite: todos los archivos .md importados en tiempo de build vía import.meta.glob, eliminando fetching de archivos en runtime
- Pipeline de markdown personalizado: react-markdown con remark-gfm para tablas, rehype-highlight para bloques de código, y overrides de componentes para detección de callouts
- Layout responsivo de tres columnas: sidebar + contenido + tabla de contenidos, colapsando a una sola columna en móvil
- SPA con rewrites de Vercel para que React Router maneje todas las rutas — links directos y refresh del navegador funcionan correctamente
- Bundle de 357 KB gzipped — toda la aplicación incluyendo los 24 capítulos pesa menos de 500 KB
Resultados
- Eliminó el tiempo perdido desplazándose por el documento Word durante sesiones de desarrollo
- Reglas de diseño y tablas de estadísticas accesibles en 2-3 teclas desde cualquier navegador
- El contenido se mantiene actualizado con el mismo flujo Git usado para el código del juego
- Ambos miembros del equipo tienen acceso autenticado sin compartir credenciales ni links
- Arquitectura de aplicación web full-stack demostrando integración de auth, búsqueda del lado del cliente, pipeline de renderizado personalizado y despliegue a producción
- Bundle de 357 KB gzipped sirviendo todo el GDD como aplicación de una sola página
Puntos clave
Ideal para
- Equipos de desarrollo de juegos que necesitan acceso rápido y buscable a documentación de diseño
- Equipos que quieren gestión de contenido basada en Git sin un CMS
- Proyectos que requieren acceso restringido con autenticación de costo cero
- Documentación developer-first con atajos de teclado y modo oscuro
No resuelve por completo
- Sitios de documentación públicos (este es privado/autenticado)
- Edición colaborativa en tiempo real (es solo lectura, se actualiza vía Git)
- Equipos no técnicos que no manejan markdown ni flujos de Git
Qué obtienes
- Aplicación React 19 + Vite 7 de una sola página con búsqueda del lado del cliente
- Autenticación Clerk con Google sign-in (plan gratuito)
- Pipeline de renderizado markdown personalizado con resaltado de sintaxis y detección de callouts
- Layout responsivo de tres columnas: sidebar + contenido + tabla de contenidos
- Despliegue en Vercel con builds automatizados y enrutamiento SPA
¿Tienes un desafío similar?
Hablemos sobre cómo una solución así podría funcionar para tu equipo. Llamada gratis, sin compromiso.
Agendar Llamada Gratis