LearnGitNow

An interactive Git learning platform built with modern web technologies. Master Git commands through hands-on practice with visual feedback.

📖 About

This project is a modern React rewrite of LearnGitBranching, an interactive Git visualization tool. While maintaining the same educational goals and level content, LearnGitNow has been rebuilt from the ground up using:

• Modern React 19 with TypeScript for type safety
• Improved code organization and maintainability
• Enhanced developer experience

The core gameplay, level structure, and educational content remain faithful to the original LearnGitBranching project.

🎯 Features

• Git Engine: Complete Git command support with undo/redo
• Visualization: Interactive SVG-based Git graph visualization
• Level System: 34+ levels organized into sequences
• Command Line: Command history, auto-completion, and error handling
• Internationalization: Multi-language support

🚀 Tech Stack

• React 19 - UI framework
• TypeScript - Type safety
• Zustand - State management
• Framer Motion - Animations
• Tailwind CSS 4.x - Styling
• SVG - Git graph visualization

🛠️ Development

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Run tests
pnpm test

# Type check
pnpm type-check

# Format code
pnpm format

# Format markdown in i18n files
pnpm format:markdown

Note: This project uses pnpm as the package manager. Vitest for testing, and Prettier for code formatting.

🧪 Testing

pnpm test              # Run all tests
pnpm test:coverage     # Generate coverage report

🚀 Deployment

Build output is in dist/ directory. Deploy to any static hosting service such as Vercel, Netlify, or GitHub Pages.

pnpm build

📄 License

MIT License

🙏 Acknowledgments

• Original LearnGitBranching project
• React, Framer Motion, and Tailwind CSS 4.x teams