Proyecto
Algorithms Practitioner
Practica algoritmos y estructuras de datos con visualizaciones paso a paso, bilingüe e interactivo.
Objetivo
Plataforma educativa interactiva, solo frontend, pensada para dominar algoritmos y estructuras de datos a base de práctica. Combina un catálogo de ejercicios con visualizaciones SVG paso a paso que muestran cómo progresa cada algoritmo, además de la posibilidad de ejecutar entradas propias y ver el resultado en tiempo real. La interfaz es bilingüe (español/inglés) y soporta modo claro y oscuro, priorizando la accesibilidad.
Cómo funciona
- Catálogo de ejercicios Colección curada de ejercicios de algoritmos y estructuras de datos, organizados para avanzar de forma progresiva.
- Visualización paso a paso Cada algoritmo se ilustra con visualizaciones SVG que muestran su evolución paso a paso, facilitando entender qué ocurre en cada iteración.
- Entradas personalizadas Permite ejecutar entradas propias y observar el resultado en tiempo real, experimentando con casos límite y datos arbitrarios.
- Progreso y portabilidad El avance y las preferencias se guardan en el navegador. Los datos se pueden exportar e importar como JSON para moverlos entre dispositivos.
Almacenamiento local
Toda la información vive en el navegador mediante localStorage, sin necesidad de componentes de servidor. El progreso y las preferencias se pueden exportar como archivo JSON para llevarlos a otro dispositivo e importarlos de vuelta, garantizando portabilidad total sin cuentas ni base de datos.
Arquitectura
El frontend es una aplicación Astro con TypeScript vanilla, sin frameworks de componentes. La infraestructura de hosting está definida como código con AWS CDK v2. El desarrollo sigue prácticas guiadas por pruebas con Vitest, y el despliegue está automatizado con GitHub Actions, que corre los tests antes de hacer el build y publicar en S3 servido por CloudFront.
Servicios AWS
- S3 Almacenamiento del sitio estático generado por Astro
- CloudFront CDN para distribución global del contenido
- ACM Certificado TLS para HTTPS
- Route 53 DNS y enrutamiento del dominio
- CloudFormation / CDK Infraestructura como código en TypeScript
- GitHub Actions CI/CD: corre tests, build y despliegue automatizado
Stack