diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07a6991..1e08310 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,20 +1,11 @@
-## 1.3.0 (2026-03-28)
+## 1.4.0 (2026-05-27)
 
 ### Feat
 
-- fixing low effor issues, improveing e2e tests
-
-## 1.2.2 (2026-03-03)
-
-### Fix
-
-- fixing theme switcher for default light mode
-
-## 1.2.1 (2026-01-16)
+- adding outline functionality
 
 ### Fix
 
-- updating packages
 - lint/formatting, pre-commits revamp
 
 ## 1.1.2 (2025-10-24)
diff --git a/package.json b/package.json
index 697ae66..e83be35 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "checkquest",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.4.0",
   "type": "module",
   "packageManager": "pnpm@10.28.0",
   "engines": {
diff --git a/public/templates/react.json b/public/templates/react.json
index f3d3990..ce41df2 100644
--- a/public/templates/react.json
+++ b/public/templates/react.json
@@ -6,7 +6,7 @@
   "name": "React",
   "description": "React developer checklist",
   "createdAt": "2025-09-21T13:02:32.480Z",
-  "updatedAt": "2025-09-21T13:02:32.480Z",
+  "updatedAt": "2026-05-27T00:00:00.000Z",
   "sections": [
     {
       "id": "general",
@@ -30,6 +30,36 @@
           "text": "Keys in lists",
           "score": 1,
           "extra": false
+        },
+        {
+          "id": "syntheticEvents",
+          "text": "Synthetic Events",
+          "score": 1,
+          "extra": false
+        },
+        {
+          "id": "fragments",
+          "text": "Fragments",
+          "score": 1,
+          "extra": false
+        },
+        {
+          "id": "controlledVsUncontrolled",
+          "text": "Controlled vs Uncontrolled Components",
+          "score": 2,
+          "extra": false
+        },
+        {
+          "id": "lifecycle",
+          "text": "Component Lifecycle",
+          "score": 2,
+          "extra": false
+        },
+        {
+          "id": "reconciliation",
+          "text": "Reconciliation & Fiber Architecture",
+          "score": 3,
+          "extra": true
         }
       ]
     },
@@ -77,7 +107,25 @@
           "score": 3,
           "extra": true
         },
-        { "id": "useId", "text": "useId", "score": 1, "extra": true }
+        { "id": "useId", "text": "useId", "score": 1, "extra": true },
+        {
+          "id": "customHooks",
+          "text": "Custom Hooks",
+          "score": 2,
+          "extra": false
+        },
+        {
+          "id": "useDeferredValue",
+          "text": "useDeferredValue",
+          "score": 3,
+          "extra": true
+        },
+        {
+          "id": "useImperativeHandle",
+          "text": "useImperativeHandle",
+          "score": 2,
+          "extra": true
+        }
       ]
     },
     {
@@ -123,6 +171,36 @@
           "text": "Error Boundaries",
           "score": 2,
           "extra": false
+        },
+        {
+          "id": "routing",
+          "text": "Routing in React",
+          "score": 2,
+          "extra": false
+        },
+        {
+          "id": "reactCompiler",
+          "text": "React Compiler",
+          "score": 3,
+          "extra": true
+        },
+        {
+          "id": "forwardRef",
+          "text": "forwardRef",
+          "score": 2,
+          "extra": false
+        },
+        {
+          "id": "suspense",
+          "text": "Suspense & React.lazy",
+          "score": 2,
+          "extra": false
+        },
+        {
+          "id": "compoundComponents",
+          "text": "Compound Components",
+          "score": 3,
+          "extra": true
         }
       ]
     },
@@ -167,6 +245,12 @@
           "text": "Sass/Less",
           "score": 1,
           "extra": true
+        },
+        {
+          "id": "cssReset",
+          "text": "CSS Reset",
+          "score": 1,
+          "extra": false
         }
       ]
     },
@@ -223,9 +307,9 @@
           "extra": true
         },
         {
-          "id": "react",
-          "text": "Reset Styles",
-          "score": 1,
+          "id": "reactProfiler",
+          "text": "React Profiler",
+          "score": 2,
           "extra": true
         }
       ]
@@ -271,6 +355,12 @@
           "score": 3,
           "extra": true
         },
+        {
+          "id": "reactDevTools",
+          "text": "React DevTools",
+          "score": 1,
+          "extra": true
+        },
         { "id": "ai", "text": "AI", "score": 2, "extra": true },
         {
           "id": "cicd",
@@ -297,6 +387,13 @@
           "score": 2,
           "extra": true
         },
+        { "id": "isr", "text": "ISR (Next.js)", "score": 1, "extra": true },
+        {
+          "id": "nextJsRouting",
+          "text": "Routing in Next.js (app, pages)",
+          "score": 2,
+          "extra": true
+        },
         {
           "id": "otherFrameworks",
           "text": "Other frameworks (Astro, Tanstack, Gatsby)",
diff --git a/public/templates/react_outline.json b/public/templates/react_outline.json
new file mode 100644
index 0000000..2bf176c
--- /dev/null
+++ b/public/templates/react_outline.json
@@ -0,0 +1,1588 @@
+{
+  "id": "react_outline",
+  "checklistId": "react",
+  "version": "1.0.0",
+  "name": "React Developer Training Outline",
+  "description": "Study guide and key concepts for each topic in the React developer checklist",
+  "createdAt": "2026-05-27T00:00:00.000Z",
+  "updatedAt": "2026-05-27T00:00:00.000Z",
+  "sections": [
+    {
+      "id": "general",
+      "title": "General",
+      "topics": [
+        {
+          "id": "jsx",
+          "title": "JSX",
+          "summary": "JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside JS files. Babel/SWC compiles it to `React.createElement()` calls at build time.",
+          "keyPoints": [
+            "Compiles to React.createElement(type, props, ...children)",
+            "Must have a single root element — use Fragments to avoid extra DOM nodes",
+            "HTML attributes are camelCase: className, htmlFor, onClick",
+            "JavaScript expressions go inside {curly braces}",
+            "Self-closing tags must be closed: <img />, <br />",
+            "Conditional rendering: ternary ({cond ? <A /> : <B />}) or short-circuit ({cond && <A />})",
+            "JSX is not HTML — style takes an object, not a string"
+          ],
+          "resources": [
+            {
+              "title": "Writing Markup with JSX",
+              "url": "https://react.dev/learn/writing-markup-with-jsx"
+            },
+            {
+              "title": "JavaScript in JSX with Curly Braces",
+              "url": "https://react.dev/learn/javascript-in-jsx-with-curly-braces"
+            }
+          ]
+        },
+        {
+          "id": "virtualDom",
+          "title": "Virtual DOM",
+          "summary": "The Virtual DOM is an in-memory JavaScript representation of the real DOM. React uses it to batch and minimize actual DOM updates by diffing the previous and next virtual trees.",
+          "keyPoints": [
+            "React keeps a virtual tree in memory mirroring the real DOM",
+            "On state/prop change, a new virtual tree is created and compared (diffing)",
+            "Only changed nodes are applied to the real DOM (patching/reconciliation)",
+            "Diffing runs in O(n) using heuristics: same element type = update, different type = replace whole subtree",
+            "Keys help React match list items across renders",
+            "React Fiber is the internal engine that makes reconciliation interruptible"
+          ],
+          "resources": [
+            {
+              "title": "Preserving and Resetting State",
+              "url": "https://react.dev/learn/preserving-and-resetting-state"
+            },
+            {
+              "title": "React Fiber Architecture (community)",
+              "url": "https://github.com/acdlite/react-fiber-architecture"
+            }
+          ]
+        },
+        {
+          "id": "oneWayDataFlow",
+          "title": "One-way data flow",
+          "summary": "Data in React flows in a single direction — from parent to child via props. Children communicate upward by calling callback functions passed as props.",
+          "keyPoints": [
+            "Props flow down: parent → child",
+            "Events flow up: child calls a function prop to notify parent",
+            "Makes data flow predictable and easy to trace and debug",
+            "Contrast with two-way binding (Angular ngModel, Vue v-model)",
+            "Lifting state up: move shared state to the closest common ancestor",
+            "Prop drilling: passing props through many layers — solved by Context or a state manager"
+          ],
+          "resources": [
+            {
+              "title": "Sharing State Between Components",
+              "url": "https://react.dev/learn/sharing-state-between-components"
+            },
+            {
+              "title": "Thinking in React",
+              "url": "https://react.dev/learn/thinking-in-react"
+            }
+          ]
+        },
+        {
+          "id": "keysInLists",
+          "title": "Keys in lists",
+          "summary": "Keys are stable string/number identifiers that help React match rendered list items to their previous versions across re-renders, enabling efficient updates.",
+          "keyPoints": [
+            "Keys must be unique among siblings (not globally unique)",
+            "Use stable IDs from your data source — not array index if the list can reorder",
+            "Using index as key causes bugs with stateful items, animations, and focus",
+            "Keys are not passed as props — use a separate prop if the child needs the ID",
+            "Missing keys = React warns and falls back to less efficient reconciliation",
+            "Keys should be on the outermost element returned in a .map() call"
+          ],
+          "resources": [
+            {
+              "title": "Rendering Lists",
+              "url": "https://react.dev/learn/rendering-lists"
+            }
+          ]
+        },
+        {
+          "id": "syntheticEvents",
+          "title": "Synthetic Events",
+          "summary": "React wraps native browser events in a SyntheticEvent object that normalizes behavior across browsers. Since React 17, events are attached to the root container rather than document.",
+          "keyPoints": [
+            "SyntheticEvent wraps the native event with a consistent cross-browser API",
+            "React uses event delegation — one listener at the root, not per element",
+            "Access the native event via e.nativeEvent",
+            "Pre-React 17: event pooling (events reused — had to call e.persist()); removed in v17+",
+            "Stopping propagation: e.stopPropagation(), e.preventDefault()",
+            "All standard DOM events are supported with the on prefix: onClick, onChange, onKeyDown, onSubmit"
+          ],
+          "resources": [
+            {
+              "title": "Responding to Events",
+              "url": "https://react.dev/learn/responding-to-events"
+            },
+            {
+              "title": "React Event Object Reference",
+              "url": "https://react.dev/reference/react-dom/components/common#react-event-object"
+            }
+          ]
+        },
+        {
+          "id": "fragments",
+          "title": "Fragments",
+          "summary": "Fragments let you group multiple children elements without adding extra nodes to the DOM — useful when a component must return multiple siblings.",
+          "keyPoints": [
+            "Shorthand: <></> — cannot accept props",
+            "Full form: <React.Fragment key={id}> — supports the key prop when mapping",
+            "Prevents unnecessary wrapper <div> nodes that break CSS (flex/grid children, table rows)",
+            "Particularly important for <tr> / <td> and <dl> / <dt> / <dd> structures",
+            "Zero cost — fragments produce no DOM output"
+          ],
+          "resources": [
+            {
+              "title": "Fragment Reference",
+              "url": "https://react.dev/reference/react/Fragment"
+            }
+          ]
+        },
+        {
+          "id": "controlledVsUncontrolled",
+          "title": "Controlled vs Uncontrolled Components",
+          "summary": "Controlled components have their form value driven by React state. Uncontrolled components let the DOM hold the value, accessed imperatively via refs.",
+          "keyPoints": [
+            "Controlled: value prop + onChange handler — React is the single source of truth",
+            "Uncontrolled: defaultValue (not value) + useRef to read imperatively",
+            "Controlled gives real-time access: instant validation, conditional rendering, formatting",
+            "Uncontrolled is simpler for file inputs (<input type='file'> is always uncontrolled)",
+            "React Hook Form uses uncontrolled inputs for performance (fewer re-renders)",
+            "Never switch between controlled/uncontrolled for the same input — causes warnings"
+          ],
+          "resources": [
+            {
+              "title": "Controlled and Uncontrolled Inputs",
+              "url": "https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable"
+            },
+            {
+              "title": "React Hook Form",
+              "url": "https://react-hook-form.com/"
+            }
+          ]
+        },
+        {
+          "id": "lifecycle",
+          "title": "Component Lifecycle",
+          "summary": "React components go through mount, update, and unmount phases. Function components use useEffect to handle all lifecycle phases; class components have explicit lifecycle methods.",
+          "keyPoints": [
+            "Mount: component renders and is inserted into the DOM",
+            "Update: re-renders when state or props change",
+            "Unmount: component is removed from the DOM — run cleanup",
+            "useEffect(() => { setup; return cleanup; }, [deps]) covers all three phases",
+            "No deps array = runs after every render",
+            "[] = runs once after mount, cleanup on unmount",
+            "[dep] = runs when dep changes; cleanup before next run",
+            "Class equivalents: componentDidMount, componentDidUpdate, componentWillUnmount",
+            "getDerivedStateFromProps and getSnapshotBeforeUpdate for advanced cases"
+          ],
+          "resources": [
+            {
+              "title": "Lifecycle of Reactive Effects",
+              "url": "https://react.dev/learn/lifecycle-of-reactive-effects"
+            },
+            {
+              "title": "Synchronizing with Effects",
+              "url": "https://react.dev/learn/synchronizing-with-effects"
+            }
+          ]
+        },
+        {
+          "id": "reconciliation",
+          "title": "Reconciliation & Fiber Architecture",
+          "summary": "Reconciliation is React's diffing algorithm that computes the minimal set of DOM changes. Fiber is React's internal reimplementation of the reconciler enabling incremental, interruptible rendering.",
+          "keyPoints": [
+            "React diffs element type first: different type = full subtree replacement",
+            "Same type = update props in place, recurse into children",
+            "List diffing uses keys to map old children to new children in O(n)",
+            "Fiber: each component instance is a 'fiber' — a unit of work with priority",
+            "Fiber tree: work-in-progress tree built alongside the current tree (double buffering)",
+            "Concurrent Mode: Fiber allows React to pause/resume/abort renders",
+            "Priority lanes: user input (high) preempts background data updates (low)",
+            "Commit phase: once a complete work-in-progress tree is ready, React flushes changes synchronously to the DOM"
+          ],
+          "resources": [
+            {
+              "title": "What is Concurrent React?",
+              "url": "https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react"
+            },
+            {
+              "title": "React Fiber Architecture (community deep-dive)",
+              "url": "https://github.com/acdlite/react-fiber-architecture"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "hooks",
+      "title": "Hooks",
+      "topics": [
+        {
+          "id": "useState",
+          "title": "useState",
+          "summary": "useState adds local, reactive state to function components. It returns a current value and a setter; calling the setter schedules a re-render with the new value.",
+          "keyPoints": [
+            "const [state, setState] = useState(initialValue)",
+            "Initial value can be a lazy initializer function: useState(() => expensiveCompute())",
+            "Setter can take a value or an updater function: setState(prev => prev + 1)",
+            "Always use the functional form when new state depends on old state",
+            "State updates are asynchronous — the new value is available on the next render",
+            "React 18: automatic batching groups multiple setState calls in async code too",
+            "Each useState call is independent; split state by concern, not into one big object"
+          ],
+          "resources": [
+            {
+              "title": "useState Reference",
+              "url": "https://react.dev/reference/react/useState"
+            },
+            {
+              "title": "State: A Component's Memory",
+              "url": "https://react.dev/learn/state-a-components-memory"
+            }
+          ]
+        },
+        {
+          "id": "useReducer",
+          "title": "useReducer",
+          "summary": "useReducer manages complex state with a pure reducer function and dispatched actions — an alternative to useState when state transitions involve multiple sub-values or complex logic.",
+          "keyPoints": [
+            "const [state, dispatch] = useReducer(reducer, initialState)",
+            "Reducer signature: (state, action) => newState — must be pure",
+            "Actions typically follow { type, payload } convention (like Redux)",
+            "Prefer over useState when: next state depends on multiple fields, or logic is complex/shared",
+            "dispatch has a stable reference — safe to pass down without useCallback",
+            "Can pass dispatch instead of multiple setter callbacks to child components",
+            "Initialize lazily: useReducer(reducer, arg, initFn) — initFn(arg) called once"
+          ],
+          "resources": [
+            {
+              "title": "useReducer Reference",
+              "url": "https://react.dev/reference/react/useReducer"
+            },
+            {
+              "title": "Extracting State Logic into a Reducer",
+              "url": "https://react.dev/learn/extracting-state-logic-into-a-reducer"
+            }
+          ]
+        },
+        {
+          "id": "useEffect",
+          "title": "useEffect",
+          "summary": "useEffect synchronizes a component with an external system — API calls, subscriptions, DOM manipulation — running after render and optionally cleaning up before the next run or unmount.",
+          "keyPoints": [
+            "Runs after the browser has painted — not synchronous with render",
+            "Dependency array controls when it re-runs: [] = once, [dep] = on dep change, omitted = every render",
+            "Return a cleanup function to cancel subscriptions, timers, abort controllers",
+            "In React 18 StrictMode (dev only): effects run twice to catch missing cleanups",
+            "Do NOT use to sync two pieces of React state — use derived state or useMemo instead",
+            "Common pitfalls: missing dependencies (stale closure), infinite loops (setting state without guard), forgetting cleanup"
+          ],
+          "resources": [
+            {
+              "title": "useEffect Reference",
+              "url": "https://react.dev/reference/react/useEffect"
+            },
+            {
+              "title": "You Might Not Need an Effect",
+              "url": "https://react.dev/learn/you-might-not-need-an-effect"
+            }
+          ]
+        },
+        {
+          "id": "useLayoutEffect",
+          "title": "useLayoutEffect",
+          "summary": "useLayoutEffect fires synchronously after all DOM mutations but before the browser paints — use it to read layout metrics or imperatively fix the DOM before the user sees it.",
+          "keyPoints": [
+            "Identical signature to useEffect",
+            "Runs synchronously between React's DOM mutations and the browser paint",
+            "Blocks paint — keep it fast; avoid async operations",
+            "Use cases: measuring DOM element dimensions, syncing scroll position, tooltip/popover positioning",
+            "Does NOT run on the server (use useEffect or suppress the warning for SSR-safe code)",
+            "Prefer useEffect — only reach for useLayoutEffect when you see visual flicker"
+          ],
+          "resources": [
+            {
+              "title": "useLayoutEffect Reference",
+              "url": "https://react.dev/reference/react/useLayoutEffect"
+            }
+          ]
+        },
+        {
+          "id": "useMemo",
+          "title": "useMemo",
+          "summary": "useMemo memoizes the result of an expensive calculation, recomputing only when its dependencies change. It also provides referential stability for objects and arrays.",
+          "keyPoints": [
+            "const value = useMemo(() => expensiveCalc(a, b), [a, b])",
+            "Does NOT prevent re-renders by itself — pair with React.memo on the child for that",
+            "Primary uses: (1) skip expensive recalculations, (2) stable object/array references for deps",
+            "Memoization has overhead — profile before adding, don't apply everywhere",
+            "The React Compiler can handle most useMemo automatically in the future",
+            "Return value must be deterministic given the same deps"
+          ],
+          "resources": [
+            {
+              "title": "useMemo Reference",
+              "url": "https://react.dev/reference/react/useMemo"
+            }
+          ]
+        },
+        {
+          "id": "useCallback",
+          "title": "useCallback",
+          "summary": "useCallback returns a memoized function reference that only changes when its dependencies change, preventing child components from re-rendering due to new function references.",
+          "keyPoints": [
+            "const fn = useCallback(() => doSomething(a), [a])",
+            "Equivalent to useMemo(() => fn, deps) — syntactic sugar for functions",
+            "Needed when passing callbacks to children wrapped in React.memo",
+            "Needed when a function is listed as a useEffect dependency",
+            "Without useCallback, a new function reference is created on every parent render",
+            "Premature optimization — profile first; the React Compiler will automate this"
+          ],
+          "resources": [
+            {
+              "title": "useCallback Reference",
+              "url": "https://react.dev/reference/react/useCallback"
+            }
+          ]
+        },
+        {
+          "id": "useContext",
+          "title": "useContext",
+          "summary": "useContext reads and subscribes to a React Context, letting components consume a shared value without threading props through every level of the tree.",
+          "keyPoints": [
+            "const value = useContext(MyContext) — returns the nearest Provider's value",
+            "Any value change in the Provider triggers re-render of ALL consumers (no built-in selector)",
+            "Split contexts by update frequency to limit unnecessary re-renders",
+            "Wrap the provided value in useMemo to keep the reference stable",
+            "Context is not a replacement for a global state manager in large apps",
+            "Good for: theme, auth user, locale — low-frequency, broadly needed data"
+          ],
+          "resources": [
+            {
+              "title": "useContext Reference",
+              "url": "https://react.dev/reference/react/useContext"
+            },
+            {
+              "title": "Passing Data Deeply with Context",
+              "url": "https://react.dev/learn/passing-data-deeply-with-context"
+            }
+          ]
+        },
+        {
+          "id": "useRef",
+          "title": "useRef",
+          "summary": "useRef returns a mutable object { current: value } that persists across renders without triggering re-renders. Used for DOM references and storing mutable values.",
+          "keyPoints": [
+            "const ref = useRef(initialValue) — ref.current is the mutable container",
+            "Mutating ref.current does NOT cause a re-render",
+            "DOM refs: <input ref={myRef} /> → myRef.current is the DOM node",
+            "Mutable storage: interval IDs, previous values, animation frames",
+            "Callback ref: ref={node => { ... }} for setup/teardown on mount/unmount",
+            "Do not read/write ref.current during render — use state for that"
+          ],
+          "resources": [
+            {
+              "title": "useRef Reference",
+              "url": "https://react.dev/reference/react/useRef"
+            },
+            {
+              "title": "Referencing Values with Refs",
+              "url": "https://react.dev/learn/referencing-values-with-refs"
+            }
+          ]
+        },
+        {
+          "id": "useSyncExternalStore",
+          "title": "useSyncExternalStore",
+          "summary": "useSyncExternalStore is the official API for subscribing to external stores (Redux, Zustand, browser APIs) in a way that is safe for concurrent rendering, preventing tearing.",
+          "keyPoints": [
+            "const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)",
+            "subscribe: function that registers a listener and returns an unsubscribe function",
+            "getSnapshot: synchronously returns the current store value — must be pure and stable",
+            "Prevents 'tearing' where different components read different values during a concurrent render",
+            "Used internally by Redux, Zustand, and other major libraries",
+            "getServerSnapshot: optional, for SSR to avoid hydration mismatches"
+          ],
+          "resources": [
+            {
+              "title": "useSyncExternalStore Reference",
+              "url": "https://react.dev/reference/react/useSyncExternalStore"
+            }
+          ]
+        },
+        {
+          "id": "useTransition",
+          "title": "useTransition",
+          "summary": "useTransition marks state updates as non-urgent transitions, allowing React to keep the UI responsive to urgent updates (user input) while processing the slower update in the background.",
+          "keyPoints": [
+            "const [isPending, startTransition] = useTransition()",
+            "Wrap low-priority state updates: startTransition(() => setTab(next))",
+            "React may interrupt and restart the transition if a higher-priority update comes in",
+            "isPending is true while the transition is in progress — show spinners/skeletons",
+            "Different from debouncing: React still processes the update, just at lower priority",
+            "Use cases: tab switching, large list filtering, any heavy re-render triggered by user input"
+          ],
+          "resources": [
+            {
+              "title": "useTransition Reference",
+              "url": "https://react.dev/reference/react/useTransition"
+            }
+          ]
+        },
+        {
+          "id": "useId",
+          "title": "useId",
+          "summary": "useId generates a unique, stable ID that is consistent between server and client renders — useful for linking accessibility attributes without hydration mismatches.",
+          "keyPoints": [
+            "const id = useId() — generates a string like ':r0:'",
+            "SSR-safe: same ID generated on server and client (no hydration mismatch)",
+            "Do NOT use as list keys — use data IDs for that",
+            "Common pattern: link label to input for a11y — <label htmlFor={id}> + <input id={id}>",
+            "Derive multiple IDs from one: `${id}-name`, `${id}-email` (they stay unique per component)"
+          ],
+          "resources": [
+            {
+              "title": "useId Reference",
+              "url": "https://react.dev/reference/react/useId"
+            }
+          ]
+        },
+        {
+          "id": "customHooks",
+          "title": "Custom Hooks",
+          "summary": "Custom hooks are functions prefixed with 'use' that encapsulate and reuse stateful logic across multiple components. Each component that uses a custom hook gets its own isolated state.",
+          "keyPoints": [
+            "Must start with 'use' — enforced by the rules-of-hooks linter",
+            "Can call any built-in or other custom hooks internally",
+            "Return whatever is useful: a value, a tuple [value, setter], or an object",
+            "Each component instance gets its own state — logic is shared, not state",
+            "Replaces HOC and render props patterns for logic reuse in most cases",
+            "Examples: useFetch, useDebounce, useLocalStorage, useIntersectionObserver, useMediaQuery",
+            "Clean separation of concerns — keeps component code focused on rendering"
+          ],
+          "resources": [
+            {
+              "title": "Reusing Logic with Custom Hooks",
+              "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+            }
+          ]
+        },
+        {
+          "id": "useDeferredValue",
+          "title": "useDeferredValue",
+          "summary": "useDeferredValue defers re-rendering a part of the UI with a stale value until the browser is idle, similar to debouncing but integrated with React's concurrent scheduler.",
+          "keyPoints": [
+            "const deferred = useDeferredValue(value) — returns the previous value during a re-render",
+            "Difference from useTransition: useTransition wraps the state setter; useDeferredValue wraps the consumer",
+            "Combine with React.memo on the slow child: it renders with the old value while the new one is computed",
+            "No artificial delay — React renders when it has time, not after N milliseconds",
+            "Use case: search inputs where the result list is expensive to render",
+            "isPending equivalent: compare deferred !== value to know if a new value is in flight"
+          ],
+          "resources": [
+            {
+              "title": "useDeferredValue Reference",
+              "url": "https://react.dev/reference/react/useDeferredValue"
+            }
+          ]
+        },
+        {
+          "id": "useImperativeHandle",
+          "title": "useImperativeHandle",
+          "summary": "useImperativeHandle customizes what a parent component sees when it accesses a ref, exposing a selective API instead of the raw DOM node.",
+          "keyPoints": [
+            "Used inside a forwardRef component: useImperativeHandle(ref, () => ({ focus, reset }))",
+            "Limits what the parent can do via the ref — good encapsulation",
+            "Use cases: custom input with focus/blur/clear, media player controls, canvas imperative API",
+            "Avoid overusing — imperative patterns bypass React's declarative model",
+            "React 19: refs are regular props; forwardRef is no longer required, but useImperativeHandle still works the same way"
+          ],
+          "resources": [
+            {
+              "title": "useImperativeHandle Reference",
+              "url": "https://react.dev/reference/react/useImperativeHandle"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "stateManagement",
+      "title": "State Management",
+      "topics": [
+        {
+          "id": "context",
+          "title": "Context",
+          "summary": "React Context provides a way to broadcast a value to any component in a subtree without explicit prop passing. A Provider supplies the value; useContext consumes it.",
+          "keyPoints": [
+            "const MyCtx = createContext(defaultValue) — default used when no Provider is above",
+            "<MyCtx.Provider value={...}> wraps the subtree that should receive the value",
+            "useContext(MyCtx) reads the nearest Provider's value and subscribes to changes",
+            "All consumers re-render when the Provider value reference changes",
+            "Wrap the provided value in useMemo: value={useMemo(() => ({a, b}), [a, b])}",
+            "Split into multiple contexts by update frequency to avoid broad re-renders",
+            "Not a substitute for a state manager at scale — lacks selectors and DevTools"
+          ],
+          "resources": [
+            {
+              "title": "createContext Reference",
+              "url": "https://react.dev/reference/react/createContext"
+            },
+            {
+              "title": "Passing Data Deeply with Context",
+              "url": "https://react.dev/learn/passing-data-deeply-with-context"
+            }
+          ]
+        },
+        {
+          "id": "redux",
+          "title": "Redux, RTK",
+          "summary": "Redux is a predictable state container with a single store, pure reducer functions, and dispatched actions. Redux Toolkit (RTK) is the official modern approach that eliminates boilerplate.",
+          "keyPoints": [
+            "Store: single source of truth for all global state",
+            "Actions: plain objects with type (and optional payload)",
+            "Reducers: pure functions (state, action) => newState — never mutate state directly",
+            "RTK createSlice: generates action creators and reducer together; uses Immer internally for safe mutations",
+            "RTK configureStore: sets up store with Redux DevTools and middleware",
+            "createAsyncThunk: handles async operations (pending/fulfilled/rejected)",
+            "RTK Query: built-in data fetching and caching solution (alternative to React Query)",
+            "useSelector for reading state, useDispatch for dispatching actions"
+          ],
+          "resources": [
+            {
+              "title": "Redux Toolkit Quick Start",
+              "url": "https://redux-toolkit.js.org/tutorials/quick-start"
+            },
+            {
+              "title": "RTK Query Overview",
+              "url": "https://redux-toolkit.js.org/rtk-query/overview"
+            }
+          ]
+        },
+        {
+          "id": "otherStateManagers",
+          "title": "Other State Managers",
+          "summary": "Lightweight alternatives to Redux that offer simpler APIs, smaller bundles, and different mental models for managing global client state.",
+          "keyPoints": [
+            "Zustand: minimal hook-based API, no boilerplate, middleware support (immer, devtools, persist)",
+            "MobX: reactive/observable model — mutate objects directly, reactions run automatically",
+            "Jotai: atomic model — compose small atoms of state, fine-grained subscriptions",
+            "Nanostores: framework-agnostic, tiny (<1 KB), great for islands architecture",
+            "Valtio: proxy-based — mutate a proxy object, consumers auto-subscribe to used fields",
+            "Choose based on: team familiarity, bundle budget, re-render performance needs, DevTools support"
+          ],
+          "resources": [
+            {
+              "title": "Zustand Documentation",
+              "url": "https://zustand.docs.pmnd.rs/"
+            },
+            { "title": "Jotai Documentation", "url": "https://jotai.org/" }
+          ]
+        },
+        {
+          "id": "syncClients",
+          "title": "Sync Clients (Server State)",
+          "summary": "Server-state libraries handle fetching, caching, synchronizing, and updating async data from the server, keeping the UI in sync without manual loading/error state boilerplate.",
+          "keyPoints": [
+            "TanStack Query (React Query): queries, mutations, background refetching, pagination, optimistic updates",
+            "Apollo Client: GraphQL-first, normalized cache, real-time subscriptions",
+            "SWR: stale-while-revalidate strategy, lightweight, Next.js native",
+            "Separates server state (API data) from UI state (local component state)",
+            "Key features: automatic refetching on focus, cache invalidation, deduplication, infinite scroll helpers",
+            "Devtools: TanStack Query DevTools show cache state in real time"
+          ],
+          "resources": [
+            {
+              "title": "TanStack Query Overview",
+              "url": "https://tanstack.com/query/latest/docs/framework/react/overview"
+            },
+            {
+              "title": "Apollo Client Documentation",
+              "url": "https://www.apollographql.com/docs/react/"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "patternsMechanisms",
+      "title": "Patterns and Mechanisms",
+      "topics": [
+        {
+          "id": "hoc",
+          "title": "Higher-Order Components (HOC)",
+          "summary": "A HOC is a function that takes a component and returns a new enhanced component, used to share cross-cutting logic (auth, analytics, data fetching) across components.",
+          "keyPoints": [
+            "Signature: const Enhanced = withFeature(WrappedComponent)",
+            "Pass all original props through: return <WrappedComponent {...props} extraProp={...} />",
+            "Set displayName for DevTools clarity: Enhanced.displayName = `withFeature(${name})`",
+            "Hoist static methods: use hoist-non-react-statics to copy statics from the wrapped component",
+            "Multiple HOCs can nest deeply ('wrapper hell') — compose with helper functions",
+            "Custom hooks have replaced HOCs for most logic-reuse scenarios in modern React",
+            "Still widely seen: Redux connect(), withRouter, react-i18next withTranslation()"
+          ],
+          "resources": [
+            {
+              "title": "Higher-Order Components (legacy docs)",
+              "url": "https://legacy.reactjs.org/docs/higher-order-components.html"
+            }
+          ]
+        },
+        {
+          "id": "renderProps",
+          "title": "Render Props",
+          "summary": "The render props pattern passes a function as a prop (or as children) that the component calls to determine what to render, enabling logic sharing with full control over the output.",
+          "keyPoints": [
+            "A component accepts a render or children prop that is a function",
+            "The component calls the function with data it manages: <Mouse>{pos => <Cat pos={pos} />}</Mouse>",
+            "Enables full control over rendering unlike HOCs which wrap the output",
+            "Cons: deeply nested JSX ('callback hell'), harder to memoize",
+            "Custom hooks have largely replaced this pattern for logic sharing",
+            "Still used in libraries: Formik, Downshift, React Final Form"
+          ],
+          "resources": [
+            {
+              "title": "Render Props (legacy docs)",
+              "url": "https://legacy.reactjs.org/docs/render-props.html"
+            }
+          ]
+        },
+        {
+          "id": "memo",
+          "title": "React.memo and memoization strategy",
+          "summary": "React.memo wraps a functional component to skip re-rendering if its props haven't shallowly changed. It is the component-level counterpart to useMemo/useCallback.",
+          "keyPoints": [
+            "const Memoized = React.memo(Component, arePropsEqual?)",
+            "Default: shallow equality check on all props (Object.is for each prop)",
+            "Custom comparator: arePropsEqual(prevProps, nextProps) → return true to skip render",
+            "Ineffective if parent creates new object/array/function references on every render — pair with useMemo/useCallback",
+            "Class equivalent: PureComponent (shallow props + state check) or shouldComponentUpdate",
+            "Strategy: profile first, identify actual bottlenecks, then apply memoization selectively"
+          ],
+          "resources": [
+            {
+              "title": "React.memo Reference",
+              "url": "https://react.dev/reference/react/memo"
+            },
+            {
+              "title": "Skipping Re-renders with memo",
+              "url": "https://react.dev/reference/react/memo#skipping-re-rendering-when-props-are-unchanged"
+            }
+          ]
+        },
+        {
+          "id": "portal",
+          "title": "Portal",
+          "summary": "Portals render a component's output into a different DOM node than its React parent, while keeping the component in the React tree for context and event bubbling.",
+          "keyPoints": [
+            "ReactDOM.createPortal(children, domNode) — domNode is a real DOM element",
+            "Events bubble through the React component tree, NOT the DOM tree",
+            "Use cases: modals, tooltips, dropdowns, toasts — anything needing to escape overflow:hidden or stacking context",
+            "The portaled component still has access to its React parent's context",
+            "Must ensure the target domNode exists before rendering (can use useEffect + document.createElement)",
+            "Cleanup: React handles unmounting the portal when the parent unmounts"
+          ],
+          "resources": [
+            {
+              "title": "createPortal Reference",
+              "url": "https://react.dev/reference/react-dom/createPortal"
+            }
+          ]
+        },
+        {
+          "id": "errorBoundaries",
+          "title": "Error Boundaries",
+          "summary": "Error boundaries are class components that catch JavaScript errors anywhere in their child component tree during rendering and show a fallback UI instead of crashing.",
+          "keyPoints": [
+            "Implement getDerivedStateFromError(error) to update state and show fallback",
+            "Implement componentDidCatch(error, info) to log errors",
+            "Must be class components — function component error boundaries not yet supported in React 18",
+            "Catches: render errors, lifecycle method errors, constructor errors in children",
+            "Does NOT catch: event handler errors, async code (setTimeout), errors in the boundary itself",
+            "Wrap different sections independently to isolate failures",
+            "react-error-boundary library provides a reusable function component wrapper"
+          ],
+          "resources": [
+            {
+              "title": "Error Boundaries",
+              "url": "https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary"
+            },
+            {
+              "title": "react-error-boundary",
+              "url": "https://github.com/bvaughn/react-error-boundary"
+            }
+          ]
+        },
+        {
+          "id": "routing",
+          "title": "Routing in React",
+          "summary": "React has no built-in router. External libraries map URL paths to components, handle navigation history, and support nested routes, params, and code splitting.",
+          "keyPoints": [
+            "React Router v6: <BrowserRouter>, <Routes>, <Route path='/x' element={<X />} />, useNavigate, useParams, useSearchParams",
+            "Wouter: smaller alternative (~2 KB) with a similar hooks API",
+            "Route parameters: <Route path='/users/:id' /> — read with useParams()",
+            "Nested routes and shared layouts: Outlet component renders the child route",
+            "Protected routes: wrap with an auth check component that redirects if not authed",
+            "Code splitting per route: <Route element={<Suspense><Lazy /></Suspense>} />"
+          ],
+          "resources": [
+            {
+              "title": "React Router v6 Tutorial",
+              "url": "https://reactrouter.com/start/library/routing"
+            },
+            { "title": "Wouter", "url": "https://github.com/molefrog/wouter" }
+          ]
+        },
+        {
+          "id": "reactCompiler",
+          "title": "React Compiler",
+          "summary": "React Compiler (formerly React Forget) is a build-time tool that automatically adds memoization, eliminating the need for manual useMemo, useCallback, and React.memo.",
+          "keyPoints": [
+            "Babel/SWC plugin — transforms code at compile time, no runtime overhead",
+            "Statically analyzes which values and functions are stable and wraps them automatically",
+            "Code must follow the Rules of React: pure renders, hooks at top level, etc.",
+            "Works with React 17+ via a compatibility shim",
+            "Does not change observable behavior — pure optimization",
+            "Test your code in the React Compiler Playground before enabling globally",
+            "Enabled per-directory or per-file with opt-in/opt-out directives"
+          ],
+          "resources": [
+            {
+              "title": "React Compiler Documentation",
+              "url": "https://react.dev/learn/react-compiler"
+            },
+            {
+              "title": "React Compiler Playground",
+              "url": "https://playground.react.dev/"
+            }
+          ]
+        },
+        {
+          "id": "forwardRef",
+          "title": "forwardRef",
+          "summary": "forwardRef lets a component pass a ref it receives down to a child DOM node or another component, enabling the parent to imperatively control the child.",
+          "keyPoints": [
+            "const Input = forwardRef((props, ref) => <input ref={ref} {...props} />)",
+            "ref is passed as the second argument — it is NOT in the props object",
+            "Set displayName for DevTools: Input.displayName = 'Input'",
+            "Combine with useImperativeHandle to expose a custom object instead of the raw DOM node",
+            "Common use: focusing a custom input, triggering animations, measuring a custom component",
+            "React 19: ref can be passed as a regular prop — forwardRef is no longer required"
+          ],
+          "resources": [
+            {
+              "title": "forwardRef Reference",
+              "url": "https://react.dev/reference/react/forwardRef"
+            }
+          ]
+        },
+        {
+          "id": "suspense",
+          "title": "Suspense & React.lazy",
+          "summary": "React.lazy loads a component dynamically (code splitting). Suspense provides a fallback UI while lazy components or async data are loading.",
+          "keyPoints": [
+            "const LazyComp = React.lazy(() => import('./Component')) — returns a Promise",
+            "Wrap in <Suspense fallback={<Spinner />}> — required, will throw without it",
+            "Route-level lazy loading is the highest-impact code splitting strategy",
+            "Multiple lazy components under one Suspense share one loading state",
+            "Error boundary should wrap Suspense to catch load failures",
+            "Suspense also integrates with data fetching in React 18+ frameworks (Next.js, Relay)"
+          ],
+          "resources": [
+            {
+              "title": "React.lazy Reference",
+              "url": "https://react.dev/reference/react/lazy"
+            },
+            {
+              "title": "Suspense Reference",
+              "url": "https://react.dev/reference/react/Suspense"
+            }
+          ]
+        },
+        {
+          "id": "compoundComponents",
+          "title": "Compound Components",
+          "summary": "The compound components pattern uses context to implicitly share state between a parent and its child components, enabling flexible composition without verbose prop passing.",
+          "keyPoints": [
+            "Parent manages shared state via context; children consume it without explicit props",
+            "Examples: <Select>/<Option>, <Tabs>/<Tab>/<TabPanel>, <Accordion>/<Item>",
+            "Consumer components are often attached as static properties: Select.Option = Option",
+            "More flexible than a single 'items' array prop — consumers control rendering completely",
+            "Implemented with createContext + useContext in function components",
+            "Widely used in headless UI libraries (Radix, Headless UI, Reach UI)"
+          ],
+          "resources": [
+            {
+              "title": "Compound Components with React Hooks (Kent C. Dodds)",
+              "url": "https://kentcdodds.com/blog/compound-components-with-react-hooks"
+            },
+            {
+              "title": "Radix UI Primitives",
+              "url": "https://www.radix-ui.com/"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "styling",
+      "title": "Styling & UI",
+      "topics": [
+        {
+          "id": "globalCss",
+          "title": "Global CSS",
+          "summary": "Global CSS is imported once at the app entry point and applies styles document-wide. It includes CSS resets, base typography, and CSS custom properties for theming.",
+          "keyPoints": [
+            "Import in main entry: import './index.css' in main.tsx",
+            "CSS custom properties (variables) for theming: --color-primary: #3b82f6",
+            "CSS reset: normalize.css or modern-normalize for consistent cross-browser baseline",
+            "Avoid overly generic global class names — use BEM, prefix, or scope with :where()",
+            "CSS-in-JS global styles: createGlobalStyle (styled-components) or Global (emotion)",
+            ":root selectors for theme tokens work well with JS-based theme switchers"
+          ],
+          "resources": [
+            {
+              "title": "Using CSS custom properties",
+              "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"
+            }
+          ]
+        },
+        {
+          "id": "cssModules",
+          "title": "CSS Modules",
+          "summary": "CSS Modules scope class names locally to each file by generating unique identifiers at build time, eliminating global class name collisions without a naming convention.",
+          "keyPoints": [
+            "import styles from './Button.module.css' — file must end in .module.css",
+            "<button className={styles.btn}> compiles to Button_btn__abc123",
+            "Compose classes: composes: base from './base.module.css'",
+            "camelCase names work better than kebab-case in JS: styles.myButton vs styles['my-button']",
+            "Global escape hatch: :global(.className) for intentional globals within a module",
+            "Works out of the box with Vite — no extra config needed"
+          ],
+          "resources": [
+            {
+              "title": "CSS Modules",
+              "url": "https://github.com/css-modules/css-modules"
+            },
+            {
+              "title": "Vite CSS Modules",
+              "url": "https://vitejs.dev/guide/features#css-modules"
+            }
+          ]
+        },
+        {
+          "id": "cssInJs",
+          "title": "CSS-in-JS",
+          "summary": "CSS-in-JS libraries let you write styles in JavaScript, collocating styles with component logic and enabling dynamic styling based on props and state.",
+          "keyPoints": [
+            "Runtime libraries: styled-components, Emotion — generate <style> tags in the browser",
+            "Zero-runtime / compile-time: Linaria, vanilla-extract, Panda CSS — extract to static CSS at build time",
+            "Dynamic styles: background: ${props => props.primary ? 'blue' : 'grey'}",
+            "Automatic vendor prefixing and dead code elimination",
+            "SSR: all major libraries support server rendering to avoid FOUC",
+            "Trade-off: runtime libraries add JS overhead; growing preference for zero-runtime in performance-critical apps"
+          ],
+          "resources": [
+            {
+              "title": "styled-components",
+              "url": "https://styled-components.com/docs"
+            },
+            {
+              "title": "vanilla-extract",
+              "url": "https://vanilla-extract.style/"
+            }
+          ]
+        },
+        {
+          "id": "utilityLibraries",
+          "title": "Utility Libraries (Tailwind, etc.)",
+          "summary": "Utility-first CSS frameworks provide low-level classes for every CSS property, enabling rapid styling by composing classes in HTML/JSX without writing custom CSS.",
+          "keyPoints": [
+            "Tailwind CSS: utility classes like flex, text-lg, bg-blue-500, hover:bg-blue-600",
+            "v4: CSS-first config with @theme in CSS files instead of tailwind.config.js",
+            "Unused class purging: only ships classes you actually use",
+            "clsx + tailwind-merge for conditional and conflict-resolved class composition",
+            "Works seamlessly with component libraries like shadcn/ui and Radix",
+            "UnoCSS: on-demand atomic CSS alternative, highly configurable, very fast"
+          ],
+          "resources": [
+            {
+              "title": "Tailwind CSS Documentation",
+              "url": "https://tailwindcss.com/docs"
+            },
+            { "title": "shadcn/ui", "url": "https://ui.shadcn.com/" }
+          ]
+        },
+        {
+          "id": "componentLibraries",
+          "title": "Component Libraries",
+          "summary": "Pre-built React component libraries provide accessible, styled UI components following a design system, speeding up development while maintaining consistency.",
+          "keyPoints": [
+            "MUI (Material UI): comprehensive Material Design components, themeable, large ecosystem",
+            "Ant Design: enterprise-focused, rich data table/form/chart components",
+            "Radix UI: headless, unstyled, fully accessible primitives — you bring the styles",
+            "shadcn/ui: Radix + Tailwind; copy-paste components you own in your codebase",
+            "Chakra UI: accessible, themeable, good DX, built-in dark mode",
+            "Headless (Radix, Headless UI) vs styled (MUI, Antd): headless = full style control, styled = faster to ship"
+          ],
+          "resources": [
+            { "title": "Radix UI", "url": "https://www.radix-ui.com/" },
+            { "title": "MUI Documentation", "url": "https://mui.com/" }
+          ]
+        },
+        {
+          "id": "responsiveness",
+          "title": "Responsiveness / Adaptiveness",
+          "summary": "Responsive design ensures the UI works correctly across all screen sizes using flexible layouts, media queries, and responsive units.",
+          "keyPoints": [
+            "Mobile-first: write base styles for small screens, add breakpoints for larger ones",
+            "CSS Grid and Flexbox for fluid, adaptive layouts",
+            "Media queries: @media (min-width: 768px) { ... }",
+            "Relative units: rem, em, %, vw, vh, dvh (dynamic viewport height for mobile)",
+            "Responsive images: srcset, sizes, <picture> for art direction",
+            "Container queries (modern): @container — style based on parent size, not viewport",
+            "Avoid fixed pixel widths for layout containers"
+          ],
+          "resources": [
+            {
+              "title": "Responsive Design (MDN)",
+              "url": "https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design"
+            },
+            {
+              "title": "CSS Container Queries",
+              "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries"
+            }
+          ]
+        },
+        {
+          "id": "a11y",
+          "title": "A11y (ARIA patterns & semantics)",
+          "summary": "Accessibility ensures the app is usable by people with disabilities, relying on semantic HTML, ARIA attributes, keyboard navigation, and adequate color contrast.",
+          "keyPoints": [
+            "Prefer semantic HTML: <button>, <nav>, <main>, <h1-h6> — avoid <div onClick>",
+            "ARIA roles, properties, and states: role='dialog', aria-label, aria-expanded, aria-live",
+            "Keyboard navigation: logical tab order, focus visible, focus trapping in modals",
+            "Color contrast: WCAG AA = 4.5:1 for normal text, 3:1 for large text",
+            "Screen reader testing: VoiceOver (Mac/iOS), NVDA/JAWS (Windows)",
+            "Automated auditing: axe-core, eslint-plugin-jsx-a11y, Lighthouse accessibility score",
+            "aria-live regions for dynamic content updates (notifications, loading states)"
+          ],
+          "resources": [
+            {
+              "title": "Accessibility (react.dev)",
+              "url": "https://react.dev/learn/accessibility"
+            },
+            {
+              "title": "ARIA Authoring Practices Guide",
+              "url": "https://www.w3.org/WAI/ARIA/apg/"
+            }
+          ]
+        },
+        {
+          "id": "cssPreprocessorts",
+          "title": "Sass / Less",
+          "summary": "CSS preprocessors add programming features — variables, nesting, mixins, functions — to CSS, compiled to standard CSS at build time.",
+          "keyPoints": [
+            "Sass/SCSS: most popular preprocessor; .scss syntax mirrors CSS with extensions",
+            "Variables: $primary: #blue (largely superseded by CSS custom properties)",
+            "Nesting: &:hover, & .child mirrors component structure",
+            "Mixins: @mixin flex-center { display: flex; align-items: center; } — reusable style blocks",
+            "Modern Sass: @use and @forward replace @import (avoids duplicate output)",
+            "Vite supports Sass natively: just install the sass package, no extra config",
+            "Less: similar concept, used by Ant Design"
+          ],
+          "resources": [
+            {
+              "title": "Sass Documentation",
+              "url": "https://sass-lang.com/documentation/"
+            },
+            {
+              "title": "Vite — CSS Pre-processors",
+              "url": "https://vitejs.dev/guide/features#css-pre-processors"
+            }
+          ]
+        },
+        {
+          "id": "cssReset",
+          "title": "CSS Reset",
+          "summary": "A CSS Reset overrides browser-default stylesheets to create a consistent, predictable baseline before adding any application styles.",
+          "keyPoints": [
+            "Browsers ship their own default stylesheets that differ from each other (margins, fonts, form elements)",
+            "CSS Reset: strips everything to zero — margin: 0, padding: 0, font-size: 100%, etc. (Eric Meyer's Reset)",
+            "Normalize.css: preserves useful defaults and only corrects cross-browser inconsistencies — less aggressive than a full reset",
+            "modern-normalize: updated, smaller Normalize targeting modern browsers only",
+            "Tailwind CSS Preflight: an opinionated reset built on modern-normalize, applied automatically with @import 'tailwindcss'",
+            "CSS Reset vs Normalize: Reset = blank slate you build up from; Normalize = consistent starting point that retains sensible defaults",
+            "Box-sizing reset: *, *::before, *::after { box-sizing: border-box } — the single most impactful reset rule",
+            "Apply the reset once, globally, at the very top of your stylesheet before any other rules"
+          ],
+          "resources": [
+            {
+              "title": "Eric Meyer's CSS Reset",
+              "url": "https://meyerweb.com/eric/tools/css/reset/"
+            },
+            {
+              "title": "Normalize.css",
+              "url": "https://necolas.github.io/normalize.css/"
+            },
+            {
+              "title": "Tailwind CSS Preflight",
+              "url": "https://tailwindcss.com/docs/preflight"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "performance",
+      "title": "Performance",
+      "topics": [
+        {
+          "id": "networkTab",
+          "title": "Network Tab",
+          "summary": "The browser DevTools Network Tab displays all network requests, their timing, payload size, caching status, and response details — the starting point for diagnosing load performance.",
+          "keyPoints": [
+            "Waterfall view: visualize request sequence and parallel loading",
+            "Filter by type: Fetch/XHR, JS, CSS, images, fonts, WebSocket",
+            "Check: bundle sizes, slow API calls, uncompressed assets, missing caching headers",
+            "Cache headers: Cache-Control, ETag, Last-Modified — look for max-age or immutable",
+            "Throttle network speed: simulate 3G / Slow 4G to test real-world conditions",
+            "Identify: large JS bundles, render-blocking resources, unnecessary duplicate requests"
+          ],
+          "resources": [
+            {
+              "title": "Chrome DevTools: Network",
+              "url": "https://developer.chrome.com/docs/devtools/network/"
+            }
+          ]
+        },
+        {
+          "id": "performanceTab",
+          "title": "Performance Tab",
+          "summary": "The Performance Tab records a runtime profile — frame rate, long tasks, JS execution, layout shifts — helping pinpoint what makes the UI slow or janky.",
+          "keyPoints": [
+            "Record while performing the interaction you want to optimize",
+            "Flame chart: call stack over time — find wide or deep expensive functions",
+            "Long Tasks (>50 ms): block the main thread and cause jank",
+            "Layout/Reflow: triggered by reading layout properties after mutations (forced reflow)",
+            "Frame rate indicator: drops below 60 fps signal rendering bottlenecks",
+            "Main thread breakdown: Scripting vs Rendering vs Painting vs Idle"
+          ],
+          "resources": [
+            {
+              "title": "Chrome DevTools: Performance",
+              "url": "https://developer.chrome.com/docs/devtools/performance/"
+            }
+          ]
+        },
+        {
+          "id": "virtualization",
+          "title": "Virtualization",
+          "summary": "Virtualization (windowing) renders only the list items currently visible in the viewport, slashing DOM node count and enabling smooth scrolling through thousands of items.",
+          "keyPoints": [
+            "Only DOM nodes for visible items + a small overscan buffer are created",
+            "react-window: lightweight, stable, fixed/variable size lists and grids",
+            "TanStack Virtual: more flexible, headless, no DOM dependency",
+            "Requires knowing item height (fixed) or estimating it (variable)",
+            "Infinite scroll: combine virtualization + pagination + IntersectionObserver",
+            "Fixes: slow initial render, memory pressure, scroll lag with 1000+ items"
+          ],
+          "resources": [
+            {
+              "title": "TanStack Virtual",
+              "url": "https://tanstack.com/virtual/latest"
+            },
+            {
+              "title": "react-window",
+              "url": "https://react-window.vercel.app/"
+            }
+          ]
+        },
+        {
+          "id": "minification",
+          "title": "Minification",
+          "summary": "Minification removes whitespace, renames variables, and eliminates dead code from JS and CSS bundles to minimize download size for production.",
+          "keyPoints": [
+            "Vite uses esbuild for JS minification and lightningcss for CSS by default in production builds",
+            "Tree shaking: removes unused ES module exports from the final bundle",
+            "Dead code elimination: if (false) {} or process.env.NODE_ENV === 'development' guards stripped",
+            "Source maps: optional in production for error tracking (Sentry) — map minified to source",
+            "Inspect bundle contents: rollup-plugin-visualizer or ANALYZE=true builds"
+          ],
+          "resources": [
+            {
+              "title": "Vite Build Optimizations",
+              "url": "https://vitejs.dev/guide/features#build-optimizations"
+            }
+          ]
+        },
+        {
+          "id": "dynamicImports",
+          "title": "Dynamic Imports",
+          "summary": "Dynamic import() splits code into separate chunks loaded on demand, reducing the initial JS bundle size and speeding up first load.",
+          "keyPoints": [
+            "import('./module') returns a Promise — Vite/Webpack creates a separate chunk",
+            "React.lazy(() => import('./Page')) integrates dynamic imports with Suspense",
+            "Route-based splitting is the highest-impact strategy: one chunk per route",
+            "Prefetching: preload future chunks before user navigates — <link rel='prefetch'>",
+            "Named exports: import('./mod').then(({ named }) => named)",
+            "Bundle analyzer: check which modules end up in which chunk"
+          ],
+          "resources": [
+            {
+              "title": "Vite Dynamic Import",
+              "url": "https://vitejs.dev/guide/features#dynamic-import"
+            },
+            {
+              "title": "Code-Splitting (react.dev)",
+              "url": "https://react.dev/reference/react/lazy#suspense-for-code-splitting"
+            }
+          ]
+        },
+        {
+          "id": "lighthouse",
+          "title": "Lighthouse",
+          "summary": "Lighthouse is an automated auditing tool built into Chrome DevTools and available as a CLI that scores Performance, Accessibility, SEO, and Best Practices with actionable recommendations.",
+          "keyPoints": [
+            "Core Web Vitals: LCP (Largest Contentful Paint < 2.5 s), INP (Interaction to Next Paint < 200 ms), CLS (Cumulative Layout Shift < 0.1)",
+            "Run in Incognito to exclude extension interference; use throttled CPU + network",
+            "Opportunities section: specific fixes with estimated time savings",
+            "CI integration: @lhci/cli (Lighthouse CI) runs audits on every deploy",
+            "Performance budget: fail the build if a Lighthouse score drops below a threshold",
+            "Mobile vs desktop: run both — mobile applies heavier CPU throttling"
+          ],
+          "resources": [
+            {
+              "title": "Lighthouse Overview",
+              "url": "https://developer.chrome.com/docs/lighthouse/"
+            },
+            {
+              "title": "Core Web Vitals",
+              "url": "https://web.dev/articles/vitals"
+            }
+          ]
+        },
+        {
+          "id": "webWorkers",
+          "title": "Web Workers",
+          "summary": "Web Workers run JavaScript on a background thread, freeing the main thread from CPU-heavy tasks so the UI remains responsive.",
+          "keyPoints": [
+            "Workers cannot access the DOM — communication is via postMessage / onmessage",
+            "Structured clone algorithm is used for data transfer (or Transferable Objects for zero-copy)",
+            "Use cases: large data parsing (CSV/JSON), image/canvas processing, cryptography, compression",
+            "Comlink: wraps a worker's API in Proxy, making it callable like an async function",
+            "Vite: new Worker(new URL('./worker.js', import.meta.url)) with type: 'module' support",
+            "Service Workers: separate concept — for caching and offline; Shared Workers: shared across tabs"
+          ],
+          "resources": [
+            {
+              "title": "Web Workers API (MDN)",
+              "url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers"
+            },
+            {
+              "title": "Comlink",
+              "url": "https://github.com/GoogleChromeLabs/comlink"
+            }
+          ]
+        },
+        {
+          "id": "imageOptimization",
+          "title": "Image Optimization",
+          "summary": "Optimizing images reduces page weight and improves LCP. Key techniques include modern formats, lazy loading, responsive srcset, and CDN-based transforms.",
+          "keyPoints": [
+            "Modern formats: WebP (good support, lossy/lossless), AVIF (best compression, growing support), SVG for icons",
+            "loading='lazy' defers off-screen image decoding — native browser support",
+            "Responsive: srcset + sizes tells the browser which image to fetch per viewport width",
+            "Always set width and height attributes to prevent Cumulative Layout Shift (CLS)",
+            "CDN image services: Cloudinary, Imgix, Vercel Image Optimization transform on the fly",
+            "Compression tools: Squoosh, sharp (Node.js), imagemin"
+          ],
+          "resources": [
+            {
+              "title": "Lazy loading images (MDN)",
+              "url": "https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading"
+            },
+            {
+              "title": "Responsive Images (MDN)",
+              "url": "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
+            }
+          ]
+        },
+        {
+          "id": "reactProfiler",
+          "title": "React Profiler",
+          "summary": "The React Profiler (both DevTools and the Profiler API) records component render timings and reasons, helping identify unnecessary re-renders and performance bottlenecks.",
+          "keyPoints": [
+            "DevTools Profiler: record a session, inspect flame graph of renders, see 'why did this render?'",
+            "Profiler API: <Profiler id='MyComp' onRender={callback}> for programmatic measurement",
+            "onRender(id, phase, actualDuration, baseDuration, startTime, commitTime)",
+            "baseDuration: estimated render time without memoization — shows memoization potential",
+            "Only available in development builds — stripped from production",
+            "'Highlight updates': DevTools can flash components as they re-render during interaction"
+          ],
+          "resources": [
+            {
+              "title": "Profiler API Reference",
+              "url": "https://react.dev/reference/react/Profiler"
+            },
+            {
+              "title": "React DevTools Profiler",
+              "url": "https://react.dev/learn/react-developer-tools"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "codeQuality",
+      "title": "Code Quality",
+      "topics": [
+        {
+          "id": "linters",
+          "title": "Linters / Code Formatters",
+          "summary": "Linters enforce correctness and style rules; formatters ensure consistent whitespace and structure. Together they reduce review friction and catch common bugs automatically.",
+          "keyPoints": [
+            "ESLint: most popular JS/TS linter; eslint-plugin-react and eslint-plugin-react-hooks enforce React best practices",
+            "Biome: all-in-one linter + formatter in Rust — 10-100x faster than ESLint + Prettier",
+            "Prettier: opinionated formatter; pair with eslint-config-prettier to disable conflicting ESLint rules",
+            "Git hooks: run linting on pre-commit with Husky + lint-staged or Lefthook",
+            "IDE integration: real-time underlines in VS Code / JetBrains via official extensions",
+            "Auto-fix: --fix flag applies safe fixes; --unsafe applies riskier ones"
+          ],
+          "resources": [
+            { "title": "Biome Documentation", "url": "https://biomejs.dev/" },
+            {
+              "title": "eslint-plugin-react-hooks",
+              "url": "https://www.npmjs.com/package/eslint-plugin-react-hooks"
+            }
+          ]
+        },
+        {
+          "id": "unitTesting",
+          "title": "Unit Testing",
+          "summary": "Unit tests verify individual components and utility functions in isolation, ensuring correct behavior for given inputs without a browser or API.",
+          "keyPoints": [
+            "Vitest: fast, Vite-native, Jest-compatible API — preferred for Vite projects",
+            "Jest: most popular, larger ecosystem, slower cold start",
+            "@testing-library/react: test from the user's perspective — find by role, label, text, not by class",
+            "AAA pattern: Arrange (set up), Act (interact), Assert (check outcome)",
+            "Mocking: vi.mock('./module'), vi.fn() for function stubs, vi.spyOn() for wrapping real functions",
+            "Avoid testing implementation details — prefer getByRole over querySelector",
+            "Coverage: run with --coverage; target meaningful branches, not 100% line coverage"
+          ],
+          "resources": [
+            {
+              "title": "Testing Library — React",
+              "url": "https://testing-library.com/docs/react-testing-library/intro/"
+            },
+            { "title": "Vitest Documentation", "url": "https://vitest.dev/" }
+          ]
+        },
+        {
+          "id": "typescript",
+          "title": "TypeScript",
+          "summary": "TypeScript adds static type checking to JavaScript, catching type errors at compile time, improving IDE autocomplete and refactoring safety, and serving as living documentation.",
+          "keyPoints": [
+            "Enable strict: true in tsconfig for maximum safety (strictNullChecks, noImplicitAny, etc.)",
+            "Component props: interface Props { name: string; onClick: () => void }",
+            "Generic components: <T,>(props: Props<T>) — the trailing comma avoids JSX ambiguity",
+            "Utility types: Partial<T>, Required<T>, Pick<T, K>, Omit<T, K>, ReturnType<F>, Parameters<F>",
+            "React types: ReactNode (anything renderable), ReactElement (JSX result), PropsWithChildren<P>",
+            "Type narrowing: typeof, instanceof, in, custom type guards (x is T)"
+          ],
+          "resources": [
+            {
+              "title": "TypeScript with React (react.dev)",
+              "url": "https://react.dev/learn/typescript"
+            },
+            {
+              "title": "TypeScript Handbook",
+              "url": "https://www.typescriptlang.org/docs/handbook/intro.html"
+            }
+          ]
+        },
+        {
+          "id": "projectSetup",
+          "title": "Project Setup",
+          "summary": "Project setup establishes the build tooling, TypeScript config, path aliases, and environment configuration that everything else depends on.",
+          "keyPoints": [
+            "Vite: fastest DX, ESM-first, instant HMR, @preact/preset-vite or @vitejs/plugin-react",
+            "Create React App: deprecated — migrate to Vite or Next.js",
+            "Next.js: for SSR, SSG, or full-stack React apps",
+            "Monorepo: Turborepo, Nx, or pnpm workspaces for multi-package repos",
+            "Path aliases: @/components → src/components (configure in vite.config.ts + tsconfig paths)",
+            "Environment variables: .env files, VITE_ prefix exposes vars to client code",
+            "Package manager: pnpm (fastest, strictest), yarn, npm"
+          ],
+          "resources": [
+            {
+              "title": "Vite Getting Started",
+              "url": "https://vitejs.dev/guide/"
+            },
+            { "title": "Turborepo", "url": "https://turbo.build/repo/docs" }
+          ]
+        },
+        {
+          "id": "storybook",
+          "title": "Storybook",
+          "summary": "Storybook is a workshop for developing, testing, and documenting UI components in isolation, outside the running application.",
+          "keyPoints": [
+            "Stories: named exports from a .stories.tsx file, each showing one component variant",
+            "Controls addon: interactively change props in the browser without code changes",
+            "Actions addon: log prop callbacks (onClick, onChange) in the story's panel",
+            "a11y addon: run axe-core accessibility checks per story",
+            "Visual regression: Chromatic (cloud), Playwright screenshots for snapshot testing",
+            "Docs addon: auto-generates component documentation from prop types and JSDoc",
+            "Works with Vite via @storybook/react-vite builder"
+          ],
+          "resources": [
+            {
+              "title": "Storybook Documentation",
+              "url": "https://storybook.js.org/docs"
+            }
+          ]
+        },
+        {
+          "id": "e2e",
+          "title": "E2E Testing",
+          "summary": "End-to-end tests drive a real browser through complete user flows, verifying that the entire application stack works together as expected.",
+          "keyPoints": [
+            "Playwright: multi-browser (Chromium, Firefox, WebKit), fast, parallelized, excellent API — recommended",
+            "Cypress: great DX, time-travel debugging, primarily Chromium",
+            "Test real user journeys: login, checkout, form submission, navigation",
+            "Selectors: getByRole, getByLabel, getByText — avoid brittle CSS class selectors",
+            "CI: run against a deployed preview or start the server in the test job",
+            "Visual snapshots: expect(page).toHaveScreenshot() for visual regression"
+          ],
+          "resources": [
+            {
+              "title": "Playwright Documentation",
+              "url": "https://playwright.dev/docs/intro"
+            },
+            {
+              "title": "Testing Library Queries Priority",
+              "url": "https://testing-library.com/docs/queries/about#priority"
+            }
+          ]
+        },
+        {
+          "id": "codeGeneration",
+          "title": "Code Generation / Scaffolding",
+          "summary": "Code generation tools automate repetitive file creation — components, tests, stores — enforcing consistent project structure and saving developer time.",
+          "keyPoints": [
+            "Plop: template-based generator with interactive prompts; define generators in plopfile.js",
+            "Hygen: file-based templates with frontmatter actions (inject, add, shell)",
+            "Framework CLIs: nx generate component, next generate (NextAuth scaffolding)",
+            "Custom scripts: Node.js scripts for simple patterns that don't need a full generator framework",
+            "AI-assisted: GitHub Copilot, Cursor, Claude Code for ad-hoc generation",
+            "Enforce architecture: generated code should follow established conventions out of the box"
+          ],
+          "resources": [
+            {
+              "title": "Plop Documentation",
+              "url": "https://plopjs.com/documentation/"
+            },
+            { "title": "Hygen", "url": "https://www.hygen.io/" }
+          ]
+        },
+        {
+          "id": "reactDevTools",
+          "title": "React DevTools",
+          "summary": "React DevTools is a browser extension that adds a dedicated panel for inspecting the component tree, editing state/props, and profiling render performance.",
+          "keyPoints": [
+            "Components tab: browse component tree, inspect/edit props and state live",
+            "Profiler tab: record sessions, see which components rendered and how long they took",
+            "Highlight updates: flash components as they re-render during interaction",
+            "'Why did this render?': shows which props/state/context triggered the re-render",
+            "$r in console: gives a reference to the currently selected component instance",
+            "Works with React 16.3+ in Chrome and Firefox; also available as standalone for React Native"
+          ],
+          "resources": [
+            {
+              "title": "React Developer Tools",
+              "url": "https://react.dev/learn/react-developer-tools"
+            }
+          ]
+        },
+        {
+          "id": "ai",
+          "title": "AI Tooling",
+          "summary": "AI coding tools accelerate development through intelligent autocomplete, code generation, explanation, and automated code review.",
+          "keyPoints": [
+            "GitHub Copilot: inline autocomplete and chat in VS Code / JetBrains",
+            "Cursor: AI-first editor with multi-file context and agentic edits",
+            "Claude Code: terminal-based agentic coding across entire codebases",
+            "Use cases: boilerplate generation, test writing, refactoring, documentation, debugging",
+            "Verify AI output: AI can introduce bugs, security issues, or outdated patterns — always review",
+            "Prompt tips: specify framework version, constraints, existing patterns in the codebase"
+          ],
+          "resources": [
+            {
+              "title": "GitHub Copilot Documentation",
+              "url": "https://docs.github.com/en/copilot"
+            }
+          ]
+        },
+        {
+          "id": "cicd",
+          "title": "CI/CD Integration",
+          "summary": "CI/CD pipelines automate linting, type checking, testing, building, and deploying on every code push, preventing regressions and enabling frequent, confident releases.",
+          "keyPoints": [
+            "GitHub Actions: most common for GitHub repos; YAML workflow files in .github/workflows/",
+            "Typical pipeline: install → typecheck → lint → test → build → deploy",
+            "Branch protection rules: require passing CI before merging to main",
+            "Caching: cache node_modules and build artifacts to speed up runs",
+            "Preview deployments: Vercel/Netlify auto-deploy PR branches for review",
+            "Secrets: store API keys in CI secrets manager, not in code"
+          ],
+          "resources": [
+            {
+              "title": "GitHub Actions Documentation",
+              "url": "https://docs.github.com/en/actions"
+            },
+            {
+              "title": "Vercel CI/CD",
+              "url": "https://vercel.com/docs/deployments/git"
+            }
+          ]
+        },
+        {
+          "id": "coreReviews",
+          "title": "Code Reviews",
+          "summary": "Code reviews are a collaborative quality gate where team members check each other's code for correctness, maintainability, and design before it merges.",
+          "keyPoints": [
+            "Review for: bugs, security issues, performance, readability, adherence to architecture",
+            "Keep PRs small and focused — easier to review thoroughly",
+            "Automated checks first (CI, linting, tests) so human reviewers focus on logic and design",
+            "Constructive feedback: suggest alternatives, explain the 'why', not just 'do this instead'",
+            "Comment labels: nit: (minor), suggestion:, blocker: — clarify severity",
+            "PR templates enforce a consistent description, test plan, and checklist",
+            "Author checklist: run tests locally, self-review the diff, link to the issue"
+          ],
+          "resources": [
+            {
+              "title": "Google Engineering Practices: Code Review",
+              "url": "https://google.github.io/eng-practices/review/"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "ssr",
+      "title": "SSR & Hydration",
+      "topics": [
+        {
+          "id": "ssr",
+          "title": "SSR / SSG Basics",
+          "summary": "Server-Side Rendering (SSR) generates HTML per request on the server. Static Site Generation (SSG) pre-renders at build time. Both improve initial load speed and SEO compared to a pure SPA.",
+          "keyPoints": [
+            "SSR: HTML generated on-demand on the server — good for dynamic, personalized content",
+            "SSG: HTML generated at build time and served as static files — fast, highly cacheable",
+            "Hydration: client-side React attaches event handlers to the server-rendered HTML",
+            "Hydration mismatch: server and client render different HTML → React error + full re-render",
+            "Streaming SSR (React 18): progressively stream HTML to the client; hydrate parts independently with <Suspense>",
+            "SEO: search engines can index server-rendered HTML without JS execution"
+          ],
+          "resources": [
+            {
+              "title": "React DOM Server Reference",
+              "url": "https://react.dev/reference/react-dom/server"
+            },
+            {
+              "title": "Rendering Strategies (web.dev)",
+              "url": "https://web.dev/articles/rendering-on-the-web"
+            }
+          ]
+        },
+        {
+          "id": "next",
+          "title": "Next.js",
+          "summary": "Next.js is the most popular React framework, providing SSR, SSG, ISR, API routes, file-based routing, image optimization, and full-stack capabilities out of the box.",
+          "keyPoints": [
+            "App Router (v13+): React Server Components by default, layouts, server actions, streaming",
+            "Pages Router: legacy system using getStaticProps / getServerSideProps — still supported",
+            "File-based routing: app/about/page.tsx → /about, app/users/[id]/page.tsx → /users/:id",
+            "Server Components: render on server only, no JS sent to client — great for data fetching",
+            "Server Actions: async functions marked 'use server' called from client components",
+            "Built-in <Image>, <Font>, <Script> components for automatic optimization"
+          ],
+          "resources": [
+            {
+              "title": "Next.js Documentation",
+              "url": "https://nextjs.org/docs"
+            },
+            {
+              "title": "App Router vs Pages Router",
+              "url": "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration"
+            }
+          ]
+        },
+        {
+          "id": "isr",
+          "title": "ISR (Incremental Static Regeneration)",
+          "summary": "ISR lets Next.js update static pages after they're built without rebuilding the entire site, using a time-based or on-demand revalidation strategy.",
+          "keyPoints": [
+            "Pages generate statically at build time and regenerate in the background after a set interval",
+            "Pages Router: export const revalidate = 60 or revalidate in getStaticProps",
+            "App Router: fetch(url, { next: { revalidate: 60 } }) or export const revalidate at route level",
+            "Stale-while-revalidate: the old cached page is served immediately while a new one is generated",
+            "On-demand ISR: revalidatePath('/path') or revalidateTag('tag') triggered by webhook",
+            "Use case: product pages, blog posts — content changes infrequently but must stay fresh"
+          ],
+          "resources": [
+            {
+              "title": "Incremental Static Regeneration (Next.js)",
+              "url": "https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration"
+            }
+          ]
+        },
+        {
+          "id": "nextJsRouting",
+          "title": "Routing in Next.js",
+          "summary": "Next.js offers two routing systems. The App Router (v13+) uses React Server Components with nested layouts; the Pages Router is the legacy file-based system.",
+          "keyPoints": [
+            "App Router: app/ directory — page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx",
+            "Pages Router: pages/ directory — getStaticProps, getServerSideProps, getStaticPaths",
+            "Dynamic routes: [id] for single param, [...slug] for catch-all, [[...slug]] for optional catch-all",
+            "Route Groups: (group)/ for layout organization without affecting URL",
+            "Parallel Routes: @slot convention for rendering multiple pages in the same layout (dashboards, modals)",
+            "Intercepting Routes: (.)folder — show modal while keeping old page in background"
+          ],
+          "resources": [
+            {
+              "title": "Next.js Routing Fundamentals",
+              "url": "https://nextjs.org/docs/app/building-your-application/routing"
+            }
+          ]
+        },
+        {
+          "id": "otherFrameworks",
+          "title": "Other Frameworks (Astro, TanStack, Gatsby)",
+          "summary": "React-compatible meta-frameworks beyond Next.js, each optimized for different architectural trade-offs — from zero-JS islands to full-stack type-safe routing.",
+          "keyPoints": [
+            "Astro: islands architecture — ships zero JS by default; interactive components opt-in; supports React, Vue, Svelte components together",
+            "TanStack Start: full-stack React with TanStack Router, type-safe server functions, file-based routing",
+            "Gatsby: GraphQL data layer for static sites; largely replaced by Next.js for most use cases",
+            "Remix / React Router v7: web standards first (FormData, Response), nested routes, full-stack mutations",
+            "Choose based on: content type (static vs dynamic), team skills, SSR requirements, bundle size goals"
+          ],
+          "resources": [
+            {
+              "title": "Astro Documentation",
+              "url": "https://docs.astro.build/"
+            },
+            {
+              "title": "TanStack Start",
+              "url": "https://tanstack.com/start/latest"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/scripts/generate-templates.js b/scripts/generate-templates.js
index a790413..5cfc583 100644
--- a/scripts/generate-templates.js
+++ b/scripts/generate-templates.js
@@ -9,7 +9,8 @@ const OUT_FILE = join(TEMPLATES_DIR, "index.json");
 const main = async () => {
   await mkdir(TEMPLATES_DIR, { recursive: true });
   const files = (await readdir(TEMPLATES_DIR)).filter(
-    (f) => f.endsWith(".json") && f !== "index.json",
+    (f) =>
+      f.endsWith(".json") && f !== "index.json" && !f.endsWith("_outline.json"),
   );
 
   const entries = [];
diff --git a/src/components/01-Molecules/SectionCard/SectionCard.tsx b/src/components/01-Molecules/SectionCard/SectionCard.tsx
index bc3cdd0..7107b70 100644
--- a/src/components/01-Molecules/SectionCard/SectionCard.tsx
+++ b/src/components/01-Molecules/SectionCard/SectionCard.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import type { FC } from "preact/compat";
-import type { Section } from "../../../types";
+import type { OutlineLookup, OutlineTopic, Section } from "../../../types";
 import { getQuestionLabel, getSectionPoints } from "../../../utils/checklist";
 import { Line } from "../../00-Atoms/Line/Line";
 import { Caption } from "../../00-Atoms/Typography/Typography";
@@ -9,11 +9,15 @@ interface SectionCardProps {
   section: Section;
   sectionIndex: number;
   onEdit?: (section: Section) => void;
+  outlineLookup?: OutlineLookup;
+  onTopicOpen?: (topic: OutlineTopic) => void;
 }
 
 export const SectionCard: FC<SectionCardProps> = ({
   section,
   sectionIndex,
+  outlineLookup,
+  onTopicOpen,
 }) => (
   <div className="card card-border border-base-300 bg-base-100 shadow-sm transition-all hover:shadow-md">
     <div className="card-body">
@@ -37,28 +41,39 @@ export const SectionCard: FC<SectionCardProps> = ({
         </Caption>
       ) : (
         <ul className="space-y-2 pr-2">
-          {section.questions.map((question, questionIndex) => (
-            <li
-              key={question.id}
-              className={clsx(
-                "bg-base-200 flex cursor-pointer items-center justify-between gap-1 rounded-lg p-3 font-medium shadow-sm hover:shadow-md",
-                question.extra ? "border-accent border-l-4" : "pl-4",
-              )}
-            >
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-medium">
-                  {getQuestionLabel(sectionIndex, questionIndex)}
-                </span>
-                <span className="text-sm">{question.text}</span>
-                {question.extra && (
-                  <span className="badge badge-xs badge-accent ml-1">
-                    Extra
-                  </span>
+          {section.questions.map((question, questionIndex) => {
+            const topic = outlineLookup?.[question.id];
+            const hasTopic = Boolean(topic && onTopicOpen);
+            return (
+              // biome-ignore lint/a11y/useKeyWithClickEvents: does not have negative impact on accessibility
+              <li
+                key={question.id}
+                className={clsx(
+                  "bg-base-200 flex items-center justify-between gap-1 rounded-lg p-3 font-medium shadow-sm transition-shadow",
+                  question.extra ? "border-accent border-l-4" : "pl-4",
+                  hasTopic
+                    ? "hover:bg-base-300 cursor-pointer hover:shadow-md"
+                    : "cursor-default",
                 )}
-              </div>
-              <span className="whitespace-nowrap">{question.score} pts</span>
-            </li>
-          ))}
+                onClick={
+                  hasTopic && topic ? () => onTopicOpen?.(topic) : undefined
+                }
+              >
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">
+                    {getQuestionLabel(sectionIndex, questionIndex)}
+                  </span>
+                  <span className="text-sm">{question.text}</span>
+                  {question.extra && (
+                    <span className="badge badge-xs badge-accent ml-1">
+                      Extra
+                    </span>
+                  )}
+                </div>
+                <span className="whitespace-nowrap">{question.score} pts</span>
+              </li>
+            );
+          })}
         </ul>
       )}
     </div>
diff --git a/src/components/02-Organisms/ChecklistGrid/ChecklistGrid.tsx b/src/components/02-Organisms/ChecklistGrid/ChecklistGrid.tsx
index 3d9537c..998293b 100644
--- a/src/components/02-Organisms/ChecklistGrid/ChecklistGrid.tsx
+++ b/src/components/02-Organisms/ChecklistGrid/ChecklistGrid.tsx
@@ -1,17 +1,21 @@
 import clsx from "clsx";
 import type { FC } from "preact/compat";
-import type { Section } from "../../../types";
+import type { OutlineLookup, OutlineTopic, Section } from "../../../types";
 import { Body, Heading2 } from "../../00-Atoms/Typography/Typography";
 import { SectionCard } from "../../01-Molecules/SectionCard/SectionCard";
 
 interface ChecklistGridProps {
   sections?: Section[];
   className?: string;
+  outlineLookup?: OutlineLookup;
+  onTopicOpen?: (topic: OutlineTopic) => void;
 }
 
 export const ChecklistGrid: FC<ChecklistGridProps> = ({
   sections = [],
   className = "",
+  outlineLookup,
+  onTopicOpen,
 }) => {
   if (sections.length === 0) {
     return (
@@ -38,6 +42,8 @@ export const ChecklistGrid: FC<ChecklistGridProps> = ({
           key={section.id}
           section={section}
           sectionIndex={sectionIndex}
+          outlineLookup={outlineLookup}
+          onTopicOpen={onTopicOpen}
         />
       ))}
     </div>
diff --git a/src/components/02-Organisms/InterviewSectionCard/InterviewSectionCard.tsx b/src/components/02-Organisms/InterviewSectionCard/InterviewSectionCard.tsx
index 460a52f..61d9798 100644
--- a/src/components/02-Organisms/InterviewSectionCard/InterviewSectionCard.tsx
+++ b/src/components/02-Organisms/InterviewSectionCard/InterviewSectionCard.tsx
@@ -33,10 +33,6 @@ export const InterviewSectionCard: FC<InterviewSectionCardProps> = ({
   // Check if all questions are checked
   const allChecked = checkedCount === totalCount && totalCount > 0;
 
-  const handleSectionCheckboxChange = (checked: boolean) => {
-    onCheckSection(checked);
-  };
-
   return (
     <div className="card bg-base-100 shadow-md">
       <div className="card-body">
@@ -65,9 +61,7 @@ export const InterviewSectionCard: FC<InterviewSectionCardProps> = ({
               className="checkbox checkbox-warning"
               checked={allChecked}
               onChange={(e) =>
-                handleSectionCheckboxChange(
-                  (e.target as HTMLInputElement).checked,
-                )
+                onCheckSection((e.target as HTMLInputElement).checked)
               }
               disabled={totalCount === 0}
             />
@@ -98,7 +92,7 @@ export const InterviewSectionCard: FC<InterviewSectionCardProps> = ({
                     aria-label={question.text}
                     type="checkbox"
                     className={clsx(
-                      `checkbox`,
+                      "checkbox",
                       question.extra ? "checkbox-accent" : "checkbox-warning",
                     )}
                     checked={question.checked || false}
@@ -108,8 +102,7 @@ export const InterviewSectionCard: FC<InterviewSectionCardProps> = ({
                         (e.target as HTMLInputElement).checked,
                       )
                     }
-                    // Prevent the click event from bubbling up to the li element
-                    // This prevents double-toggling when clicking directly on the checkbox
+                    // Prevent the click from bubbling to the li handler
                     onClick={(e) => e.stopPropagation()}
                   />
                   <span className="flex items-center gap-2">
diff --git a/src/components/02-Organisms/OutlineDrawer/OutlineDrawer.tsx b/src/components/02-Organisms/OutlineDrawer/OutlineDrawer.tsx
new file mode 100644
index 0000000..a59c54e
--- /dev/null
+++ b/src/components/02-Organisms/OutlineDrawer/OutlineDrawer.tsx
@@ -0,0 +1,119 @@
+import { type FC, useEffect, useRef } from "preact/compat";
+import type { OutlineTopic } from "../../../types";
+
+interface OutlineDrawerProps {
+  topic: OutlineTopic | null;
+  onClose: () => void;
+}
+
+export const OutlineDrawer: FC<OutlineDrawerProps> = ({ topic, onClose }) => {
+  const ref = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (topic) {
+      el.showModal();
+    } else {
+      el.close();
+    }
+  }, [topic]);
+
+  return (
+    // margin: 0 0 0 auto pushes the dialog to the right edge of the viewport
+    <dialog
+      ref={ref}
+      onClose={onClose}
+      className="outline-drawer m-0 ml-auto h-screen w-full max-w-md bg-base-100 p-0 shadow-2xl backdrop:bg-black/30"
+    >
+      {topic && <DrawerContent topic={topic} onClose={onClose} />}
+    </dialog>
+  );
+};
+
+const DrawerContent: FC<{ topic: OutlineTopic; onClose: () => void }> = ({
+  topic,
+  onClose,
+}) => (
+  <div className="flex h-full flex-col">
+    {/* Header */}
+    <div className="bg-base-200 flex items-start justify-between gap-3 p-4 pb-3">
+      <h2 className="text-base-content text-xl font-bold leading-tight">
+        {topic.title}
+      </h2>
+      <button
+        type="button"
+        className="btn btn-xs btn-ghost btn-square mt-0.5 shrink-0"
+        onClick={onClose}
+        aria-label="Close"
+      >
+        ✕
+      </button>
+    </div>
+
+    {/* Scrollable body */}
+    <div className="flex flex-1 flex-col gap-5 overflow-y-auto p-4">
+      {/* Summary */}
+      <p className="text-base-content/80 text-sm leading-relaxed">
+        {topic.summary}
+      </p>
+
+      {/* Key Points */}
+      {topic.keyPoints.length > 0 && (
+        <section aria-labelledby={`kp-${topic.id}`}>
+          <h3
+            id={`kp-${topic.id}`}
+            className="text-base-content mb-2 text-xs font-semibold tracking-widest uppercase opacity-50"
+          >
+            Key Points
+          </h3>
+          <ul className="flex flex-col gap-2">
+            {topic.keyPoints.map((point) => (
+              <li
+                key={point}
+                className="bg-base-200 flex items-start gap-2 rounded-lg px-3 py-2 text-sm"
+              >
+                <span
+                  className="text-warning mt-0.5 shrink-0 text-xs font-bold"
+                  aria-hidden="true"
+                >
+                  ●
+                </span>
+                <span className="text-base-content/90">{point}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {/* Resources */}
+      {topic.resources.length > 0 && (
+        <section aria-labelledby={`res-${topic.id}`}>
+          <h3
+            id={`res-${topic.id}`}
+            className="text-base-content mb-2 text-xs font-semibold tracking-widest uppercase opacity-50"
+          >
+            Resources
+          </h3>
+          <ul className="flex flex-col gap-2">
+            {topic.resources.map((r) => (
+              <li key={r.url}>
+                <a
+                  href={r.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="bg-base-200 hover:bg-base-300 flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors"
+                >
+                  <span aria-hidden="true">🔗</span>
+                  <span className="text-primary underline underline-offset-2">
+                    {r.title}
+                  </span>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  </div>
+);
diff --git a/src/components/04-Pages/TemplateViewPage/TemplateViewPage.tsx b/src/components/04-Pages/TemplateViewPage/TemplateViewPage.tsx
index 98324fc..4c99d61 100644
--- a/src/components/04-Pages/TemplateViewPage/TemplateViewPage.tsx
+++ b/src/components/04-Pages/TemplateViewPage/TemplateViewPage.tsx
@@ -1,8 +1,9 @@
 import { type FC, useEffect, useMemo, useState } from "preact/compat";
 import { useLocation, useParams } from "wouter";
+import { useOutline } from "../../../hooks/useOutline";
 import { getChecklistPage } from "../../../routes";
 import { addChecklist } from "../../../stores/checklistStore";
-import type { Checklist } from "../../../types";
+import type { Checklist, OutlineTopic } from "../../../types";
 import { getId } from "../../../utils/id";
 import { Line } from "../../00-Atoms/Line/Line";
 import { Toolstrip } from "../../00-Atoms/Tooltstrip/Toolstip";
@@ -10,9 +11,11 @@ import { Caption, Heading1 } from "../../00-Atoms/Typography";
 import { Page } from "../../01-Molecules/Page/Page";
 import { ChecklistGrid } from "../../02-Organisms/ChecklistGrid/ChecklistGrid";
 import { ErrorPage } from "../../02-Organisms/ErrorBoundaryPage/ErrorPage";
+import { OutlineDrawer } from "../../02-Organisms/OutlineDrawer/OutlineDrawer";
 
 type Template = Checklist & {
   path?: string;
+  tags?: string[];
 };
 
 export const TemplateViewPage: FC = () => {
@@ -20,8 +23,10 @@ export const TemplateViewPage: FC = () => {
   const [template, setTemplate] = useState<Template | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [, setLocation] = useLocation();
+  const [selectedTopic, setSelectedTopic] = useState<OutlineTopic | null>(null);
 
   const src = useMemo(() => `/templates/${params.slug}.json`, [params.slug]);
+  const outlineLookup = useOutline(params.slug);
 
   useEffect(() => {
     setError(null);
@@ -39,6 +44,7 @@ export const TemplateViewPage: FC = () => {
       id: getId(),
       name: template.name,
       description: template.description,
+      tags: template.tags,
       sections: template.sections,
       createdAt: now,
       updatedAt: now,
@@ -86,9 +92,17 @@ export const TemplateViewPage: FC = () => {
             </div>
           </Toolstrip>
           <Line>Preview</Line>
-          <ChecklistGrid sections={template.sections} />
+          <ChecklistGrid
+            sections={template.sections}
+            outlineLookup={outlineLookup}
+            onTopicOpen={setSelectedTopic}
+          />
         </>
       )}
+      <OutlineDrawer
+        topic={selectedTopic}
+        onClose={() => setSelectedTopic(null)}
+      />
     </Page>
   );
 };
diff --git a/src/hooks/useOutline.ts b/src/hooks/useOutline.ts
new file mode 100644
index 0000000..a60fcfb
--- /dev/null
+++ b/src/hooks/useOutline.ts
@@ -0,0 +1,36 @@
+import { useEffect, useMemo, useState } from "preact/compat";
+import type { Outline, OutlineLookup } from "../types";
+
+export function useOutline(slug: string | undefined): OutlineLookup {
+  const [outline, setOutline] = useState<Outline | null>(null);
+
+  useEffect(() => {
+    if (!slug) {
+      setOutline(null);
+      return;
+    }
+    let cancelled = false;
+    fetch(`/templates/${slug}_outline.json`)
+      .then((r) => (r.ok ? r.json() : Promise.reject()))
+      .then((data: Outline) => {
+        if (!cancelled) setOutline(data);
+      })
+      .catch(() => {
+        if (!cancelled) setOutline(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [slug]);
+
+  return useMemo<OutlineLookup>(() => {
+    if (!outline) return {};
+    const map: OutlineLookup = {};
+    for (const section of outline.sections) {
+      for (const topic of section.topics) {
+        map[topic.id] = topic;
+      }
+    }
+    return map;
+  }, [outline]);
+}
diff --git a/src/index.css b/src/index.css
index 6cecdf4..dd3a804 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,3 +27,17 @@ body {
 .focusable-neutral:focus-visible {
   outline-color: var(--color-neutral-content);
 }
+
+/* Outline drawer – right-side slide-in animation */
+@keyframes drawer-slide-in {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+dialog.outline-drawer[open] {
+  animation: drawer-slide-in 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
diff --git a/src/types.ts b/src/types.ts
index a49890f..6f8d8f5 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -16,11 +16,43 @@ export interface Checklist {
   id: string;
   name: string;
   description?: string;
+  tags?: string[];
   sections: Section[];
   createdAt: string;
   updatedAt: string;
 }
 
+// Outline / training material types
+
+export interface OutlineResource {
+  title: string;
+  url: string;
+}
+
+export interface OutlineTopic {
+  id: string;
+  title: string;
+  summary: string;
+  keyPoints: string[];
+  resources: OutlineResource[];
+}
+
+export interface OutlineSection {
+  id: string;
+  title: string;
+  topics: OutlineTopic[];
+}
+
+export interface Outline {
+  id: string;
+  checklistId: string;
+  name: string;
+  description: string;
+  sections: OutlineSection[];
+}
+
+export type OutlineLookup = Record<string, OutlineTopic>;
+
 export interface Interview {
   id: string;
   name: string;
diff --git a/tests/interview.spec.ts b/tests/interview.spec.ts
index cb50c16..3bdd86b 100644
--- a/tests/interview.spec.ts
+++ b/tests/interview.spec.ts
@@ -23,7 +23,7 @@ test("Create interview", async ({ page }) => {
   await expect(
     page.getByRole("link", { name: "Test interview" }),
   ).toBeVisible();
-  await expect(page.getByText("Trainee")).toBeVisible();
+  await expect(page.getByText("Junior")).toBeVisible();
   await page.getByRole("button", { name: "Delete Interview" }).click();
   await page.getByRole("button", { name: "Confirm" }).click();
 });
diff --git a/tests/templates.spec.ts b/tests/templates.spec.ts
index d283f60..500cc71 100644
--- a/tests/templates.spec.ts
+++ b/tests/templates.spec.ts
@@ -4,7 +4,7 @@ test("Copy template", async ({ page }) => {
   await page.goto("http://localhost:5173/");
   await page.getByRole("link", { name: "Copy template" }).click();
   await page.getByRole("link", { name: "View Template" }).click();
-  await expect(page.getByText("Hooks")).toBeVisible();
+  await expect(page.getByText("State Management")).toBeVisible();
   await page.getByRole("button", { name: "Copy to My Checklists" }).click();
   await expect(
     page.getByRole("button", { name: "Start Interview" }),