Skip to content

MikaStiebitz/Git-Gud

Repository files navigation

GitGud: Master Git Through Play

GitGud Logo

An interactive Git learning platform that makes mastering Git fun

Try It Live · Features · Getting Started · Contributing

GitHub stars
If you find this project helpful, please consider giving it a star on GitHub!

Next.js 15 TypeScript Tailwind CSS

🚀 About The Project

GitGud is an interactive learning platform designed to help developers master Git through hands-on practice. While traditional tutorials often rely on passive learning, GitGud provides a fully simulated Git environment where you can:

  • Execute real Git commands in a safe sandbox
  • See immediate visual feedback
  • Progress through structured, bite-sized challenges
  • Learn Git intuitively through gamification

Whether you're a complete beginner or looking to level up your Git skills, GitGud offers an engaging, interactive approach to learning this essential developer tool.

🌐 Visit GitGud at www.gitmastery.me to start your journey!

No registration needed!

✨ Features

🎓 Core Learning Experience

  • 🖥️ Interactive Terminal: Practice Git commands in a realistic simulated environment
  • 🎯 Structured Learning Path: Progress through carefully designed levels of increasing complexity
  • 📊 Visual Git Status: See your repository status visually update as you work
  • 🎮 Playground Mode: Freely experiment with Git commands without level requirements
  • 📝 Command Cheat Sheet: Quick reference for Git commands with explanations
  • 📈 Progress Tracking: Track your learning journey with a visual progress system
  • 🌍 Multi-language Support: Available in both English and German

🎮 Gamification & Rewards

  • 🏪 In-Game Shop: Earn points and purchase customization items and power-ups
  • 🎨 Terminal Themes: Unlock beautiful terminal themes including Matrix, Golden, and Dark themes
  • 🐱 Git Mascot Pet: Purchase an animated mascot that cheers you on during challenging levels
  • 🔊 Victory Sound Pack: Satisfying sound effects when completing levels and achieving milestones
  • ⚡ Double XP Weekends: Boost your point earning with 2x multiplier for 7 days
  • 😊 Emoji Commit Messages: Smart emoji suggestions for better commit messages
  • 🏆 Achievement Badges: Visual recognition system with special badges and legendary status
  • 🎲 Mini Games: Practice Git skills through fun interactive challenges

🛠️ Tech Stack

GitGud is built with modern web technologies to provide the best learning experience:

Frontend Framework

  • Next.js 15 - React framework with server-side rendering, App Router, and performance optimizations
  • TypeScript - Type-safe development with enhanced IDE support and error catching
  • Tailwind CSS - Utility-first CSS framework for rapid, responsive design

UI & UX

  • Lucide React - Customizable SVG icon library
  • shadcn/ui - Re-usable component system built on Radix UI and Tailwind CSS

Game Engine & State Management

  • Custom Git Simulation - Full Git repository simulation in the browser
  • React Context API - Global state management for game progress, themes, and user data
  • LocalStorage - Client-side persistence for progress, purchases, and preferences

🚦 Getting Started

Prerequisites

  • Node.js (v18 or higher)
  • npm (v8 or higher)

Installation

  1. Clone the repository
git clone https://github.com/yourusername/gitgud.git
cd gitgud
  1. Install dependencies
npm install
  1. Start the development server
npm run dev
  1. Open your browser

Navigate to http://localhost:3000 to start learning Git!

📚 Documentation

For developers and contributors, detailed documentation is available to help you understand the codebase:

🤝 Contributing

We welcome contributions to GitGud! Whether you're fixing bugs, improving the documentation, or adding new features, please follow these steps:

  1. Fork the repository
  2. Create a new branch for your feature (git checkout -b feature/amazing-feature)
  3. Make your changes
  4. Commit your changes (git commit -m 'Add some amazing feature')
  5. Push to the branch (git push origin feature/amazing-feature)
  6. Open a Pull Request

For more details on the project structure, check the documentation linked above.

⭐ Support This Project

If you find GitGud helpful in your Git learning journey, please consider:

  • Giving it a star on GitHub: Visit github.com/MikaStiebitz/Git-Gud and click the star button
  • Sharing it with friends and colleagues who are learning Git
  • Contributing to make it even better

Your support helps this educational tool reach more developers!

📜 License

This project is licensed under the Restricted Use License - see the LICENSE file for details.


Made with ❤️ by Mika Stiebitz