I built CodeSprint because I realized getting good at typing code requires practicing syntax fluency, not just logic. I found myself screwing up on mock interviews not because I didn't know the algorithm, but because I fumbled the syntax. I needed a way to drill "Depth First Search in Python" or "Ring Buffer in C++" until my fingers actually knew the shape of the code.
The Engineering:
Renderer: Uses a heavily customized Monaco Editor instance. I'm using deltaDecorations to paint diffs directly onto the editor model without breaking syntax highlighting, and getScrolledVisiblePosition for a custom, low-latency caret.
Data Pipeline: I didn't want to hardcode snippets. I wrote a custom Bun script (scripts/sync-leetcode.ts) that reverse-engineers the LeetCode GraphQL API to pull real problem snippets, sanitizes them, and normalizes indentation.
Latency: To handle high WPM without UI lag, the typing engine isolates keystroke processing from the main React render cycle where possible.
Repo: https://github.com/cwklurks/codesprint Live Demo: https://codesprints.vercel.app/
I'm a 15-year-old student from Vancouver. Would love feedback on the typing engine feel vs. native VS Code!