DevRoadmaps Documentation

June 5, 2026 · View on GitHub

Welcome to the DevRoadmaps documentation.

Guides

Architecture

DevRoadmaps is a static site built with:

  • HTML5 — Semantic markup with structured data (JSON-LD)
  • CSS3 — Custom properties, glassmorphism, responsive
  • Vanilla JavaScript — Zero dependencies, modular architecture

Module Overview

ModuleFilePurpose
Corejs/main.jsParticles, roadmaps grid, viewer, theme
Communityjs/community.jsTips, ratings, filters
Learning Pathsjs/learning-paths.jsCurated paths & bookmarks
Timerjs/timer.jsPomodoro timer & achievements
Certificationsjs/certifications.jsCertification tracker
Forumjs/community-forum.jsDiscussion board
Share Cardjs/share-card.jsCanvas progress cards
Command Palettejs/command-palette.jsCtrl+K navigation
Daily Challengejs/daily-challenge.jsDaily challenges & streaks
Notesjs/notes.jsPer-roadmap notes
Comparisonjs/comparison.jsRoadmap comparison
Project Ideasjs/project-ideas.jsProject suggestions
Interview Prepjs/interview-prep.jsInterview Q&A
Data Exportjs/data-export.jsExport/import data
Skill Radarjs/skill-radar.jsSVG radar chart

Data Flow

  1. User opens index.html → roadmaps grid renders from roadmaps/index.json
  2. User clicks a roadmap → roadmap.html loads the specific JSON file
  3. Progress is tracked in localStorage (no server, no cookies)
  4. All features (timer, notes, bookmarks, challenges) read/write to localStorage

Deployment

Hosted on GitHub Pages via the pages.yml workflow. Deploys automatically on push to main.