When I started programming, Git was hard for me — like anything new is at first. Over time I noticed something: most of the best resources for learning it are in English. And for a lot of people just starting out, that's one more obstacle they shouldn't have to deal with.
So in my spare time I built the thing I wish I'd had back then: ) where you type real Git commands and watch, live, what happens to the branch/commit graph. It doesn't touch any real repo — it's an in-memory simulator, but the engine actually replicates real Git behavior: fast-forward vs. merge commit detection, history rewriting on rebase, blocking a branch switch when you have uncommitted changes (just like real Git does), etc.
What's in it right now
7 built-in scenarios you can run with one click and watch play out step by step: branch + merge, fast-forward, rebase, cherry-pick + reset --hard, fixing a commit made on the wrong branch, several branches merging in sequence, and stashing changes.
Full command support:branch,checkout,commit,merge,rebase,cherry-pick,reset --hard,stash(with anedithelper command to simulate uncommitted changes, since the simulator has no real filesystem),status, andlog.
Site-wide search (⌘K), powered by Pagefind, indexing only the actual article content — not nav or boilerplate.
A feedback widget on every article ("was this helpful?") that stores vote counts in Redis, so I know which content needs work without guessing.
Light/dark mode, respecting system preference by default.
A changelog page, because this is a living project and I want the history of what's shipped to be visible, not buried in commit messages.
A few technical details, if you're curious
- The site is built with Astro + Tailwind v4, no UI framework — everything interactive (the terminal, the visualizer, the search modal) is vanilla JS inside Astro components.
- The content doesn't live duplicated in the website's repo. There's a custom Astro Content Layer loader that pulls the
.mdfiles straight from the public GitHub repo at build time, so the repo stays the single source of truth. A GitHub Action in the public repo pings a Vercel deploy hook on every content push, so the site rebuilds itself automatically. - The graph renders as SVG with incremental DOM updates — nodes and edges are diffed by a stable id and their attributes updated in place, instead of destroying and recreating the whole SVG on every command. That's what makes the transitions actually animate instead of just snapping into place.
- The feedback endpoint is the only non-static route on the site — a single Vercel serverless function (
export const prerender = false), everything else is prerendered HTML.
How you can help
This is a living project, not a closed course. If you get stuck on something that isn't documented, or spot a mistake, issues and PRs are open. The more real questions it collects, the more useful it becomes for the next person who hits the same wall.
🔗 Repo:
If you know someone learning to code (or someone who's been at it a while but never quite got rebase), this is for them.
SOCIAL SHARE CARD GENERATOR