A study platform for three university CS courses, where the automata, parsers, and data structures aren't diagrams you read but machines you step through.
Live demo. Click Run to load the real app and use it right here, or open it full-screen.
Study Hub is a study platform for three of my university computer-science courses: Lenguajes Formales, Estructuras de Datos y Algoritmos, and Sistemas de Gestión de Datos. Each subject has its own dashboard of practice problems with simple, formal, and full solution tabs, topic explanations, handwritten-style study notes, and exam quizzes, all pre-authored as MDX with KaTeX math. One typed subject config and one shared design system drive all three, so a subject owns a single accent and every surface resolves to it automatically.
The part that matters is that the hard theory is interactive, not static. Automata render as live state graphs: DFA, NFA, PDA, and Turing machines laid out by ELK and drawn with ReactFlow, that you step through one symbol at a time while the active transition lights up, the stack grows, and the tape moves. The parsing unit adds FIRST and FOLLOW sets, LL(1) and SLR tables, and shift-reduce traces, alongside grammar transforms and newer sorting and database-schema visualizers. A key-free MCP server exposes the whole content store to Claude over stdio as typed read and authoring tools, and the app runs fully offline with seeded content, self-hosted fonts, and no API keys.
CS courses lean on ideas that are genuinely dynamic: a machine consuming a string, a stack rising and falling, a parser reducing a handle. They are usually taught with static blackboard snapshots and PDFs. I wanted one place that holds a whole semester of three courses and makes those moving parts actually move, with solutions I can read at three depths and content an agent can extend without touching a database.
webappThe Astro 6 dashboard: per-subject problem lists, simple/formal/full solution tabs, explanations, notes, and exam pages, with a React island mounted for every interactive visualization.
vizlibraryThe React visualization library: ReactFlow + ELK automata, PDA, and Turing-machine graphs, LL(1)/SLR parse tables, shift-reduce and relational-algebra traces, sorting steppers, and one shared step-animation runner.
contentcontentThe MDX content store: problems, three-depth solutions, explanations, handwritten notes, and tests per subject, plus the JSON datasets that feed each visualization.
mcpserverThe key-free stdio MCP server: 16 tools (10 read, 6 write) over pure file I/O that read and author the content store, with zod validation mirroring the Astro content config.
configconfigThe subject registry: one typed SubjectConfig per course (units, topics, exams, viz enums) that drives routing, dashboards, and the per-subject accent triad.