CodeReplay

Turn real GitHub commits into coding lessons you can replay, edit, and verify.

Comment

Inspiration

Most coding tutorials show the final answer. That is useful for copying, but weak for understanding how a real project changed over time. Git repositories already contain the decisions, experiments, fixes, and tradeoffs that produced the final code. The problem is that raw commit history is designed for reviewing changes, not for teaching them.

I built CodeReplay to turn that history into something you can actually learn from. Instead of watching another generic tutorial, you can step through real checkpoints from a real codebase and practice reconstructing the work yourself.

What it does

CodeReplay converts recent commits from any public GitHub repository into a short, interactive coding lesson.

A learner can:

  • Paste a public GitHub repository URL
  • Load up to six recent usable commits
  • Move forward and backward through a visual commit timeline
  • Read the real source file as it existed at each commit
  • See which lines changed between compatible checkpoints
  • Open the original repository or exact commit for verification
  • Switch into Practice mode and edit the source
  • Check the edited version against the original checkpoint
  • Restore the original source after an incorrect attempt
  • Copy the source or reset the lesson at any time
  • Try the product immediately with a built-in example

The interface is responsive, keyboard accessible, and designed to work without creating an account.

How I built it

The frontend is built with React, Vite, JavaScript, CSS, and Lucide icons. The public version is deployed on Vercel.

When a repository is imported, CodeReplay:

  1. Parses and validates the GitHub URL.
  2. Requests the repository's six latest commits using the GitHub REST API.
  3. Inspects the files changed by each commit.
  4. Filters out lock files, generated assets, binary formats, and oversized files.
  5. Selects a readable source file from each usable commit.
  6. Fetches that file at the exact commit SHA through GitHub's contents API.
  7. Decodes the returned Base64 data in the browser.
  8. Reverses the usable commits into chronological learning checkpoints.
  9. Compares compatible files and highlights changed lines.
  10. Builds a replay and practice experience around the real source.

Everything happens directly in the browser. CodeReplay has no backend, database, tracking system, or private code store. Imported source is displayed but never executed.

Product and design decisions

I wanted the interface to feel like a serious developer tool, not a generic AI dashboard. The design uses a paper-white canvas, deep navy typography, cobalt controls, and a small orange signal color. The main navigation is a commit film strip instead of a normal stepper, making the relationship between history and learning obvious.

Motion is limited and respects reduced-motion preferences. Focus states are visible, controls use semantic buttons and labels, and the layout adapts to mobile screens.

Challenges I ran into

The biggest technical challenge was retrieving real source reliably from a browser. Direct requests to raw GitHub files can fail under privacy-focused browsers because of cross-origin restrictions. I solved this by using GitHub's CORS-safe contents API and decoding file data locally.

Another challenge was deciding what counts as a useful lesson checkpoint. A commit may only change a lock file, generated output, an image, or an extremely large file. CodeReplay filters those cases so the learner sees readable source instead of noise.

Diff highlighting also needs context. Line-level comparison is only shown when consecutive checkpoints use the same file. This avoids pretending that unrelated files form a meaningful diff.

Accomplishments that I'm proud of

  • The public demo imports real repositories instead of using fake generated data
  • No account, token, backend, or setup is required
  • Every checkpoint links back to the original GitHub commit
  • Practice mode gives immediate exact-match feedback
  • Invalid repository URLs and failed API requests have clear error states
  • The full import, replay, practice, reset, validation, responsive layout, and production deployment were tested end to end
  • Imported repository code is never executed or stored
  • The project is fully open source

What I learned

I learned that a commit is not automatically a lesson. The product has to choose useful source, preserve the exact historical version, explain where the learner is in the sequence, and give them something concrete to do.

I also learned that a small product can feel much more complete when error states, accessibility, privacy, source verification, responsive behavior, and honest limitations are treated as core features instead of polish added at the end.

Current limitations

CodeReplay currently supports public GitHub repositories only. GitHub's unauthenticated API rate limit applies per visitor. The app automatically chooses one readable source file from each commit, and Practice mode checks exact source equality rather than executing untrusted code.

These are intentional limits for the public demo. They keep the product fast, private, and safe.

What's next for CodeReplay

The next version could add GitHub OAuth for higher rate limits, manual file selection, custom commit ranges, syntax-aware diffs, shareable lesson links, progress persistence, guided hints, and isolated sandbox execution for safe tests.

The bigger goal is to make open-source history a learning format of its own: real code, real decisions, and real practice.

Built With

Share this project:

Updates