graph.phatphum.me — Visual Knowledge Atlas

graph.phatphum.me is a knowledge atlas built to show how things connect, instead of one long list of topics. A topic is one canonical piece of knowledge (a summary, why it matters, a difficulty) that can appear in many maps without duplicating its content or the reader’s progress. Learners choose a graph, a roadmap, an outline, or a Focus view that isolates what to know first and what a topic unlocks. The data is a curriculum I authored: 146 maps (21 published — Frontend, Computer Networks and Cybersecurity with their sub-maps), 699 topics and 404 official resources. A learner’s progress lives only in their browser; there are no accounts.

1. 01A long list of topics can’t say what comes first, what is optional, or how one subject relates to another.
2. 02A static diagram, or a graph alone, is hard to read on a phone and for keyboard and screen-reader users.
3. 03The same topic (HTTP, or accessibility) appears in several curricula; copying it everywhere makes it hard to edit and leaves progress out of sync.
4. 04A large hand-written curriculum is easy to get wrong: prerequisite cycles, edges that point across maps, or foundational topics silently dropped.

1. 01A seven-model schema: Topic is the canonical knowledge and GraphNode is “an appearance of a topic in one map”, so both content and progress are shared across maps. GraphEdge uses composite foreign keys so an edge can’t end in a different map, and Resource links to topics through TopicResource.
2. 02Five edge types drawn differently: PREREQUISITE (must form a DAG), RECOMMENDED, RELATED, ALTERNATIVE and UNLOCKS. Ancestor/descendant traversal, shortest paths and topological ordering use PREREQUISITE edges only.
3. 03Four views from the same data: Graph (React Flow with semantic-zoom nodes and a MiniMap), Roadmap (sections as milestones with progress bars and a “You are here” banner), Outline (an expandable list) and Focus (a dagre re-layout of just the related topics).
4. 04Not started / Learning / Understood progress is stored in versioned localStorage keyed by canonical topic IDs, with Undo, an “I already know these” shortcut and whole-section updates. Nothing is sent to the server or put in a URL.
5. 05Curricula I wrote: Frontend Developer (14 sections, with JavaScript, CSS and React sub-maps), Computer Networks (26 sections, 215 topics, 15 projects, 7 sub-maps) and Cybersecurity Foundations (28 sections, 229 topics, 25 projects, 8 sub-maps, using OWASP Top 10:2025 as the awareness baseline), with research notes and reference lists in prisma/seeds.
6. 06The Computer Science catalogue carries 125 unpublished maps explicitly marked COMING_SOON, with no fake nodes or links, and a generic domain page so a new domain is just seed data.
7. 07Seeding runs in one transaction with stable IDs and validates before writing (cycles, missing endpoints, duplicate slugs and paths, dangling resources); a db:validate command re-checks the live database.
8. 08The phone layout (below 768px) is redesigned: it starts on Outline, the graph becomes a one-section-at-a-time list of levels, and the Inspector and Focus panels are bottom sheets, with only one drawer open at a time on narrow screens.

1. 01One site where the same map opens in four ways, and the learner always sees where they are and what to do next — without an account.
2. 0292 unit tests in 17 files pass, covering graph algorithms, layout, roadmap, seed validation, progress, markdown, real SQLite constraints and CSS rules (no !important, no hex colours outside the tokens).
3. 03Playwright end-to-end tests (desktop and mobile) with axe-core scans of every page in light and dark, and checks for minimum text size, tap-target size and layout shift.
4. 04Accessibility throughout: keyboard coverage of the map (a single tab stop), reduced motion, forced-colors and high-contrast support.

• A Next.js 16 + React 19 site with four views (Graph, Roadmap, Outline, Focus) and a Topic Inspector
• A Prisma 7 + SQLite data model (7 models) with migrations, idempotent seeding and a db:validate checker
• The Frontend, Computer Networks and Cybersecurity curricula with research notes and reference lists
• A theming system built from design tokens (light, dark and high-contrast) and hand-written CSS with no framework
• Vitest and Playwright + axe-core test suites

• Next.js
• React
• TypeScript
• CSS3
• React Flow
• Dagre
• Prisma
• SQLite
• better-sqlite3
• Vitest
• Playwright
• axe-core
• pnpm

• 2026Atlas — Personal Research WorkspaceCapture sources, connect topics, test claims against evidence and write knowledge you can revisit — a private web app I designed end to end, from the schema to the security modelPersonal
• 2026BookNest — A Personal Library with Book Knowledge MapsA local-first library of books and magazine issues that keeps each book’s real table of contents, terms, diagrams and reading paths as validated JSON — no account or cloudPersonal
• 2026Catadex — A Directory of Specialist Catalogs1,248 specialist data catalogs in 34 fields, explored through cards, a relationship graph and guided trails, and searchable in Thai and EnglishPersonal