All projects

Full-Stack ProductPrototype

DSAKarle

Interactive algorithm visualization platform for learning DSA execution.

A look inside

3 screens from the real build. Select any to see it full size.

The home page runs a real walkthrough instead of a hero image. Press the arrow key and the sliding window moves one decision at a time.
Every lesson follows the same seven moves, from picture and hook to code and practice. Here the diagram labels the pointers smallest and largest, and states the rule: move the one that helps.
The pattern map shows what each topic builds on. Round nodes are data structures, square nodes are algorithms, and arrows point from what to learn first to what it unlocks.

Overview

Step-by-step DSA walkthroughs where JSON state objects drive synchronized SVG animation, variable tracing, and code highlighting.

The problem

Traditional DSA learning resources are static and fail to convey how algorithms execute step-by-step on real data structures.

What I built

Built the Next.js architecture, content schema, visualization state model, and search/indexing flow.

What it does

  • Algorithm steppers
  • Variable tracing
  • Code highlighting
  • Search

System and architecture

A JSON-driven stepper engine synchronizes SVG visuals, code highlights, variable state, and searchable lesson content.

Next.js app with a JSON-driven stepper engine. Each algorithm is defined as discrete validated state objects that synchronize SVG visualizations, code highlighting, and variable tracing.

System map1 layer
  1. Interface
  • Validated JSON state model for algorithm steps
  • Synchronized SVG visualization and code highlighting
  • Build-time search index for fast content lookup

Technology

  • Next.js
  • TypeScript
  • Framer Motion
  • Fuse.js
  • Zod
  • Shiki

Themes

  • Education
  • Visualization
  • Algorithms

Challenges and trade-offs

  • Keeping visual state, code state, and explanatory content synchronized.
  • Designing reusable state objects across different algorithm families.

Outcome

At a glance

25+ topics · 300+ micro-steps · Build-time search index

  • Built a structured learning product for visualizing algorithms step by step.
  • Used schema validation to make complex educational content easier to maintain.
  • Authored 25+ DSA topics with 300+ micro-steps.

Learnings

  • Interactive education products benefit from treating content as typed data.
  • Schema-first content makes future algorithm additions less fragile.

Links open in a new tab.