Syncs

Coding interview walkthroughs you can pause, edit, and make your own.

Comment

Inspiration

Learning to code is not that hard. The way it is taught makes it hard.

YouTube lets you watch someone else be good at it. Codecademy lets you fill in blanks. Both feel like progress, and both are passive: you nod along for months, then freeze in your first interview, because nobody asks you to watch in an interview. They ask you to think out loud while you type.

That is a skill, and almost nothing trains it. So we built syncs: interview prep where you see how an engineer actually thinks, question it on the spot, and then do it yourself.

What it does

A sync is a coding walkthrough that is still code. It replays every keystroke in a real editor, in time with the creator's voice, wrong turns included.

The loop is watch, ask, do:

  • Watch the thinking, not just the answer. See the first attempt, the pause, the fix. Pause anywhere.
  • Ask, right there. Click any line and ask Blink, our mascot, about it. Type, or talk out loud while a pointer moves to the code Blink is describing. A video can't answer you. A sync can.
  • Do it yourself. Open the same problem and record your own sync: solve it in TypeScript, JavaScript, Python, or Java, run the tests, and explain as you go. That is the interview, rehearsed.
  • Blink edits it for you. It trims dead air and filler, speeds through long typing, zooms in on the key moment, and adds chapters. Ask for anything specific in plain words. If your take is already tight, Blink says so and changes nothing.
  • Post it. Your sync joins a public library, and doubles as proof you can explain your code.

How we built it

We did not record video. A sync is a list of timestamped keystrokes with a snapshot every 5 seconds, so jumping to any moment is a binary search, $O(\log n)$, and the voice track is the clock everything follows. A full walkthrough is a few kilobytes, and edits are just instructions applied at playback, so nothing is ever re-rendered.

  • Studio and player: Next.js 16 and CodeMirror 6
  • Running code: JS and TS in a Web Worker, Python in the browser with Pyodide, Java in an isolated runner service
  • Blink's judgment: a decision model (Jev, through Vercel AI Gateway) answers small yes/no questions about each part of the take. The edit itself is assembled in ordinary code, so it is predictable and every change can be switched off.
  • Voice: ElevenLabs Scribe for word-by-word transcripts, which drive captions and filler cuts, and ElevenLabs speech for Blink's answers
  • Live conversation: Gemini Live, with tools that let Blink point at and highlight code
  • Data and sign-in: Neon Postgres and Neon Auth, deployed on Railway

Design

If learning feels like a chore, people quit, so we designed against that. Warm paper around a dark stage. No red anywhere, because red next to code reads as an error. A failing test is amber: the next thing to fix, not an alarm. And Blink, a text cursor with eyes, is the playhead, the editor, and the voice, so the product has one character instead of a dozen buttons.

Challenges

  • Playback looked like pasting. Sped-up typing appeared in chunks. We capped speed at a readable 12 keys per second and made pasted code type itself out.
  • The model copied its instructions. Asked to "edit in this style," it repeated the style back. We changed it to only classify what happened, and moved style into code.
  • "Zoom in on hello" found nothing. Auto-closing brackets scramble raw keystrokes, so we now match requests against what is on screen.
  • Blink's pointer drifted from its voice. It took three attempts. The pointer now follows the live transcript word by word.
  • Python would not load until we moved Pyodide into a module worker.

What i learned

Small questions beat big prompts. A model that answers one clear question, with a confidence we can read, is easier to trust than one asked to do everything. And on the product side: people don't need more content to watch. They need a reason to open the editor and talk.

What's next

Recording on phones (today phones are watch-only), answers in the creator's own voice, and a hiring view where a candidate's sync replaces the whiteboard: the company sees how you think, not just whether the tests passed.

Built With

Share this project:

Updates

Submission history