🥷 ClaudeCodeNinja

Il Percorso Guidato per Diventare Claude Code Master

Un learning path interattivo e gamificato per imparare Claude Code, dal setup base alla production scale.

✨ Features

• 🎯 12 Milestone Progressive - Da Getting Started a Production Master
• 🏅 Sistema di Badge - Bronze, Silver, Gold, Platinum
• 📊 Progress Tracking - LocalStorage con sync ready per Supabase
• ✅ Quiz Interattivi - Verifica la comprensione
• 💎 Certificazione Finale - Badge Master con progetti pratici
• 🌍 Bilingue - Contenuti in Italiano (presto Inglese)

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

📚 Learning Path

Bronze Tier (0-600 XP)

1. Getting Started (100 XP) - Installation & Setup
2. Core CLI Commands (100 XP) - claude, -p, -c, -r
3. Permission System (150 XP) - Ask/Allow/Reject
4. Settings & CLAUDE.md (150 XP) - Project structure

Silver Tier (600-1500 XP)

5. Custom Commands (200 XP) - Slash commands
6. Your First Subagent (200 XP) - Agent creation
7. MCP Integration (250 XP) - External services
8. Hooks & Skills (250 XP) - Agent Skills framework

Gold Tier (1500-2500 XP)

9. SDKs & Automation (300 XP) - Python/TS SDK
10. GitHub Actions (300 XP) - CI/CD integration
11. Advanced Features (350 XP) - Checkpoints, sandboxing
12. Production & Scale (400 XP) - Cloud deployment

Platinum Tier (2500+ XP)

• Complete all milestones
• Submit 3 practical projects
• Earn official certificate

🛠️ Tech Stack

• Framework: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Routing: React Router v6
• Animations: Framer Motion
• Icons: Lucide React
• Markdown: React Markdown + Remark GFM
• Storage: LocalStorage (Supabase ready)

📖 Documentation

Each milestone includes:

• Comprehensive written content
• Interactive quiz
• Coding challenge
• Estimated time to complete
• XP reward

🎮 Progress Tracking

Your progress is automatically saved in localStorage:

• Completed milestones
• Total XP earned
• Badge tier unlocked
• Quiz scores
• Activity timestamps

🏗️ Project Structure

claudecodeninja/
├── src/
│   ├── components/
│   │   ├── LearningPath/
│   │   │   ├── MilestoneCard.tsx
│   │   │   └── ProgressTracker.tsx
│   │   └── Gamification/
│   │       └── BadgeDisplay.tsx
│   ├── pages/
│   │   ├── HomePage.tsx
│   │   └── MilestonePage.tsx
│   ├── data/
│   │   ├── milestones.ts
│   │   └── badges.ts
│   ├── utils/
│   │   └── progressTracking.ts
│   └── types/
│       └── index.ts
├── public/
└── package.json

🎨 Brand Colors

• Primary (Orange): #FF6B35 - Action & Energy
• Secondary (Blue): #004E89 - Professional
• Accent (Gold): #F7931E - Achievements
• Success (Cyan): #00D9FF - Progress
• Dark: #1A1A2E - Background

📝 Contributing

Questo progetto è stato generato con Claude Code! 🤖

Per contribuire:

1. Fork del repository
2. Crea feature branch
3. Commit con messaggi descrittivi
4. Push e crea Pull Request

📄 License

MIT License - Alek Dobrohotov © 2025

🔗 Links

• Author: Alek Dob
• Quack: Quack App
• Medium: Coming soon...

---

Made with ❤️ and Claude Code