Xinlong Bao包新龙

study · 2026

Algo

CLRS as 62 playable React lessons — plus a one-file companion visualizer you can run in this tab.

Live demoReact · TypeScript · Vite · Tailwind
Algo visual curriculum home

In the browser

Intro

A Vite + React 19 app named algo: Introduction to Algorithms, 3rd edition, rebuilt as visual lessons. Intuition first, formalism second. XP, stars, and streak live in Zustand (algolab-store-v1).

A second artefact, Algo Academy, is a single HTML file with Tailwind CDN and a shorter topic list. That file is the live iframe. The 62-lesson tree is the real curriculum; it needs npm run dev.

Method

Seven CLRS parts, 62 lessons, none marked comingSoon: foundations through selected topics (FFT, RSA, KMP, max-flow, NP, approximation). LessonPage lazy-loads every slug. Two skins: stepped visualizers (Big-O, binary search, insertion/bubble sort) and ConceptLesson (hook, sections, pseudocode, quiz). No SRS.

Academy is four levels × five topics, twelve of them interactive, the rest stubs. Progress keys algo.done / algo.active. It is not the Vite app and not CLRS-complete.

Demo

Below: Academy in the browser. For the CLRS app: cd Projects/Algo && npm run dev — localhost:5173, start with Big-O, finish a lesson, confetti, reload, XP still there.

Conclusion

Two artefacts, one card. The iframe is the companion. The Vite tree is the textbook. A duplicate one-file folder next to Algo was removed from disk because this site already hosts that HTML.

Algo Academy one-page companion