I built Commitea: Git and GitHub explained in Spanish, with an interactive visualizer

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: Commitea.

What is it?

Two pieces, designed to complement each other:

An open source repo with the full documentation in Spanish — from what a commit actually is, to how to get yourself out of trouble with rebase, a cherry-pick, or a push you regret. Every entry follows the same format: the concept in one sentence, a real example with commands, and "how this breaks" (the typical mistake people make).

A web app with an interactive visualizer (commitea-web.vercel.app) 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 an edit helper command to simulate uncommitted changes, since the simulator has no real filesystem), status, and log.


• 
  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 .md files 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: https://github.com/davidbc01/commitea

🔗 Site: https://commitea-web.vercel.app

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.