GitMaster - Interactive Git Learning Platform

Master Git through interactive lessons, hands-on practice, and real-world scenarios. Learn Git the right way, one commit at a time.

Features

• Interactive Terminal: Practice real Git commands in a safe environment
• Progressive Learning: 6 levels from basic commits to advanced branching
• Visual Git Tree: See your commit history and branch structure in real-time
• Mobile-First Design: Touch-friendly interface optimized for all devices
• Persistent Progress: Your progress is saved locally and persists across sessions
• No Installation Required: Runs entirely in your browser

Quick Start

Prerequisites

• Node.js 18+ and npm
• Modern web browser with JavaScript enabled

Installation

# Clone the repository
git clone https://github.com/ernsahin/git-master-game.git
cd gitmaster

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser to start learning!

Screenshots

Landing Page	Learning Module
Workflow Overview	Interactive Game Interface

Learning Path

Level 1: Git Basics

Learn the fundamental three-state workflow: Working Directory → Staging Area → Repository

Level 2: Selective Staging

Master making focused, atomic commits with selective file staging

Level 3: Terminal Commands

Practice real Git commands using the integrated terminal interface

Level 4: Branching Basics

Create and switch between branches for feature development

Level 5: Multi-Branch Workflow

Work with multiple branches and manage parallel development

Level 6: Git History

Master viewing commit history and creating descriptive commit messages

Technology Stack

• Framework: Next.js 15 with App Router
• Frontend: React 19 with TypeScript
• Styling: Tailwind CSS 4
• State Management: Zustand with localStorage persistence
• Icons: Lucide React
• Build Tool: Turbopack (Next.js bundler)

Development

Available Scripts

npm run dev          # Start development server with Turbopack
npm run build        # Build for production
npm start           # Start production server
npm run lint        # Run ESLint

Project Structure

src/
├── app/                 # Next.js app router pages
│   ├── page.tsx        # Landing page
│   ├── game/page.tsx   # Main game interface
│   ├── layout.tsx      # Root layout with fonts
│   └── globals.css     # Global styles and CSS variables
├── components/          # Reusable React components
│   ├── GameHeader.tsx  # Level selector and stats
│   ├── GitTerminal.tsx # Interactive terminal
│   ├── FileStaging.tsx # File staging interface
│   ├── GitTree.tsx     # Git history visualization
│   └── ...
├── stores/             # Zustand state management
│   └── gameStore.ts    # Game state with git simulation
├── types/              # TypeScript type definitions
│   └── git.ts          # Git-related interfaces
└── lib/                # Utility functions and level configurations
    └── levels.ts       # Level definitions and completion criteria

Key Architecture Decisions

• In-Memory Git Simulation: No actual git commands are executed; everything is simulated client-side
• Zustand for State: Simple, performant state management with built-in persistence
• Component-Based: Each level feature is isolated in its own component
• Type-Safe: Full TypeScript coverage for better developer experience

Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and add tests if applicable
4. Commit your changes: git commit -m 'Add amazing feature'
5. Push to the branch: git push origin feature/amazing-feature
6. Open a Pull Request

Development Guidelines

• Follow the existing code style and TypeScript conventions
• Add proper TypeScript types for new features
• Test your changes across different screen sizes
• Ensure accessibility standards are maintained
• Update documentation for new features

License

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

Author

Eren Sahin

• GitHub: @ernsahin
• Project Link: GitMaster

Support

Having trouble? Here are some ways to get help:

• Questions? Feel free to reach out via GitHub Issues
• Found a bug? Please report it in the Issues section
• Feature requests? We'd love to hear your ideas in Discussions

Acknowledgments

• Inspired by interactive learning platforms like Git-it
• Built with modern web technologies for the best learning experience
• Designed with accessibility and mobile-first principles

---

Happy Learning!

Master Git the right way, one commit at a time.