Un simulador interactivo y retro para aprender y practicar SQL directamente desde el navegador. Construido como una Single Page Application (SPA), este proyecto te permite sumergirte en 25 niveles y misiones desafiantes, manejando una base de datos SQLite real 100% en el lado del cliente gracias a WebAssembly.
- 📚 25 Misiones Interactivas: Desde consultas básicas (
SELECT,WHERE) hasta reportes avanzados y manipulación de datos. Cada misión tiene objetivos específicos con retroalimentación en tiempo real. - 💾 Motor SQLite Integrado: Ejecución real de consultas en el navegador usando
sql.js(SQLite compilado a WebAssembly). ¡Sin necesidad de un backend o servidor de base de datos externo! - 🎮 Gamificación y Logros: Sistema de logros desbloqueables con notificaciones visuales y sonoras ("First Blood", "Detective", "Master", etc.) guardados de forma local en tu navegador.
- 🧩 Modo Drag & Drop (Ensamblaje): Niveles especiales diseñados para construir consultas arrastrando y soltando bloques (ideal para aprender la estructura sintáctica), impulsado por
SortableJS. - 🕵️♂️ Modo Auditoría: Misiones enfocadas en encontrar errores lógicos y de sintaxis en códigos SQL pre-escritos.
- 🖥️ Interfaz Retro y Temas: Un diseño nostálgico con animaciones sutiles. Soporte para Modo Oscuro y Modo Claro.
- 💡 Enciclopedia SQL y Pistas: Ventanas flotantes integradas con documentación de comandos SQL, esquemas de bases de datos y ejemplos de uso.
- ⚡ Ejecución Local (
file://): Toda la aplicación está empaquetada estáticamente. ¡Puedes simplemente hacer doble clic enindex.htmly jugar sin necesidad de instalar ni correr servidores!
- HTML5, CSS3, JavaScript (ES6)
- Vite: Para el empaquetado ultra rápido del proyecto (
bundle.js). - sql.js: Motor de base de datos SQLite en WebAssembly.
- CodeMirror: Editor de código con resaltado de sintaxis SQL y autocompletado.
- SortableJS: Para la funcionalidad de Drag & Drop de los bloques de código.
- Phosphor Icons: Iconografía moderna y ligera.
Gracias al empaquetado estático, la forma más fácil de disfrutar el simulador es simplemente clonar el proyecto y abrir el archivo.
- Clona o descarga este repositorio:
git clone https://github.com/notayeen/SQLEARN.git
- Navega a la carpeta del proyecto.
- Haz doble clic en el archivo
index.htmlpara abrirlo en tu navegador favorito. ¡A jugar!
Si deseas modificar los archivos fuente (ubicados en src/) y compilar tus propios cambios:
- Instala las dependencias:
npm install
- Levanta el servidor de desarrollo local:
npm run dev
- Para generar un nuevo archivo unificado
bundle.jspara producción:npm run build
Antes de subir cambios conviene ejecutar el validador y los tests:
npm run validate— Ejecuta cada nivel contra un motor SQLite real (sql.js) y comprueba queinit_db_sql,expected_query,solution_data, los tokens de auditoría y los bloques Drag & Drop son consistentes.npm test— Tests unitarios (Vitest) del comparador de respuestas y de la validación de los 25 niveles.
El CI (GitHub Actions) ejecuta validate, test y build, y falla si el bundle.js commiteado no está actualizado, para evitar divergencias entre fuente y artefacto desplegado.
Ctrl + Enter: Ejecutar la consulta SQL escrita en el editor.Ctrl + Space: Activar el menú de autocompletado inteligente de palabras clave SQL.- Puedes explorar la base de datos de manera libre (sandbox) ejecutando cualquier consulta, sin que esto afecte el progreso de tu misión actual.
¡Las contribuciones, problemas (issues) y solicitudes de extracción (pull requests) son bienvenidas! Siéntete libre de añadir nuevos niveles JSON en la carpeta de configuraciones o mejorar el motor de evaluación.
Desarrollado con pasión para mejorar las habilidades de análisis de datos de manera interactiva y divertida.