ES

Project

Algorithms Practitioner

Practice algorithms and data structures with step-by-step visualizations, bilingual and interactive.


Goal

An interactive, frontend-only educational platform built to master algorithms and data structures through hands-on practice. It combines a catalog of exercises with step-by-step SVG visualizations that show how each algorithm progresses, plus the ability to run your own inputs and see the result in real time. The interface is bilingual (English/Spanish) and supports light and dark mode, prioritizing accessibility.


How it works

  1. Exercise catalog A curated collection of algorithm and data-structure exercises, organized to progress step by step.
  2. Step-by-step visualization Each algorithm is illustrated with SVG visualizations that show its progression step by step, making it easier to understand what happens on every iteration.
  3. Custom inputs Run your own inputs and observe the result in real time, experimenting with edge cases and arbitrary data.
  4. Progress and portability Progress and preferences are saved in the browser. Data can be exported and imported as JSON to move it across devices.

Local storage

All data lives in the browser via localStorage, with no need for server-side components. Progress and preferences can be exported as a JSON file to move them to another device and imported back, ensuring full portability with no accounts or database.


Architecture

The frontend is an Astro application with vanilla TypeScript, with no component frameworks. The hosting infrastructure is defined as code with AWS CDK v2. Development follows test-driven practices with Vitest, and deployment is automated through GitHub Actions, which runs the tests before building and publishing to S3 served by CloudFront.


AWS services


Stack

AstroTypeScriptVitestlocalStorageAWS CDKS3CloudFrontACMRoute 53GitHub Actions