Curso interactivo de JavaScript con editor de código en el navegador, sistema de progreso gamificado y sincronización en la nube
JavaScript está en tus manos es una plataforma de aprendizaje web construida con Remix, React y Supabase. Ofrece 23 lecciones interactivas organizadas en 4 módulos progresivos, con un editor de código integrado que ejecuta y valida ejercicios en tiempo real, un sistema de insignias y puntos, y sincronización del progreso entre dispositivos.
Diseñada con enfoque mobile-first, modo oscuro/claro, y estándares WCAG AA de accesibilidad.
- Editor interactivo — Escribe y ejecuta JavaScript directamente en el navegador con resaltado de sintaxis y tests automáticos
- 23 lecciones en 4 módulos — Desde fundamentos hasta algoritmos y estructuras de datos
- Sistema de gamificación — Insignias, puntos y barra de progreso por módulo
- Sincronización en la nube — Progreso guardado en Supabase, accesible desde cualquier dispositivo
- Modo oscuro / claro — Toggle con persistencia en localStorage
- Totalmente responsivo — Mobile-first con touch targets optimizados
- Accesible — Skip links, ARIA labels, focus-visible, prefers-reduced-motion
- SEO optimizado — Meta tags dinámicos, sitemap XML, robots.txt, JSON-LD
| Capa | Tecnología | Versión |
|---|---|---|
| Framework | Remix | ^2.16.5 |
| UI | React | ^18.3.1 |
| Estilos | Tailwind CSS | ^4.1.8 |
| Backend | Supabase | ^2.49.4 |
| Animaciones | Framer Motion | ^12.7.4 |
| Iconos | Lucide React | ^0.475.0 |
| Bundler | Vite | ^6.3.5 |
- Node.js >= 18
- npm o pnpm
# Clonar el repositorio
git clone https://github.com/kraso/curso-javascript.git
cd curso-javascript
# Instalar dependencias
npm install
# Configurar variables de entorno
cp .env.example .env
# Editar .env con tus credenciales de Supabase
# Iniciar servidor de desarrollo
npm run devVITE_SUPABASE_URL=https://tu-proyecto.supabase.co
VITE_SUPABASE_ANON_KEY=tu-clave-anon| Comando | Descripción |
|---|---|
npm run dev |
Servidor de desarrollo con hot reload |
npm run build |
Build de producción |
npm start |
Servidor de producción |
npm run lint |
Linting con oxlint |
curso-javascript/
├── app/
│ ├── components/
│ │ ├── course/ # CodeEditor, LessonCard, SidebarNavigation, RewardBadge
│ │ ├── landing/ # Hero, Features, CourseOutline, CTA, AnimatedBackground
│ │ ├── layout/ # Navbar, Footer
│ │ ├── ui/ # Button, Modal, ProgressBar
│ │ ├── JsonLd.jsx # Datos estructurados JSON-LD
│ │ └── SkipLink.jsx # Skip link de accesibilidad
│ ├── data/
│ │ └── lessons.js # 23 lecciones con ejercicios y tests
│ ├── hooks/
│ │ ├── useAuth.js # Autenticación Supabase
│ │ ├── useProgress.js # Progreso local + sincronización nube
│ │ └── useTheme.js # Tema oscuro/claro con persistencia
│ ├── lib/
│ │ ├── supabase.js # Cliente Supabase
│ │ ├── progress.js # Lógica de progreso y sync
│ │ └── utils.js # Utilidades (cn)
│ ├── routes/
│ │ ├── _index.jsx # Landing page
│ │ ├── login.jsx # Inicio de sesión
│ │ ├── registro.jsx # Registro
│ │ ├── perfil.jsx # Perfil de usuario
│ │ ├── curso.jsx # Layout del curso
│ │ ├── curso._index.jsx # Índice de lecciones
│ │ ├── curso.$leccionId.jsx # Lección individual
│ │ ├── sitemap[.]xml.jsx # Sitemap dinámico
│ │ └── robots[.]txt.jsx # Robots.txt
│ ├── styles/
│ │ └── global.css # Estilos base + modo claro
│ ├── utils/
│ │ └── syntax.js # Resaltado de sintaxis + parseMarkdown
│ ├── root.jsx # Root layout
│ └── entry.*.jsx # Entry points de Remix
├── public/
│ ├── docs/ # Material fuente de las 23 lecciones
│ ├── favicon.svg
│ ├── Privacidad.md
│ └── Terminos.md
├── .opencode/agents/ # Agentes SEO, accesibilidad, responsividad
└── supabase-migration.sql # Migración de la tabla progreso_usuario
| # | Módulo | Lecciones | Temas |
|---|---|---|---|
| 1 | Fundamentos | 7 | Qué es JS, Hola Mundo, Variables, Operadores, Control, Funciones |
| 2 | Intermedio | 7 | Objetos, Arrays, Funciones avanzadas, Closures, DOM, Eventos |
| 3 | Avanzado | 6 | Prototipos, Callbacks, Promesas, Async/Await, Módulos, Regex |
| 4 | Especialización | 3 | Algoritmos, Estructuras de datos, Proyecto práctico |
Ejecuta el script supabase-migration.sql en el SQL Editor de Supabase para crear la tabla progreso_usuario con Row Level Security.
- Haz fork del repositorio
- Crea una rama para tu feature (
git checkout -b feature/nueva-funcionalidad) - Haz commit de tus cambios (
git commit -m 'feat: add new feature') - Push a la rama (
git push origin feature/nueva-funcionalidad) - Abre un Pull Request
Marcos Calabrés Ibáñez — marcoscalabresibaniez@gmail.com
Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.
Hecho con ❤️ para la comunidad de aprendizaje de JavaScript