DevRoadmaps: Building the Free roadmap.sh Alternative with 17 Interactive Paths

Why Another Roadmap Site?

roadmap.sh is fantastic, but it has limitations: limited resource links, no offline support, no progress tracking, and a static design that hasn't changed much. I wanted to build something that goes beyond — a platform where learners can actually track their progress, work toward real certifications, and access everything offline.

DevRoadmaps started as a weekend project and grew into a comprehensive learning platform with 17 roadmaps, 800+ topics, and 1700+ curated free resources.

The 17 Roadmaps

Frontend, Backend, Full Stack, ML/AI, DevOps, Mobile, Cybersecurity, Data Engineering, Blockchain, Game Dev, Embedded/IoT, Product Manager, DevSecOps, QA Engineer, Technical Writer, Low-Code/No-Code, and Cloud Architect. Each roadmap has 35-50 nodes with free resources for every single topic.

Unique Features

Certification Tracker — This maps roadmap nodes to real industry certifications (AWS Solutions Architect, CKA, Security+, CEH, Terraform Associate, and more). You can see which topics count toward each cert, track your progress, and see estimated study hours remaining. No other roadmap platform does this.

Community Forum — A built-in discussion system with categories (Help, Show & Tell, Resources, Feedback), search, filtering, and the ability to post new discussions. All data persists in localStorage.

PWA Support — The entire app works offline. A service worker caches all roadmaps, CSS, JS, and JSON. You can install it as a native app on your phone or desktop. This matters for learners in areas with poor connectivity.

Glassmorphism UI — Particle background, glass-morphism cards, smooth animations, and a beautiful dark theme. It's the kind of design that makes you actually want to learn.

Technical Details

Pure vanilla JavaScript — no framework, no build step, no Node.js required. Each roadmap is a JSON file, making it trivially easy to add new paths. The CSS uses custom properties for theming, and the entire app is under 1MB.

Try It

No installation needed. Just visit: rudra496.github.io/devroadmaps

github.com/rudra496/devroadmaps

All 17 Roadmaps

Here's every roadmap available in DevRoadmaps:

The JSON Architecture

Each roadmap is a single JSON file. A node looks like this:

{
  "id": "react-hooks",
  "title": "React Hooks",
  "icon": "⚛️",
  "category": "intermediate",
  "description": "useState, useEffect, useContext and custom hooks",
  "difficulty": "Intermediate",
  "resources": [
    {
      "title": "React Hooks Official Docs",
      "url": "https://react.dev/reference/react",
      "type": "docs",
      "free": true
    }
  ],
  "children": ["react-context", "use-reducer"]
}

This flat structure makes it trivially easy to add new topics — just add a JSON object with an ID, title, and resources. The rendering engine handles the rest.

PWA: Offline Learning

The service worker uses a cache-first strategy. On first visit, all roadmap JSONs, CSS, JS, and the manifest are cached. On subsequent visits (even offline), everything loads instantly. Users can install DevRoadmaps as a native app on their phone via "Add to Home Screen."

Comparison vs roadmap.sh

Connect

• GitHub
• LinkedIn
• X / Twitter
• Facebook
• YouTube
• ResearchGate
• Dev.to