My-CSS-Battle

I solve CSSBattle puzzles daily, but the site doesn't keep a proper history of my solutions or show how I'm improving. I wanted every solution saved, compared, and turned into stats, without copy-pasting anything.

Two pieces: a Chrome extension that captures a solution when I test it on CSSBattle, and a website that turns the archive into dashboards, streaks, a daily heatmap and a solution viewer. The extension is reusable: anyone can point it at their own GitHub repo and get the same site.

• GitHub is the database. No backend and no database server. The extension writes JSON to a repo through the GitHub API, and Vercel redeploys on every push. It costs nothing, it's fast, and every change is versioned.
• Publishing is a deliberate step. I test lots of attempts, but only publish the ones worth keeping, so experiments don't turn into noise commits.
• Up to three named approaches per puzzle, with the highest-scoring one shown first.

My first version synced every solution automatically. It sounded ideal, but CSSBattle is all trial and error, so the archive filled up with half-finished attempts. I redesigned it around one idea: nothing gets saved until I decide it's worth keeping. That meant a publish step, named approaches so I could keep different solutions for the same puzzle, and a guard so bad data can't overwrite good data. It took three rounds to feel right. I built it with AI as my pair programmer, and the lesson was mine: the obvious design isn't always the right one, and you only find out by using it.

No roadmap. I use it every day, and the next fix is whatever annoys me next.