CommitCraft

The interactive visual Git playground, 16-error emergency rescue matrix, and gamified quest platform for beginner developers. See Git, understand code, and never panic.

Comment

Inspiration

What it does

How we built it## 💡 Inspiration

When beginners first start programming, they don't quit because of logic, loops, or if/else statements. They quit when their terminal throws a terrifying wall of cryptic red text — like fatal: refusing to merge unrelated histories, EADDRINUSE :::3000, or Cannot read properties of undefined.

In standard command-line interfaces, Git is an invisible black box. Young developers type commands without seeing how their branches move or why merge conflicts occur.

We built CommitCraft specifically for the FirstCommit hackathon to transform Git and coding errors into an interactive, animated visual playground and a 2 AM emergency rescue kit.

🚀 What It Does

CommitCraft is a 100% client-side, interactive developer platform featuring 4 core modules:

  1. 🌿 Visual Git DAG Canvas: Every Git command (init, commit, branch, checkout, merge, reset) is drawn in real time using animated cubic bezier curves and glowing commit circles powered by Framer Motion. Clicking any commit node opens a metadata inspector showing commit hashes and parent pointers.
  2. 🚨 16-Error Emergency Rescue Matrix: A curated diagnostic catalog covering the most common beginner nightmare errors across Git, NPM, Node.js, JavaScript, React, and CORS. Each card breaks down:
    • What Happened (Plain English)
    • Why It Happened (Root Cause)
    • 1-Click Copy Fix (with a "Try in Sandbox" button that teleports you back to the visual canvas).
  3. 🏆 Gamified Guided Quests: 3 hands-on interactive missions (The Genesis Commit, Parallel Realities, The Clean Integration) with live regex step validation, persistent XP/levels, and full-screen celebratory confetti bursts unlocking achievement trophies stored in localStorage.
  4. 🔀 Merge Conflict Resolution Lab: A side-by-side 3-way visual diff tool that demystifies <<<<<<< HEAD markers and allows 1-click resolution ("Accept Current", "Accept Incoming", or "Accept Both").

🛠️ How We Built It

  • Frontend Framework: React 18 with TypeScript for type-safe state management.
  • Styling & Theme: Tailwind CSS with a Linear/Vercel-inspired cyber-dark aesthetic and glassmorphic panels.
  • Graph Animation Engine: Custom Directed Acyclic Graph (DAG) state machine rendered with SVG and Framer Motion spring physics.
  • Audio & Celebrations: Zero-asset Web Audio API tone synthesizer for tactile click feedback and Canvas Confetti for trophy unlocks.
  • Hosting & Infrastructure: Deployed on Cloudflare Pages global edge network (https://commitcraft.pages.dev) with unmetered bandwidth.

🧗 Challenges We Ran Into

  • Topological SVG Graph Math: Calculating dynamic (X, Y) coordinates and smooth cubic bezier connection paths for multi-lane branch splits and 3-way merge commits without visual overlap.
  • Client-Side Regex Matching: Crafting robust signature regular expressions that can match diverse real-world terminal stack traces while providing accurate, context-aware remediation commands.
  • Zero-Dependency Sound Synthesis: Building a lightweight procedural Web Audio synthesizer to provide satisfying tactile audio feedback without relying on external audio files or slow network assets.

🎖️ Accomplishments We're Proud Of

  • Building a completely functional, zero-latency Git simulator that runs 100% in the browser with no backend required.
  • Creating an intuitive, beginner-friendly UI that makes complex concepts like HEAD detachment and 3-way merge algorithms immediately obvious.
  • Progressive Git history with 14 atomic, well-documented commits on GitHub.
  • Sub-100ms global page loads on Cloudflare Pages.

📚 What We Learned

  • How Git models version history internally as a Directed Acyclic Graph (DAG) of commit objects, parent pointers, and ref heads.
  • How to implement accessible, keyboard-friendly command-line interfaces in React.
  • How to deploy and configure static SPAs with client-side routing on Cloudflare Pages.

🔮 What's Next for CommitCraft

  • Expanding the error catalog to 50+ patterns covering Python, Rust, and Docker.
  • Interactive rebase (git rebase -i) visual sandbox.
  • GitHub OAuth integration to visualize real GitHub pull requests and commit graphs directly inside the app.

📖 AI Usage Disclosure (FirstCommit Rule #5 Compliance)

  • How AI Was Used: AI tools (Antigravity pair programming assistant) were utilized as learning, brainstorming, and code refactoring aids. Specifically, AI assisted in brainstorming edge-case beginner Git error signatures for the 16-pattern diagnostic matrix and formulating cubic bezier SVG path geometry.
  • Developer Ownership: All architectural decisions, state machine design, component hierarchy, interactive quest logic, and visual styling were actively designed, guided, understood, and tested by the developer.

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for CommitCraft

Built With

Share this project:

Updates

Submission history