A fun, interactive puzzle game that teaches git commands through hands-on gameplay. Master git concepts by solving daily puzzles where you collect files scattered across branches and merge them to main.
Interactive Git Learning
- Learn git commands by playing
- Real-time terminal feedback
- Step-by-step tutorials for beginners
Daily Puzzle Challenges
- New puzzle every day
- Varying difficulty levels
- Par scoring system to measure efficiency
Progress Tracking
- Leaderboard rankings
- Statistics and achievements
- Archive of completed puzzles
Multiple Git Commands
git commit- Create commitsgit branch- Create and manage branchesgit checkout- Switch between branchesgit merge- Merge branches togethergit rebase- Rebase onto branchesgit undo- Undo last command
Dark Mode Support
- Full dark/light mode theming
- Persistent theme preference
- Smooth transitions
- Node.js (v16 or higher)
- npm or bun package manager
- Clone the repository
git clone https://github.com/yourusername/gitty.git
cd gitty- Install dependencies
bun install
# or
npm install- Start the development server
bun run dev
# or
npm run dev- Open your browser and navigate to
http://localhost:5173
Collect all target files by creating commits at specific positions, then merge everything to the main branch to complete the puzzle.
-
Files & Positions: Files are placed at specific positions defined by a
branchanddepth(number of commits from initial commit) -
Collecting Files: When you create a commit at the exact position where a file is located, you automatically collect that file
-
Winning: Merge all collected files to the main branch to win
-
Scoring:
- Base score: 100 points
- Under par: +20 points per command saved
- Over par: -10 points per extra command (minimum 10 points)
$ git init # Start the puzzle
$ git commit -m "first" # Create your first commit
$ git branch feature # Create a new branch
$ git checkout feature # Switch to the feature branch
$ git commit -m "second" # Create a commit on feature
$ git checkout main # Switch back to main
$ git merge feature # Merge feature into main
- Frontend Framework: React 18
- Language: TypeScript 5
- Build Tool: Vite 7
- Styling: Tailwind CSS
- Icons: Lucide React
- Routing: React Router v6
- State Management: React Hooks & Context API
- API Communication: Fetch API with IP-based authentication
- Package Manager: Bun
Gitty uses a REST API for game state management. The API handles:
- Game initialization and state management
- Command execution and validation
- Puzzle retrieval and management
- Score calculation and leaderboard data
API Base URL: https://gitty-api.phanuphats.com
Authentication is IP-based, no tokens required.
Gitty includes full dark mode support with:
- Global dark mode toggle in the navbar
- Persistent theme preference using localStorage
- Tailwind CSS for consistent theming across all pages
- Smooth transitions between light and dark modes
# Start development server
bun run dev
# Build for production
bun run build
# Type checking
npx tsc --noEmit
# Lint and format (if configured)
bun run lintbun run buildThe build output will be in the dist/ directory.
Gitty uses a centralized color configuration in src/lib/colors.ts for consistent theming across the application.
- Backgrounds: Primary, secondary, tertiary levels
- Text: Primary, secondary, tertiary, muted, links
- Borders: Standard and divider variants
- Buttons: Primary, secondary, ghost styles
- Components: Tables, cards, badges, dropdowns
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Built with React and TypeScript
- Game mechanics inspired by Git learning principles
- UI powered by Tailwind CSS and Lucide icons
- Hosted and deployed on Netlify
Happy learning! Made with ❤️ by Kopibara C Peng