____        __                  ____                  __
   / __ \__  __/ /_____  _____    / __ \____  ____  ____/ /_
  / /_/ / / / / __/ __ \/ ___/   / / / / __ \/ __ \/ __  __ \
 / _, _/ /_/ / /_/ /_/ / /      / /_/ / /_/ / / / / /_/ / / /
/_/ |_|\__,_/\__/\____/_/       \____/ .___/_/ /_/\__,_/_/ _/
                                   /_/

Table of Contents

• Why DevRoadmaps?
• Features
• Roadmaps
• Quick Start
• Tech Stack
• Project Structure
• Keyboard Shortcuts
• Contributing
• Documentation
• Changelog
• Star History
• Connect
• More Open Source Projects

Why DevRoadmaps?

Most developer roadmap repos are just static images or markdown lists. DevRoadmaps is interactive — click any topic, mark it complete, track your progress, write notes, and earn achievements. No account needed, no tracking, no ads.

Features

Core

• 20 comprehensive roadmaps — From Frontend to AR/VR, Platform Engineering to SRE
• 2,000+ curated free resources — MDN, freeCodeCamp, official docs, YouTube, and more
• Interactive progress tracking — Click topics, mark complete, visualize your journey
• Search & filter — Search within roadmaps, filter by difficulty and category
• Keyboard navigation — Arrow keys, Enter to expand, Space to complete
• Dark & light mode — With auto (system preference) support
• Print as poster — Print any roadmap as a clean poster or checklist
• Fully responsive — Works on desktop, tablet, and mobile
• Offline capable — PWA with service worker, works without internet
• Zero dependencies — Pure HTML, CSS, and JavaScript

Productivity

• Command palette — Press Ctrl+K to quickly jump to any roadmap or feature
• Pomodoro study timer — Built-in timer with break reminders and time tracking
• Bookmarks — Save topics across roadmaps and export as a study plan
• Learning notes — Write personal notes per roadmap, your private learning journal
• Data export/import — Backup and restore all your learning data

Learning Tools

• Daily challenges — New coding challenge every day with streak tracking
• Skill radar chart — Visual overview of your progress across all skill areas
• Project ideas — Curated hands-on project ideas for each career path
• Interview prep — Practice with curated interview questions and answers
• Roadmap comparison — Compare any two roadmaps side by side
• Shareable progress cards — Generate beautiful PNG cards to share on social media

Community & Gamification

• 20 achievements — Unlock badges as you learn (streaks, challenges, study time, notes)
• Community tips — Share and read tips for each topic
• Resource ratings — Rate resources 1-5 stars
• Community forum — Local discussion board for learners
• Certification tracker — Map progress to real exam topics (AWS, GCP, CKA, Security+, etc.)
• Learning paths — Pre-built paths combining nodes from multiple roadmaps

Roadmaps

Quick Start

Live Site

Open rudra496.github.io/devroadmaps in your browser.

Run Locally

git clone https://github.com/rudra496/devroadmaps.git
cd devroadmaps
python3 -m http.server 8000
# Open http://localhost:8000

No build step, no install, no dependencies. Just open index.html.

Tech Stack

• HTML5 — Semantic markup with structured data
• CSS3 — Custom properties, glassmorphism, animations, responsive
• Vanilla JavaScript — Zero dependencies, modular architecture
• Canvas API — Shareable progress card generation
• SVG — Skill radar chart visualization
• LocalStorage — Client-side data persistence
• Service Worker — PWA offline support
• GitHub Pages — Free hosting

Project Structure

devroadmaps/
├── index.html              # Landing page with all sections
├── roadmap.html            # Interactive roadmap viewer
├── sitemap.xml             # SEO sitemap
├── robots.txt              # Search engine directives
├── css/style.css           # All styles (dark + light themes)
├── js/
│   ├── main.js             # Core: particles, roadmaps grid, viewer, theme
│   ├── community.js        # Community tips, ratings, filters
│   ├── learning-paths.js   # Learning paths & bookmarks
│   ├── timer.js            # Pomodoro timer & achievements
│   ├── certifications.js   # Certification tracker
│   ├── community-forum.js  # Community discussion board
│   ├── share-card.js       # Canvas-based progress card generator
│   ├── command-palette.js  # Ctrl+K quick navigation
│   ├── daily-challenge.js  # Daily coding challenges with streak
│   ├── notes.js            # Per-roadmap learning notes
│   ├── comparison.js       # Roadmap comparison tool
│   ├── project-ideas.js    # Curated project ideas per roadmap
│   ├── interview-prep.js   # Interview questions & answers
│   ├── data-export.js      # Export/import/clear user data
│   └── skill-radar.js      # SVG skill radar visualization
├── roadmaps/               # 20 roadmap JSON files + index.json
├── achievements.json       # 20 achievement definitions
├── manifest.json           # PWA manifest
├── sw.js                   # Service worker (offline support)
├── .github/
│   ├── ISSUE_TEMPLATE/     # Bug report & feature request
│   └── workflows/          # CI workflows
├── README.md
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
├── SECURITY.md
└── LICENSE

Keyboard Shortcuts

📚 Documentation

• Data Format Guide — JSON schema for roadmap files
• Architecture Overview — Module design and data flow
• Changelog — Version history and release notes
• Roadmap — Planned features and improvements
• Support — Getting help
• Security — Reporting vulnerabilities

Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines.

Ways to contribute:

• Fix broken resource links
• Add new resources to existing roadmaps
• Propose a new roadmap (open an issue first)
• Share community tips
• Improve the design or accessibility
• Add interview questions or project ideas

Star History

License

MIT License — free for personal and commercial use.

Connect

More Open Source Projects

Project	Stars	Description
StealthHumanizer		Free AI text humanizer — 13 providers, no login
EdgeBrain		Edge AI inference — sub-100ms, no cloud
CodeVista		AI code analysis & security scanner
Nexus Agent		Self-evolving local AI agent framework
MindWell		Free mental health support platform
ScienceLab 3D		40+ virtual STEM experiments
SightlineAI		AI smart glasses for the blind
TermMind		AI-powered terminal CLI assistant