Git Mastery is a revolutionary learning platform that transforms Git education through interactive challenges, gamification, and a beautiful web interface. Built with Next.js, Prisma, and PostgreSQL.
- 500+ Git Challenges across 3 difficulty levels
- Real-time Terminal Interface with instant feedback
- Progressive Difficulty from beginner to advanced
- Hands-on Practice with real Git scenarios
- Achievement System with 8 unlockable badges
- Leaderboard showing top players worldwide
- Daily Challenges for consistent practice
- Progress Tracking with detailed statistics
- Streak System to maintain motivation
- Vintage Typography with Playfair Display and Cinzel fonts
- Smooth Animations powered by Framer Motion
- Dark Theme optimized for developers
- Responsive Design works on all devices
- Glass Morphism effects for modern UI
- JWT-based Authentication with secure sessions
- User Registration & Login with validation
- Progress Persistence across sessions
- Profile Management with avatar support
- Personal Statistics with detailed progress
- Performance Metrics with time tracking
- Category Breakdown for targeted learning
- Achievement Tracking with unlock history
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
- Framer Motion - Smooth animations
- Lucide React - Beautiful icons
- PostgreSQL - Reliable relational database
- Prisma - Type-safe database client
- NextAuth.js - Authentication
- bcryptjs - Password hashing
- jsonwebtoken - JWT tokens
- ESLint - Code linting
- Jest - Testing framework
- TypeScript - Type checking
- Node.js 18+
- PostgreSQL 15+
- Git
-
Clone the repository
git clone https://github.com/yourusername/git-mastery.git cd git-mastery -
Install dependencies
npm install
-
Set up environment variables
cp env.example .env.local
Edit
.env.localwith your configuration:DATABASE_URL="postgresql://username:password@localhost:5432/git_mastery" NEXTAUTH_SECRET=your-secret-key-here NEXTAUTH_URL=http://localhost:3000 JWT_SECRET=your-jwt-secret-here
-
Set up the database
# Generate Prisma client npm run db:generate # Push schema to database npm run db:push # Seed the database npm run db:seed
-
Start the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
- Register or Login to your account
- Choose a category (Beginner, Intermediate, Advanced)
- Solve challenges by entering Git commands
- Track progress and unlock achievements
- Compete on the leaderboard
- Explore challenges in the interactive terminal
- Learn Git commands with real-time feedback
- Practice scenarios that mirror real-world usage
- Master advanced concepts like rebasing and bisecting
- Git initialization and setup
- Basic commits and staging
- Repository status and history
- Essential Git commands
- Branching and merging
- Remote repository management
- Push and pull operations
- Branch management strategies
- Stashing and applying changes
- Reset and rebase operations
- Interactive rebasing
- Cherry-picking and submodules
- Git bisect for debugging
- First Steps 🌱 - Complete your first challenge
- Beginner Master 🌱 - Complete all beginner challenges
- Intermediate Master ⚡ - Complete all intermediate challenges
- Advanced Master 🚀 - Complete all advanced challenges
- Perfect Score 💯 - Get 100 points in a single session
- Speed Runner ⚡ - Complete 3 challenges quickly
- Persistent Learner 📅 - Play for 7 consecutive days
- Git Guru 👑 - Complete all challenges
- Playfair Display - Elegant serif for headings
- Cinzel - Decorative font for special elements
- JetBrains Mono - Monospace for code
- Inter - Clean sans-serif for body text
- Git Dark (#0d1117) - Primary background
- Git Gray (#21262d) - Secondary background
- Git Blue (#58a6ff) - Primary accent
- Git Green (#238636) - Success states
- Git Orange (#f78166) - Warning states
- Git Purple (#bc8cff) - Secondary accent
- Fade-in effects for smooth page transitions
- Floating elements for visual interest
- Typewriter effects for dynamic text
- Pulse glows for interactive elements
POST /api/auth/register- User registrationPOST /api/auth/login- User login
GET /api/challenges- Fetch challengesPOST /api/challenges- Create challenge
GET /api/users/progress- Get user progressPUT /api/users/progress- Update progress
# Run tests
npm test
# Run tests in watch mode
npm run test:watch
# Type checking
npm run type-check
# Linting
npm run lint# Generate Prisma client
npm run db:generate
# Push schema changes
npm run db:push
# Create and run migrations
npm run db:migrate
# Open Prisma Studio
npm run db:studio
# Seed database
npm run db:seed- Connect your GitHub repository to Vercel
- Set environment variables in Vercel dashboard
- Deploy automatically on push to main branch
# Build image
docker build -t git-mastery .
# Run container
docker run -p 3000:3000 git-masteryWe welcome contributions! Here's how you can help:
- Create new challenge in
scripts/seed-challenges.ts - Run
npm run db:seedto update database - Test the challenge in the web interface
- Modify components in
app/directory - Update styles in
app/globals.css - Test responsiveness across devices
- Add new API endpoints in
app/api/ - Update Prisma schema in
prisma/schema.prisma - Extend authentication in
lib/directory
This project is licensed under the MIT License - see the LICENSE file for details.
- Git - The version control system that inspired this project
- Next.js Team - For the amazing React framework
- Prisma Team - For the type-safe database client
- PostgreSQL - For the reliable database
- Framer Motion - For the smooth animations
- Tailwind CSS - For the utility-first styling
- Basic authentication
- Challenge system
- Progress tracking
- Leaderboard
- Real-time multiplayer challenges
- Custom challenge creation
- Advanced analytics dashboard
- Mobile app
- AI-powered hints
- Video tutorials integration
- Certification system
- Enterprise features
Ready to master Git? Start your journey with Git Mastery today! 🎮