Marginalia — DSA Pattern Detector

Recognizing the pattern is usually the hardest part of solving a DSA problem — once you know it's a sliding window problem, the rest is mechanical. Most tools stop at "here's a code editor." I wanted something that made that first, hardest step visible instead of instinctive. (To be honest i was struggling with DSA so i decided to make it for myself :) )

What it does:- Marginalia takes a pasted DSA problem statement and identifies which algorithmic pattern it matches — Two Pointers, Sliding Window, Binary Search, Dynamic Programming, Backtracking, BFS/DFS, Greedy, Union-Find, Heap, Trie, Bit Manipulation, or Fast & Slow Pointers. GPT-5.6 scores every candidate pattern, explains exactly which phrases in the problem gave it away, and the app hands back a starter code template in C++ or Python.

The whole thing is styled like a notebook page: graph-paper background, a red pen literally circles the winning pattern on an animated constellation of nodes, and margin notes point at the trigger phrases in handwriting font.

How I built it:- Scaffolded the design system, pattern catalogue, and core detection logic first, then handed the project to Codex for a full engineering pass: splitting the logic into ES modules (detection, radar rendering, DOM/state), adding keyboard-accessible interactive nodes with tooltips, an animated loading state, mobile responsiveness, stronger accessibility/contrast, and hardening the GPT-5.6 API call with a timeout, response validation, and a local keyword-heuristic fallback so the UI never breaks.

Challenges I ran into

• ES modules are blocked by CORS when opened via file:// — had to serve the app locally to test, and deploy to GitHub Pages for it to work over real https://.
• Free-tier API limits meant testing real GPT-5.6 detection was constrained — the app is built to gracefully fall back to a local heuristic when the API is unavailable, which turned into a genuine design feature.
• The heuristic itself can be fooled by problems that share vocabulary across patterns (e.g. "sorted" appears in both Two Pointers and Heap problems) — documented as a known limitation, since it's exactly the kind of ambiguity GPT-5.6's real reasoning is meant to resolve.

Built With

• codex
• css3
• es-modules
• github
• gpt-5.6
• html5
• javascript
• openai-api