ai-knowledge-tree
A deployed Next.js study site mapping the full DAG of topics in Data Science,
Machine Learning, Deep Learning, and AI Engineering. Each pillar (A → J) has
subsections, each subsection is a discipline taught as an ordered sequence of
atomic lessons, and subsections in different pillars are linked by explicit
cross-pillar connections (e.g. D4 ↔ F8 because VAEs sit in both Generative
DL and Bayesian DL).
Anonymous visitors see the whole map and read every page. Signed-in students
get per-user progress: mark a lesson studied, resume where they left off, and
the dashboard recolors to their own study state.
Inspired by AI ML Theory (the
long-form LLM curriculum that seeds pillars A, C, D, E) and
AI Eng Journey (the applied roadmap behind pillar J).
Pillars
| ID | Name | Coverage |
|---|
| A | Foundations | Math, prob, opt, numerical, DSA |
| B | Statistics & Causal Inference | Frequentist, Bayesian, causal, experimental design |
| C | Classical Machine Learning | Linear, kernel, tree, clustering, rec sys, ANN |
| D | Deep Learning: Core & Tracks | MLPs, CV, sequence, generative, SSL, GNN |
| E | NLP & Language Models | The backbone of AI ML Theory |
| F | Probabilistic Graphical Models | Bayes nets, HMM, VI, MCMC |
| G | Time Series & Forecasting | Classical, DL, foundation models |
| H | Reinforcement Learning | MDPs, deep RL, RLHF |
| I | MLOps & Production Systems | Data, training infra, serving, monitoring |
| J | AI Engineering | The AI Eng Journey roadmap (RAG, agents, MCP, Cloud AI) |
How it's built
The Next.js app is the primary front end. The homepage / is the dashboard:
hero, big stats, sticky filter bar, all 10 pillars with three-level collapse,
the D3 force-directed connections graph with click-to-pin panel, and the
learning paths. Deep routes serve every discipline and lesson:
/: dashboard (the homepage is the dashboard)/connections: standalone D3 graph page/pillar/[letter]: pillar overview, lists subsections/pillar/[letter]/[subId]: discipline overview, lists lessons/pillar/[letter]/[subId]/[lessonId]: the lesson study page (MDX)
A single self-contained content-dag-dashboard.html is kept as an offline
export (D3 via CDN, opens directly in a browser, no build). It is not
wired into the Next.js build; regenerate its embedded PILLARS / CONNECTIONS
/ PATHS literals only when you specifically want the offline file to stay in
sync with src/lib/dag.ts.
Stack
- Next.js 16 (App Router, Turbopack) + React 19 + TypeScript strict
- Tailwind CSS v4 (
@import "tailwindcss" + @theme inline, with
@tailwindcss/postcss); design tokens and pillar colors in
src/app/globals.css as CSS variables
- D3 v7 for the connections graph
- MDX rendered with
next-mdx-remote/rsc; math via remark-math +
rehype-katex; structural diagrams via Mermaid; static code via
Shiki; runnable code via Pyodide (numpy preloaded)
- Auth.js v5 (NextAuth) + Google provider, Neon Postgres (Vercel
Marketplace) via
@auth/pg-adapter for users and progress
Run locally
npm install
npm run dev # http://localhost:3000 (anonymous-only without env)
npm run build
npm run lint
npm test
With no environment variables, the dashboard and every study page work; sign-in
and progress tracking are simply hidden. To enable auth and progress, copy
.env.example to .env.local and set DATABASE_URL + the AUTH_* keys.
Architecture
ai-knowledge-tree/
├── content-dag-dashboard.html # offline export only (not built)
├── schema.sql # Neon: Auth.js tables + progress
├── .env.example # env template
├── DEPLOY.md # Vercel + Neon + Google OAuth steps
├── content/<pillar-slug>/<subId>/<lessonId>.mdx
│ └── STYLE.md # BINDING voice/tone + lesson pedagogy
├── src/
│ ├── app/
│ │ ├── layout.tsx # Header + globals.css + katex CSS
│ │ ├── page.tsx # home = the dashboard
│ │ ├── connections/page.tsx # standalone graph page
│ │ ├── pillar/[letter]/ # pillar overview
│ │ │ └── [subId]/ # discipline overview, lesson list
│ │ │ └── [lessonId]/page.tsx # the lesson study page
│ │ ├── api/auth/[...nextauth]/route.ts
│ │ └── actions/progress.ts # setStatus / clearStatus
│ ├── components/
│ │ ├── Hero / DashboardStats / LearningPaths
│ │ ├── PillarCard / TopicChip
│ │ ├── FilterBar / CollapseController
│ │ ├── ConnectionsGraph (D3)
│ │ ├── LessonSidebar / PillarSidebar
│ │ ├── StudyProgressControls
│ │ └── mdx/ { MdxContent, MdxPre, CodeBlock, PyRunner, Mermaid }
│ ├── lib/
│ │ ├── types.ts
│ │ ├── dag.ts # PILLARS + CONNECTIONS + PATHS (source of truth)
│ │ ├── curriculum/{index,A,...}.ts # per-subsection ordered Lesson[]
│ │ ├── content.ts # lesson resolve/load, prev/next
│ │ ├── db.ts # guarded Neon pool
│ │ ├── progress.ts # getProgressMap / getResume / isSignedIn
│ │ └── study-graph.ts # graph zoom limits + Studied view shading
│ ├── auth.ts # Auth.js config (guarded)
│ └── types/next-auth.d.ts
└── public/figures/<sub>/<name>.svg # generated plot assets
src/lib/dag.ts is the structural source of truth for pillars, subsections,
topics, connections, and curated learning paths. Per-discipline ordered lesson
lists live under src/lib/curriculum/; lesson prose lives under
content/<pillar-slug>/<subId>/<lessonId>.mdx, and the file's presence flips
the lesson from "coming soon" to "available".
Authoring
See content/STYLE.md for the binding voice/tone and lesson pedagogy. Each
lesson is one atomic concept and follows the same arc: motivate, define on
first use, derive step by step (no hand-waving), runnable numpy block at the
end, one-sentence handoff to the next lesson.
The curriculum-first authoring order is A → C → D → E → B → F → G → H → I → J.
Pillar A is fully authored (71 lessons across A1–A5); pillar C is next.
Deploy
See DEPLOY.md for the end-to-end Vercel + Neon + Google OAuth steps.
Conventions
- English end-to-end (UI chrome, content, code identifiers, topic names)
- No em-dash ("—") anywhere; replace with a colon, comma, semicolon, or
parentheses (see
content/STYLE.md §2.1)
- TypeScript strict; server components by default,
"use client" only where
hooks or events are needed
- Pillar IDs are single letters
A–J; subsection IDs are <letter><n>,
uppercased
- Status glyphs:
✓ covered/studied, ◐ partial/in-progress, ○ gap,
★ hot
