/roadmap

View detailed roadmap for a specific role.

Description

This command displays a comprehensive, step-by-step roadmap for any of the 69+ developer roles. Each roadmap includes:

• Learning milestones and checkpoints
• Core technologies and tools
• Recommended resources
• Real-world projects
• Timeline and difficulty progression
• Industry best practices

Usage

/roadmap [role-name]

What It Does

1. Role Selection - Choose from 69+ roles or search by keyword
2. Visual Roadmap - See the complete learning path from beginner to expert
3. Detailed Steps - Understand what to learn at each stage
4. Resource Links - Access curated learning materials
5. Project Ideas - Get hands-on project suggestions
6. Timeline - Realistic estimates for completion

Examples

Example 1: React Developer Roadmap

> /roadmap React Developer

REACT DEVELOPER ROADMAP
═══════════════════════════════════════════════════════════════════

PREREQUISITES (Assumed Knowledge)
├── JavaScript ES6+ ................ 2-3 months
├── HTML5 & Semantics .............. 2-4 weeks
└── CSS & Responsive Design ........ 4-6 weeks

BEGINNER LEVEL (3-4 months)
├── Step 1: React Fundamentals
│   ├── JSX and components
│   ├── Props and component composition
│   ├── State and setState
│   └── Lifecycle methods
├── Step 2: React Hooks (Modern Approach)
│   ├── useState hook
│   ├── useEffect hook
│   ├── Custom hooks
│   └── Hook rules and patterns
├── Step 3: Styling in React
│   ├── CSS modules
│   ├── Inline styles
│   ├── Styled components
│   └── Tailwind CSS
└── Step 4: Basic Projects
    ├── Todo application
    ├── Weather app (API integration)
    └── Simple e-commerce store

INTERMEDIATE LEVEL (3-6 months)
├── Step 5: State Management
│   ├── Context API
│   ├── Redux fundamentals
│   ├── Redux middleware
│   └── Alternative: Zustand, Jotai
├── Step 6: Routing
│   ├── React Router v6
│   ├── Dynamic routing
│   ├── Nested routes
│   └── Navigation patterns
├── Step 7: Testing
│   ├── Jest basics
│   ├── React Testing Library
│   ├── Mocking and async tests
│   └── Component testing
└── Step 8: Advanced Projects
    ├── Full-featured social media app
    ├── E-commerce platform
    └── Content management system

ADVANCED LEVEL (4-8 months)
├── Step 9: Performance Optimization
│   ├── React.memo and useMemo
│   ├── Code splitting and lazy loading
│   ├── Bundle optimization
│   └── Profiling and metrics
├── Step 10: Advanced Patterns
│   ├── Render props and composition
│   ├── Higher-order components (HOCs)
│   ├── Compound components
│   └── Portals and error boundaries
├── Step 11: Server-Side Rendering
│   ├── Next.js fundamentals
│   ├── Static generation vs. SSR
│   ├── API routes
│   └── Incremental static regeneration
└── Step 12: Expert Projects
    ├── Complex SPA with performance focus
    ├── Real-time collaboration app
    └── High-traffic public website

EXPERT LEVEL (6+ months)
├── Design Systems & Component Libraries
├── Micro-frontends Architecture
├── Advanced TypeScript Patterns
├── Performance at Scale
└── Contributing to React ecosystem

═══════════════════════════════════════════════════════════════════

CORE TECHNOLOGIES
├── JavaScript/TypeScript ........... Essential
├── React 18+ ...................... Core
├── Redux or Zustand ............... State Management
├── React Router ................... Routing
├── Testing Library & Jest ......... Testing
├── Next.js ........................ Meta-framework
├── Tailwind/Styled Components ..... Styling
└── Git & GitHub ................... Version Control

DEVELOPMENT TOOLS
├── VS Code ........................ Editor
├── npm/yarn/pnpm .................. Package Manager
├── Webpack/Vite ................... Bundler
├── ESLint & Prettier .............. Code Quality
├── Chrome DevTools ................ Debugging
└── React Developer Tools .......... Browser Extension

LEARNING TIMELINE
├── Beginner Level: 3-4 months
├── Intermediate Level: 3-6 months
├── Advanced Level: 4-8 months
├── Expert Level: 6+ months
└── Total: 12-24 months (1-2 years for mastery)

RECOMMENDED RESOURCES
Books:
  • React Up and Running by Stoyan Stefanov
  • The Road to React by Robin Wieruch

Courses:
  • Udemy: React - The Complete Guide
  • freeCodeCamp: React Course
  • Egghead.io: React Fundamentals

Documentation:
  • Official React Docs (react.dev)
  • React Router Docs
  • Next.js Documentation

Communities:
  • React Discord
  • r/reactjs on Reddit
  • React Conferences (ReactConf, etc.)

PROJECT PROGRESSION
Stage 1 (Beginner):
  ✓ Personal portfolio website
  ✓ Todo list app
  ✓ Weather app with API integration

Stage 2 (Intermediate):
  ✓ Blog platform with markdown
  ✓ E-commerce shop
  ✓ Chat application (real-time)

Stage 3 (Advanced):
  ✓ SaaS dashboard with real-time updates
  ✓ Collaborative tool (like Figma lite)
  ✓ High-performance content platform

KEY MILESTONES
├── [ ] Complete React fundamentals course
├── [ ] Build 5+ small projects
├── [ ] Understand state management patterns
├── [ ] Set up your first Next.js project
├── [ ] Contribute to open-source React project
├── [ ] Write comprehensive test suite
├── [ ] Build and deploy a production app
└── [ ] Master performance optimization

═══════════════════════════════════════════════════════════════════

Next: /learn React Developer
Or: /assess React to evaluate your current knowledge

Example 2: Backend Developer Roadmap (Node.js)

> /roadmap Backend Developer

[Similar comprehensive breakdown covering:]
- JavaScript/Node.js fundamentals
- Express or alternative framework
- Database design and queries
- API design and development
- Authentication and security
- Deployment and DevOps basics
- Advanced architectures
- Performance optimization

Example 3: DevOps Engineer Roadmap

> /roadmap DevOps Engineer

[Comprehensive roadmap covering:]
- Linux fundamentals
- Networking basics
- Git and version control
- Docker containerization
- Kubernetes orchestration
- Cloud platforms (AWS/GCP/Azure)
- Infrastructure as Code (Terraform)
- CI/CD pipelines
- Monitoring and observability
- Advanced topics and specialization

Additional Features

Customization

• Filter by difficulty level
• Adjust timeline based on experience
• Focus on specific technologies
• Combine multiple paths (fullstack, etc.)

Tracking

• Mark completed steps
• View progress
• Get weekly learning suggestions
• Share roadmap with team

Related Commands

• /learn - Start this learning path
• /assess - Evaluate your current skills
• /explore - Browse other available roles

---

Follow the roadmap, master the role!