1

Retrieval Warm-Up

Welcome back to Part 2

Before opening any code, let’s see what stuck from Part 1. The next quiz is a quick retrieval check — try to answer from memory before peeking at your Part 1 notes or scrolling back.

Why this comes first: research on spaced retrieval is unambiguous (Karpicke & Roediger, Science 2008). The act of retrieving is what builds durable memory. Re-reading the routine here would feel like consolidation but actually do nothing. So the routine is intentionally NOT re-displayed before the quiz — and the quiz is the first thing you do this session.

If you can’t recall something, that’s fine. Answer your best guess. The retrieval attempt is what matters. After the quiz, the rest of Part 2 will rebuild the vocabulary on demand.

Use recall-notes.md to write down what you remember on your own first, then take the quiz.

Starter files
recall-notes.md
# Part 1 Recall — open writing

Take 2–3 minutes. Without looking at your Part 1 notes or scrolling
back, write down whatever you remember about how to read unfamiliar
code quickly. Routine, vocabulary, traps you noticed, examples that
stuck. Sentences, bullet points, sketches — whatever comes out.

Whatever you can't recall is exactly what the next quiz will probe.
The retrieval *attempt* is what builds memory, not the structured
checklist. Don't pre-organize.
2

Tests as Specification Beacons

Why this matters

If you just finished the basics tutorial today, stop here and come back in two or three days. That pause forces retrieval, which is exactly what makes the skill stick. When you return, this step starts with one of the strongest professional beacons: tests that describe the behavior before you read the implementation.

🎯 You will learn to

  • Use Node.js tests to form a behavior hypothesis
  • Verify one expectation by reading the smallest relevant helper
  • Decide when a test is a trustworthy beacon and when it needs implementation evidence

Retrieval Warm-Up

Before opening the code, recall the Part 1 routine without looking:

Orient → Predict → Beacon-hunt → Descend selectively → Verify → Summarize

Then name one switch trigger. For example: if a behavior depends on a risky branch, stop scanning and trace one input through that branch.

Tests First

Students often read tests only after code fails. For comprehension, read them before production code:

  1. Test names tell you the intended behavior.
  2. Setup data tells you the important objects.
  3. Assertions tell you the invariant or postcondition.
  4. Failing cases tell you where the implementation is risky.

Contract-to-Mechanism Map

After reading tests, write a tiny contract map before implementation:

Contract clue Mechanism to verify
“returns only sessions that fit” A filter or guard using minutes
“prefers a matching topic” A ranking or scoring rule using topic
“low energy gives solo sessions a boost” A branch involving energy and mode

This keeps your attention on the behavior the tests actually promise. You can always trace more later, but first you should know what you are trying to prove.

Contrast Set

The tests have similar surface shapes, but they point to different implementation responsibilities:

Test clue Similar surface shape Different mechanism to inspect
“returns the only session that fits” Calls pickSessionPlan() and checks returned titles Minutes filter
“places a matching topic first” Calls pickSessionPlan() and checks returned titles Scoring plus sort order
“solo sessions a low-energy bonus” Uses the same request fields scoreSession() branch

Same test shape, different implementation responsibility. Do not read every public-function test as pointing to the same line of code.

In this step, read sessionPlanner.test.js before sessionPlanner.js. Your first hypothesis should be about behavior, not implementation:

“This planner probably returns short study sessions that fit the time box, prefers matching topics, and adjusts for energy level.”

Then inspect only the helper that can confirm each part.

One syntax note: .sort((left, right) => scoreSession(right, request) - scoreSession(left, request)) puts higher-scoring sessions first. You do not need to master every sorting detail here; just connect that expression to the ranking behavior named by the tests.

Starter files
sessionPlanner.js
const SESSIONS = [
  { id: 1, title: "Trace one Python helper", topic: "python", minutes: 10, mode: "solo" },
  { id: 2, title: "Pair-read a React component", topic: "react", minutes: 18, mode: "pair" },
  { id: 3, title: "Map an Express route", topic: "node", minutes: 16, mode: "solo" },
  { id: 4, title: "Sketch a full review plan", topic: "review", minutes: 30, mode: "pair" },
];

function scoreSession(session, request) {
  let score = 0;
  if (session.topic === request.topic) {
    score += 5;
  }
  if (session.minutes <= request.minutes) {
    score += 2;
  }
  if (request.energy === "low" && session.mode === "solo") {
    score += 2;
  }
  if (session.minutes > request.minutes) {
    score -= 10;
  }
  return score;
}

function pickSessionPlan(request) {
  return SESSIONS
    .filter(session => session.minutes <= request.minutes)
    .sort((left, right) => scoreSession(right, request) - scoreSession(left, request))
    .slice(0, 2)
    .map(session => session.title);
}

module.exports = { pickSessionPlan, scoreSession };
sessionPlanner.test.js
const test = require("node:test");
const assert = require("node:assert/strict");
const { pickSessionPlan, scoreSession } = require("./sessionPlanner");

test("returns the only session that fits a 12-minute request", () => {
  const plan = pickSessionPlan({ topic: "python", minutes: 12, energy: "high" });
  assert.deepEqual(plan, ["Trace one Python helper"]);
});

test("places a matching topic first when it fits", () => {
  const plan = pickSessionPlan({ topic: "node", minutes: 18, energy: "high" });
  assert.equal(plan[0], "Map an Express route");
});

test("scoreSession gives solo sessions a low-energy bonus", () => {
  const soloScore = scoreSession(
    { title: "Solo", topic: "python", minutes: 10, mode: "solo" },
    { topic: "react", minutes: 20, energy: "low" }
  );
  const pairScore = scoreSession(
    { title: "Pair", topic: "python", minutes: 10, mode: "pair" },
    { topic: "react", minutes: 20, energy: "low" }
  );
  assert.equal(soloScore, pairScore + 2);
});
3

Node Hypothesis Sprint

Why this matters

Backend code often spreads behavior across route handlers, services, and data modules. Reading everything from top to bottom burns attention on details before you know what matters. This sprint asks you to read tests as beacons, choose a route, and trace only the path needed to answer the questions. Treat the timer as feedback about your reading path, not a grade.

🎯 You will learn to

  • Apply tests-as-specification reading to a multi-file Node.js example
  • Trace request data from a route handler into a service helper
  • Identify when a 404 behavior is implemented in the route rather than the data layer

Reading Goal

You have 10 minutes. Read in this order:

  1. __tests__/sessionRoutes.test.js
  2. routes/sessionRoutes.js
  3. Only the service helper needed for the current question
  4. Write a one-line contract-to-mechanism note: expected behavior → code region that enforces it.

fakeResponse() is only a small test double for Express’s res object. Read its status() and json() methods only enough to know what the route sent; do not treat it as production behavior.

Use reading-notes.md to write your reading path. Core target: answer the route and service questions. Stretch target: locate where a field leak would begin.

Practice mode: on your first attempt, use the +5 min button if you are still collecting evidence. On a replay, try finishing inside the original 10 minutes. Before the quiz, write one reflection line about what you inspected first, what you skipped, and what evidence changed or confirmed your hypothesis.

Do not edit the code. Your job is to answer with evidence.

Starter files
reading-notes.md
# Node Hypothesis Sprint Notes

Contract hypothesis:

Top 3 beacons:
1.
2.
3.

What I can ignore for this question:

Smallest trace:

Final EiPE summary:

Timer reflection:
- First thing I inspected:
- Detail I deliberately skipped:
- Evidence that changed or confirmed my hypothesis:
data/sessions.js
const sessions = [
  { id: 1, title: "Python filter drill", topic: "python", minutes: 12, nextStep: "Trace one hidden item" },
  { id: 2, title: "React callback map", topic: "react", minutes: 18, nextStep: "Follow the callback prop" },
  { id: 3, title: "Node route map", topic: "node", minutes: 16, nextStep: "Read tests before routes" },
];

module.exports = { sessions };
services/sessionService.js
const { sessions } = require("../data/sessions");

function findSessions(topic) {
  if (!topic || topic === "all") {
    return [...sessions];
  }
  return sessions.filter(session => session.topic === topic);
}

function findSessionById(id) {
  return sessions.find(session => session.id === id);
}

function toSummary(session) {
  return {
    id: session.id,
    title: session.title,
    minutes: session.minutes,
  };
}

function withNextStep(session) {
  return {
    ...toSummary(session),
    topic: session.topic,
    nextStep: session.nextStep,
  };
}

module.exports = { findSessions, findSessionById, toSummary, withNextStep };
routes/sessionRoutes.js
const {
  findSessions,
  findSessionById,
  toSummary,
  withNextStep,
} = require("../services/sessionService");

function listSessions(req, res) {
  const topic = req.query.topic || "all";
  const summaries = findSessions(topic).map(toSummary);
  return res.json(summaries);
}

function sessionDetails(req, res) {
  const id = Number(req.params.id);
  const session = findSessionById(id);
  if (!session) {
    return res.status(404).json({ error: "session not found" });
  }
  return res.json(withNextStep(session));
}

module.exports = { listSessions, sessionDetails };
__tests__/sessionRoutes.test.js
const test = require("node:test");
const assert = require("node:assert/strict");
const { listSessions, sessionDetails } = require("../routes/sessionRoutes");

function fakeResponse() {
  return {
    statusCode: 200,
    body: undefined,
    status(code) {
      this.statusCode = code;
      return this;
    },
    json(payload) {
      this.body = payload;
      return this;
    },
  };
}

test("GET /sessions?topic=react returns only React summaries", () => {
  const res = fakeResponse();

  listSessions({ query: { topic: "react" } }, res);

  assert.equal(res.statusCode, 200);
  assert.deepEqual(res.body, [
    { id: 2, title: "React callback map", minutes: 18 },
  ]);
});

test("GET /sessions/:id includes the next recommended step", () => {
  const res = fakeResponse();

  sessionDetails({ params: { id: "3" } }, res);

  assert.equal(res.statusCode, 200);
  assert.equal(res.body.nextStep, "Read tests before routes");
});

test("GET /sessions/:id returns 404 for a missing session", () => {
  const res = fakeResponse();

  sessionDetails({ params: { id: "99" } }, res);

  assert.equal(res.statusCode, 404);
  assert.deepEqual(res.body, { error: "session not found" });
});
4

Cross-File Interaction Maps

Why this matters

Large code rarely keeps cause and effect in one place. A click in one React file may update state in another file and change rendering in a third. Cross-file comprehension means turning scattered code into a small interaction map.

🎯 You will learn to

  • Map event flow across parent and child React components
  • Identify which file owns state and which files only receive props
  • Verify a cross-file hypothesis by following one callback path

The Interaction Map

Use a four-column map. This one is partly worked; fill the blanks in your own notes before checking the code.

Trigger File / component Evidence Effect
User types in search box LessonSearch onChange={event => onQueryChange(...)} Calls parent callback
Parent callback runs _____ onQueryChange={setQuery} Updates query state
Derived list recalculates App _____ Chooses visible lessons
List renders LessonList lessons.map(...) _____

The point is not to memorize React syntax. The point is to name the connection between separated locations.

Predict Before Reading

Before opening every file, predict which file owns:

  • the search text,
  • the selected lesson,
  • the display of matching lessons.

Then verify by following the callback props.

Starter files
lesson-map/styles.css
:root {
  --page-bg: #f6f8fb;
  --panel-bg: #ffffff;
  --text: #172033;
  --muted: #526070;
  --border: #c7d2df;
  --accent: #00598c;
  --accent-strong: #00466d;
  --button-text: #ffffff;
  --status-bg: #e5f2ff;
  --focus: #ffbf47;
}

html.dark-mode {
  --page-bg: #101827;
  --panel-bg: #1d2736;
  --text: #f4f7fb;
  --muted: #c8d2de;
  --border: #516174;
  --accent: #7cc7ff;
  --accent-strong: #a7dcff;
  --button-text: #08111d;
  --status-bg: #1f3850;
  --focus: #ffd166;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.lesson-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

.lesson-shell h1 {
  margin-block: 0 18px;
  font-size: 1.8em;
}

.search-label {
  display: grid;
  gap: 6px;
  max-width: 360px;
  font-weight: 700;
}

.search-label input {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel-bg);
  color: var(--text);
  font: inherit;
}

.search-label input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.selection-status {
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--status-bg);
  color: var(--text);
  font-weight: 700;
}

.lesson-list {
  display: grid;
  gap: 12px;
  margin-block-start: 18px;
}

.lesson-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel-bg);
  box-shadow: 0 2px 8px rgb(23 32 51 / 0.08);
}

html.dark-mode .lesson-card {
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
}

.lesson-card h2,
.lesson-card p {
  margin: 0 0 8px;
}

.lesson-card h2 {
  font-size: 1.2em;
}

.lesson-card p {
  color: var(--muted);
}

.lesson-card button {
  min-height: 40px;
  min-width: 92px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--button-text);
  font: inherit;
  cursor: pointer;
}

.lesson-card button:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

.lesson-shell :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
lesson-map/data.js
const LESSONS = [
  { id: 1, title: "Python filters", tag: "python", minutes: 12 },
  { id: 2, title: "React callbacks", tag: "react", minutes: 18 },
  { id: 3, title: "Node route tests", tag: "node", minutes: 16 },
];
lesson-map/LessonSearch.jsx
function LessonSearch({ query, onQueryChange }) {
  return (
    <label className="search-label">
      Search lessons
      <input
        value={query}
        onChange={event => onQueryChange(event.target.value)}
        placeholder="python, react, node..."
      />
    </label>
  );
}
lesson-map/LessonList.jsx
function LessonList({ lessons, selectedId, onSelectLesson }) {
  return (
    <section className="lesson-list" aria-label="Matching lessons">
      {lessons.map(lesson => (
        <article className="lesson-card" key={lesson.id}>
          <h2>{lesson.title}</h2>
          <p>{lesson.minutes} minutes</p>
          <button type="button" onClick={() => onSelectLesson(lesson.id)}>
            {selectedId === lesson.id ? "Selected" : "Select"}
          </button>
        </article>
      ))}
    </section>
  );
}
lesson-map/App.jsx
function App() {
  const [query, setQuery] = React.useState("");
  const [selectedId, setSelectedId] = React.useState(null);
  const normalizedQuery = query.trim().toLowerCase();

  const visibleLessons = LESSONS.filter(lesson =>
    lesson.title.toLowerCase().includes(normalizedQuery) ||
    lesson.tag.includes(normalizedQuery)
  );

  const selectedLesson = LESSONS.find(lesson => lesson.id === selectedId);

  return (
    <main className="lesson-shell">
      <h1>Lesson Finder</h1>
      <LessonSearch query={query} onQueryChange={setQuery} />
      {selectedLesson && (
        <p className="selection-status" role="status">
          Selected: {selectedLesson.title}
        </p>
      )}
      <LessonList
        lessons={visibleLessons}
        selectedId={selectedId}
        onSelectLesson={setSelectedId}
      />
    </main>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
5

Backend Interaction Sprint

Why this matters

This final sprint combines the whole routine: orient from tests, predict the design, find beacons, trace one risky branch, and map files. It is also a concept-location task: you start with a domain idea such as “coupon” or “out of stock” and locate the files that realize it. The code is bigger than before, but the reading job is still bounded. Use the timer to calibrate your search path, not to rush.

🎯 You will learn to

  • Map request data through route, service, data, and discount helpers
  • Verify one error path without tracing the entire backend
  • Evaluate when a helper name is a reliable beacon for responsibility

Reading Goal

You have 15 minutes. Read __tests__/checkoutRoute.test.js first. Then answer:

  • What happens when an item is out of stock?
  • Where is the coupon applied?
  • Which helper computes the subtotal?
  • Which files participate in a successful quote?
  • Which files are central, supporting, or incidental to the concept you are investigating?

Use reading-notes.md to write a narrow interaction map. Core target: stock, subtotal, and coupon flow. Stretch target: diagnose the weak TEA3 coupon beacon and identify the incidental receipt formatter.

Contrast Set

Compare the two route tests before opening production code:

Test clue Same surface shape Different responsibility path
Successful quote applies STUDY10 Calls quoteCheckout() and asserts status/body Route → stock check → subtotal → discount
Out-of-stock items return 409 Calls quoteCheckout() and asserts status/body Route → stock check → early response

Same route-test shape, different implementation responsibility. The contrast tells you which helpers to read and which helpers to skip.

Practice mode: on your first attempt, use the +5 min button if you are still collecting evidence. On a replay, try finishing inside the original 15 minutes. Before the quiz, write one reflection line about what you inspected first, what you skipped, and what evidence changed or confirmed your hypothesis.

Do not edit the code. Use a narrow interaction map.

Starter files
reading-notes.md
# Backend Interaction Sprint Notes

Contract hypothesis:

Top 3 beacons:
1.
2.
3.

What I can ignore for this question:

Smallest trace:

Central / supporting / incidental files:

Contrast set:
- Same test shape:
- Different runtime paths:
- Helper I can skip for the error path:

Final EiPE summary:

Timer reflection:
- First thing I inspected:
- Detail I deliberately skipped:
- Evidence that changed or confirmed my hypothesis:
data/items.js
const items = [
  { sku: "mochi", name: "Mango Mochi", price: 4, stock: 8 },
  { sku: "ramen", name: "Late-Night Ramen", price: 7, stock: 0 },
  { sku: "tea", name: "Jasmine Tea", price: 3, stock: 15 },
];

module.exports = { items };
services/stockService.js
const { items } = require("../data/items");

function findItem(sku) {
  return items.find(item => item.sku === sku);
}

function checkStock(lineItems) {
  const missing = [];
  for (const lineItem of lineItems) {
    const item = findItem(lineItem.sku);
    if (!item || item.stock < lineItem.quantity) {
      missing.push(lineItem.sku);
    }
  }
  return { ok: missing.length === 0, missing };
}

function subtotalFor(lineItems) {
  return lineItems.reduce((total, lineItem) => {
    const item = findItem(lineItem.sku);
    return total + item.price * lineItem.quantity;
  }, 0);
}

module.exports = { checkStock, subtotalFor };
services/discountService.js
function discountFor(coupon, subtotal) {
  if (coupon === "STUDY10" && subtotal >= 10) {
    return Math.round(subtotal * 0.10);
  }
  if (coupon === "TEA3") {
    return 3;
  }
  return 0;
}

module.exports = { discountFor };
services/receiptFormatter.js
function formatReceiptLine(name, quantity, total) {
  return `${quantity}x ${name}: $${total}`;
}

module.exports = { formatReceiptLine };
routes/checkoutRoute.js
const { checkStock, subtotalFor } = require("../services/stockService");
const { discountFor } = require("../services/discountService");

function quoteCheckout(req, res) {
  const lineItems = req.body?.items ?? [];
  const stockReport = checkStock(lineItems);

  if (!stockReport.ok) {
    return res.status(409).json({
      error: "out of stock",
      missing: stockReport.missing,
    });
  }

  const subtotal = subtotalFor(lineItems);
  const discount = discountFor(req.body?.coupon, subtotal);

  return res.json({
    subtotal,
    discount,
    total: subtotal - discount,
  });
}

module.exports = { quoteCheckout };
__tests__/checkoutRoute.test.js
const test = require("node:test");
const assert = require("node:assert/strict");
const { quoteCheckout } = require("../routes/checkoutRoute");

function fakeResponse() {
  return {
    statusCode: 200,
    body: undefined,
    status(code) {
      this.statusCode = code;
      return this;
    },
    json(payload) {
      this.body = payload;
      return this;
    },
  };
}

test("successful quote applies STUDY10 to an eligible subtotal", () => {
  const res = fakeResponse();

  quoteCheckout({
    body: {
      coupon: "STUDY10",
      items: [
        { sku: "mochi", quantity: 2 },
        { sku: "tea", quantity: 1 },
      ],
    },
  }, res);

  assert.equal(res.statusCode, 200);
  assert.deepEqual(res.body, { subtotal: 11, discount: 1, total: 10 });
});

test("out-of-stock items return 409 and skip totals", () => {
  const res = fakeResponse();

  quoteCheckout({
    body: {
      coupon: "STUDY10",
      items: [{ sku: "ramen", quantity: 1 }],
    },
  }, res);

  assert.equal(res.statusCode, 409);
  assert.deepEqual(res.body, { error: "out of stock", missing: ["ramen"] });
});
6

React Concept Location Sprint

Why this matters

Real comprehension tasks often begin with a domain idea, not a file name: “Where is pinning implemented?” or “Where does completion change?” Concept location is the skill of turning that idea into a focused search path across files. This sprint is larger than the Part 1 React examples, but the goal is still bounded. Treat the timer as a way to notice whether your search path stayed focused.

🎯 You will learn to

  • Locate a domain concept across React state, props, and child events
  • Rank files as central, supporting, or incidental evidence
  • Verify one cross-file interaction with a targeted trace

Reading Goal

You have 10 minutes. Your concept is pinning a lesson.

Read in this order:

  1. App.jsx for state ownership and derived values.
  2. LessonCard.jsx for the click event.
  3. Only then inspect display-only helpers if a question needs them.

Write a central/supporting/incidental map in reading-notes.md.

Category What it means
Central Code that owns or changes the concept
Supporting Code that provides data or displays the concept
Incidental Nearby code that does not participate in the concept

Stretch target: find one weak beacon. A CSS class like pinned-card can confirm presentation, but it is not enough to prove where pinning state lives.

Practice mode: on your first attempt, use the +5 min button if you are still collecting evidence. On a replay, try finishing inside the original 10 minutes. Before the quiz, write one reflection line about what you inspected first, what you skipped, and what evidence changed or confirmed your hypothesis.

Starter files
reading-notes.md
# React Concept Location Notes

Concept:

Central files:

Supporting files:

Incidental files:

Strongest beacons:
1.
2.
3.

Smallest trace:

Final EiPE summary:

Timer reflection:
- First thing I inspected:
- Detail I deliberately skipped:
- Evidence that changed or confirmed my hypothesis:
lesson-board/styles.css
:root {
  --page-bg: #f6f8fb;
  --panel-bg: #ffffff;
  --text: #172033;
  --muted: #526070;
  --border: #c7d2df;
  --accent: #00598c;
  --accent-strong: #00466d;
  --button-text: #ffffff;
  --pin-bg: #e5f2ff;
  --status-bg: #edf7ed;
  --focus: #ffbf47;
}

html.dark-mode {
  --page-bg: #101827;
  --panel-bg: #1d2736;
  --text: #f4f7fb;
  --muted: #c8d2de;
  --border: #516174;
  --accent: #7cc7ff;
  --accent-strong: #a7dcff;
  --button-text: #08111d;
  --pin-bg: #1f3850;
  --status-bg: #173a29;
  --focus: #ffd166;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.board-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px;
}

.board-shell h1 {
  margin-block: 0 18px;
  font-size: 1.8em;
}

.filter-label {
  display: grid;
  gap: 6px;
  max-width: 280px;
  font-weight: 700;
}

.filter-label select {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel-bg);
  color: var(--text);
  font: inherit;
}

.progress-summary,
.pinned-status {
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--status-bg);
  color: var(--text);
  font-weight: 700;
}

.lesson-board-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-block-start: 18px;
}

.lesson-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel-bg);
  box-shadow: 0 2px 8px rgb(23 32 51 / 0.08);
}

html.dark-mode .lesson-card {
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
}

.pinned-card {
  border: 2px solid var(--accent);
  background: var(--pin-bg);
}

.lesson-card h2,
.lesson-card p {
  margin: 0 0 8px;
}

.lesson-card h2 {
  font-size: 1.2em;
}

.lesson-card p {
  color: var(--muted);
}

.lesson-card button {
  min-height: 40px;
  min-width: 96px;
  margin-inline-end: 8px;
  margin-block-start: 6px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--button-text);
  font: inherit;
  cursor: pointer;
}

.lesson-card button:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

.board-shell :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
lesson-board/data.js
const LESSONS = [
  { id: 1, title: "Python plan roles", topic: "python", done: true },
  { id: 2, title: "React callback descent", topic: "react", done: false },
  { id: 3, title: "Node tests as beacons", topic: "node", done: false },
  { id: 4, title: "Review risk map", topic: "review", done: true },
];
lesson-board/LessonFilter.jsx
function LessonFilter({ view, onViewChange }) {
  return (
    <label className="filter-label">
      View
      <select value={view} onChange={event => onViewChange(event.target.value)}>
        <option value="all">All</option>
        <option value="open">Open</option>
        <option value="done">Done</option>
      </select>
    </label>
  );
}
lesson-board/LessonCard.jsx
function LessonCard({ lesson, isPinned, onPinLesson, onCompleteLesson }) {
  return (
    <article className={isPinned ? "lesson-card pinned-card" : "lesson-card"}>
      <h2>{lesson.title}</h2>
      <p>Topic: {lesson.topic}</p>
      <p>{lesson.done ? "Done" : "Still open"}</p>
      <button type="button" onClick={() => onPinLesson(lesson.id)}>
        {isPinned ? "Pinned" : "Pin"}
      </button>
      <button type="button" onClick={() => onCompleteLesson(lesson.id)}>
        Mark done
      </button>
    </article>
  );
}
lesson-board/ProgressSummary.jsx
function ProgressSummary({ lessons }) {
  const doneCount = lessons.filter(lesson => lesson.done).length;
  return (
    <p className="progress-summary">
      {doneCount} of {lessons.length} lessons complete.
    </p>
  );
}
lesson-board/App.jsx
function App() {
  const [view, setView] = React.useState("all");
  const [pinnedId, setPinnedId] = React.useState(2);
  const [lessons, setLessons] = React.useState(LESSONS);

  function handleCompleteLesson(id) {
    setLessons(currentLessons => currentLessons.map(lesson =>
      lesson.id === id ? { ...lesson, done: true } : lesson
    ));
  }

  const visibleLessons = lessons.filter(lesson => {
    if (view === "done") {
      return lesson.done;
    }
    if (view === "open") {
      return !lesson.done;
    }
    return true;
  });

  const pinnedLesson = lessons.find(lesson => lesson.id === pinnedId);

  return (
    <main className="board-shell">
      <h1>Lesson Board</h1>
      <LessonFilter view={view} onViewChange={setView} />
      <ProgressSummary lessons={lessons} />
      {pinnedLesson && (
        <p className="pinned-status" role="status">
          Pinned: {pinnedLesson.title}
        </p>
      )}
      <section className="lesson-board-list" aria-label="Visible lessons">
        {visibleLessons.map(lesson => (
          <LessonCard
            key={lesson.id}
            lesson={lesson}
            isPinned={lesson.id === pinnedId}
            onPinLesson={setPinnedId}
            onCompleteLesson={handleCompleteLesson}
          />
        ))}
      </section>
    </main>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
7

Architecture-Code Alignment Review

Why this matters

Advanced comprehension means reading code against an intended architecture, not just finding the line that produces an output. A route, service, data store, and policy helper each have different responsibilities. When those responsibilities stay visible, the code gives future readers trustworthy architectural beacons.

🎯 You will learn to

  • Map a Node.js behavior from route to service to data and policy helpers
  • Separate specification evidence from runtime implementation evidence
  • Evaluate whether files preserve their intended responsibilities

Mini Review Packet

Requirement:

When a student completes a lesson, store the completion, return the completed lesson id, and award a three-day streak badge when the student’s completion days contain a three-day run.

Intended architecture:

Layer Responsibility
Route Read HTTP request fields and choose HTTP status/response shape
Progress service Coordinate completion behavior
Store Save and list completion records
Badge service Decide whether the records earn a badge
Email preview Nearby formatting helper, not part of completion behavior

Read __tests__/progressRoutes.test.js first, then map the requirement to code. Your final answer should name central, supporting, and incidental files.

Starter files
data/progressStore.js
const completions = [];

function listCompletions(userId) {
  return completions
    .filter(record => record.userId === userId)
    .map(record => ({ ...record }));
}

function saveCompletion(record) {
  const alreadySaved = completions.some(existing =>
    existing.userId === record.userId &&
    existing.lessonId === record.lessonId &&
    existing.day === record.day
  );
  if (!alreadySaved) {
    completions.push({ ...record });
  }
  return { ...record };
}

function resetCompletions() {
  completions.length = 0;
}

module.exports = { listCompletions, saveCompletion, resetCompletions };
services/badgeService.js
function streakBadgeFor(records) {
  const days = [...new Set(records.map(record => record.day))].sort((a, b) => a - b);
  let current = 0;
  let previous = null;
  for (const day of days) {
    current = previous === null || day === previous + 1 ? current + 1 : 1;
    if (current >= 3) {
      return "three-day-streak";
    }
    previous = day;
  }
  return null;
}

module.exports = { streakBadgeFor };
services/progressService.js
const { listCompletions, saveCompletion } = require("../data/progressStore");
const { streakBadgeFor } = require("./badgeService");

function completeLesson({ userId, lessonId, day }) {
  saveCompletion({ userId, lessonId, day });
  const records = listCompletions(userId);
  return {
    completed: true,
    lessonId,
    badge: streakBadgeFor(records),
  };
}

module.exports = { completeLesson };
services/emailPreview.js
function previewCompletionEmail(studentName, lessonTitle) {
  return `${studentName} completed ${lessonTitle}.`;
}

module.exports = { previewCompletionEmail };
routes/progressRoutes.js
const { completeLesson } = require("../services/progressService");

function completeLessonRoute(req, res) {
  const { userId, lessonId, day } = req.body;
  if (!userId || !lessonId || !day) {
    return res.status(400).json({ error: "missing completion fields" });
  }

  const summary = completeLesson({ userId, lessonId, day });
  return res.status(201).json(summary);
}

module.exports = { completeLessonRoute };
__tests__/progressRoutes.test.js
const { beforeEach, test } = require("node:test");
const assert = require("node:assert/strict");
const { listCompletions, resetCompletions } = require("../data/progressStore");
const { completeLessonRoute } = require("../routes/progressRoutes");

function fakeResponse() {
  return {
    statusCode: 200,
    body: undefined,
    status(code) {
      this.statusCode = code;
      return this;
    },
    json(payload) {
      this.body = payload;
      return this;
    },
  };
}

beforeEach(() => {
  resetCompletions();
});

test("POST /progress/completions stores a completion and returns 201", () => {
  const res = fakeResponse();

  completeLessonRoute({ body: { userId: "u1", lessonId: "react-flow", day: 1 } }, res);

  assert.equal(res.statusCode, 201);
  assert.deepEqual(res.body, {
    completed: true,
    lessonId: "react-flow",
    badge: null,
  });
  assert.deepEqual(listCompletions("u1"), [
    { userId: "u1", lessonId: "react-flow", day: 1 },
  ]);
});

test("third consecutive completion returns a streak badge", () => {
  completeLessonRoute({ body: { userId: "u2", lessonId: "python-plan", day: 1 } }, fakeResponse());
  completeLessonRoute({ body: { userId: "u2", lessonId: "react-flow", day: 2 } }, fakeResponse());
  const res = fakeResponse();

  completeLessonRoute({ body: { userId: "u2", lessonId: "node-route", day: 3 } }, res);

  assert.equal(res.statusCode, 201);
  assert.equal(res.body.badge, "three-day-streak");
});

test("missing fields return 400 without storing a completion", () => {
  const res = fakeResponse();

  completeLessonRoute({ body: { userId: "u3", day: 4 } }, res);

  assert.equal(res.statusCode, 400);
  assert.deepEqual(res.body, { error: "missing completion fields" });
  assert.deepEqual(listCompletions("u3"), []);
});
8

Dashboard Access Sprint

Why this matters

In production code, the first clue that looks relevant is often only part of the story. It may be a file you would expect to matter: featureFlags.js, betaDashboard, imported config, dashboard route. The advanced skill is to say, “That is a plausible hypothesis,” then verify whether the property is actually on the runtime path.

This sprint is a small incident review. A student named Kai cannot see the Labs tab. A fast reader may jump to the global betaDashboard flag because it is true. Your job is to test that hypothesis against tests, imports, and call flow. The timer should expose whether your first path was selective, not push you into guessing.

🎯 You will learn to

  • Separate a plausible config clue from the property actually read at runtime
  • Use tests as specification beacons without mistaking them for implementation
  • Trace a cross-file hypothesis through route, service, policy, and data files

Reading Goal

You have 13 minutes. Read the tests first, then inspect the smallest path that explains Kai’s missing Labs tab.

Focus on these questions:

  • What behavior do the tests specify for invited users and non-invited users?
  • Which file decides whether the Labs tab is added?
  • Which featureFlags property is read by the route?
  • Where is betaDashboard: true read, if at all, on the tab-building path?

Contrast Set

Compare these similar-looking cues before trusting either one:

Cue Same surface shape Different runtime purpose
featureFlags.welcomeBanner Flag-shaped config value Read by the route to choose banner text
featureFlags.betaDashboard Flag-shaped config value Present in config, but not read on the Labs-tab path
user.betaInvite Boolean access-looking value Read by policy and can affect Labs access

Same surface cue, different purpose. The critical feature is not “looks like a flag”; it is whether the value is read on the runtime path that answers the question.

Practice mode: on your first attempt, use the +5 min button if you are still collecting evidence. On a replay, try finishing inside the original 13 minutes. Before the quiz, write one reflection line about what you inspected first, what you skipped, and what evidence changed or confirmed your hypothesis.

Starter files
reading-notes.md
# Dashboard Access Sprint Notes

First hypothesis:

First clue I noticed:

Test evidence:

Runtime path:

Contrast set:
- Same surface cue:
- Runtime purpose that differs:
- Critical feature that explains the difference:

Evidence that changes or strengthens the hypothesis:

Final EiPE summary:

Timer reflection:
- First thing I inspected:
- Detail I deliberately skipped:
- Evidence that changed or confirmed my hypothesis:
data/users.js
const users = [
  { id: "ava", plan: "free", verified: true, betaInvite: true },
  { id: "kai", plan: "free", verified: true, betaInvite: false },
  { id: "mira", plan: "pro", verified: false, betaInvite: false },
  { id: "noor", plan: "pro", verified: true, betaInvite: false },
];

function findUser(userId) {
  const user = users.find(candidate => candidate.id === userId);
  return user ? { ...user } : null;
}

module.exports = { findUser };
config/featureFlags.js
const featureFlags = Object.freeze({
  betaDashboard: true,
  welcomeBanner: true,
});

module.exports = { featureFlags };
services/accessPolicy.js
function canUseBetaDashboard(user) {
  if (!user || !user.verified) {
    return false;
  }
  return user.betaInvite || user.plan === "pro";
}

module.exports = { canUseBetaDashboard };
services/dashboardService.js
const { findUser } = require("../data/users");
const { canUseBetaDashboard } = require("./accessPolicy");

function dashboardTabsFor(userId) {
  const user = findUser(userId);
  if (!user) {
    return { status: "missing", tabs: [] };
  }

  const tabs = ["overview", "assignments"];
  if (canUseBetaDashboard(user)) {
    tabs.push("labs");
  }

  return { status: "ok", tabs };
}

module.exports = { dashboardTabsFor };
routes/dashboardRoute.js
const { featureFlags } = require("../config/featureFlags");
const { dashboardTabsFor } = require("../services/dashboardService");

function dashboardRoute(req, res) {
  const result = dashboardTabsFor(req.params.userId);
  if (result.status === "missing") {
    return res.status(404).json({ error: "user not found" });
  }

  return res.json({
    tabs: result.tabs,
    banner: featureFlags.welcomeBanner ? "new dashboard preview" : null,
  });
}

module.exports = { dashboardRoute };
__tests__/dashboardRoute.test.js
const test = require("node:test");
const assert = require("node:assert/strict");
const { dashboardRoute } = require("../routes/dashboardRoute");

function fakeResponse() {
  return {
    statusCode: 200,
    body: undefined,
    status(code) {
      this.statusCode = code;
      return this;
    },
    json(payload) {
      this.body = payload;
      return this;
    },
  };
}

test("invited verified student receives the Labs tab", () => {
  const res = fakeResponse();

  dashboardRoute({ params: { userId: "ava" } }, res);

  assert.equal(res.statusCode, 200);
  assert.deepEqual(res.body.tabs, ["overview", "assignments", "labs"]);
});

test("global beta flag does not override a missing invite", () => {
  const res = fakeResponse();

  dashboardRoute({ params: { userId: "kai" } }, res);

  assert.equal(res.statusCode, 200);
  assert.deepEqual(res.body.tabs, ["overview", "assignments"]);
  assert.equal(res.body.banner, "new dashboard preview");
});

test("unknown users receive 404", () => {
  const res = fakeResponse();

  dashboardRoute({ params: { userId: "unknown" } }, res);

  assert.equal(res.statusCode, 404);
  assert.deepEqual(res.body, { error: "user not found" });
});
9

Cross-Domain Reading Boss: Order Inventory Incident

Why this matters

Every earlier step in Part 2 was sized so that a careful linear read could still finish in time. This step is different on purpose. The codebase is around 330 lines across 11 files — a route + four services + two data modules + a decoy route + tests. You cannot read it all carefully during a first-attempt timer and still leave room to answer well.

This is the moment top-down reading was invented for. Production code is rarely the size of a tutorial snippet. Pull requests at real companies routinely exceed what any human can hold in working memory. Reviewers who try to read everything either burn out or rubber-stamp. The routine is what makes the work survivable and the answer correct.

🎯 You will learn to

  • Apply the full routine to a Node.js codebase too large to read line-by-line
  • Use tests + names + imports to locate a missing call across many files
  • Distinguish a function that exists from a function that is on the runtime path
  • Combine every prior skill: routine, beacons, variable roles, tests-as-spec, cross-file flow, false-beacon discipline, EiPE

The Incident

An alert from the warehouse this morning:

Customer Devi placed an order for 10 packs of Late-Night Ramen. The API returned 402 Payment Required and Devi never received an order confirmation. But when the warehouse pulled inventory at noon, ramen stock had dropped from 12 to 2.

Customer-success traced the call: Devi’s request was well-formed, her available credit was below the calculated total, and the route correctly refused payment with 402. So where did the 10 ramen units go?

The intended behavior, per the engineering doc, is:

“Inventory reservation must be released on every failure path. A failed order must leave inventory exactly as it was before the request.”

Your audit job:

  1. Where is inventory reservation invoked during an order, and when?
  2. Why did stock drop by 10 even though no order was created?
  3. Which file owns the missing behavior, and what specifically is missing?

Time Budget Reality Check

Your first attempt gives you 15 minutes so the clock supports learning instead of panic. Treat 10 minutes as a replay challenge after you already know what a good search path feels like.

Strategy Roughly how long it takes
Read every file carefully 25–30 minutes
Skim every file 10–14 minutes
Read tests + the order route + one service, focusing on the failure path 6–9 minutes ← target

The third strategy is the only one that leaves enough time to think, answer, and write evidence. Hypothesis-driven reading is not a shortcut; it is the only honest path through this much code.

Constraints

  • Read at most 3 files carefully.
  • Verify any beacon you decide to trust by checking imports or call sites.
  • Write your EiPE summary in reading-notes.md before the timer runs out.
  • End by writing a timer reflection: what you inspected first, what you deliberately skipped, and what evidence changed or confirmed your hypothesis.

The routine is yours to choose. Let’s see how far you can make it.

Starter files
reading-notes.md
# Order Inventory Audit Notes

## Routine
Orient → Predict → Beacon-hunt → Descend selectively → Verify → Summarize

## First hypothesis: which file should own reservation? Which file should call it?

## Files I read carefully (3 or fewer expected)
1.
2.
3.

## Files I deliberately skipped (and why)

## Imports check — which files actually `require("../services/inventoryService")`?

## Final EiPE summary
- Purpose:
- Mechanism:
- Evidence:
- Limit (what I did *not* verify):

## Timer reflection
- First thing I inspected:
- File or detail I deliberately skipped:
- Evidence that changed or confirmed my hypothesis:
data/items.js
const items = [
  { sku: "mochi", name: "Mango Mochi", price: 4, stock: 1 },
  { sku: "ramen", name: "Late-Night Ramen", price: 7, stock: 12 },
  { sku: "tea", name: "Jasmine Tea", price: 3, stock: 30 },
  { sku: "pretzel", name: "Choco Pretzels", price: 5, stock: 8 },
];

module.exports = { items };
data/customers.js
const customers = [
  { id: "riley", name: "Riley Park", tier: "standard", credit: 100 },
  { id: "sam", name: "Sam Okafor", tier: "member", credit: 200 },
  { id: "devi", name: "Devi Rao", tier: "member", credit: 50 },
];

module.exports = { customers };
data/orders.js
const orders = [];

module.exports = { orders };
services/cartService.js
const { items } = require("../data/items");
const { reserve, release } = require("./inventoryService");

const carts = new Map();

function getCart(customerId) {
  if (!carts.has(customerId)) {
    carts.set(customerId, []);
  }
  return carts.get(customerId);
}

function addToCart(customerId, sku, quantity) {
  const item = items.find(entry => entry.sku === sku);
  if (!item) {
    return { ok: false, reason: "unknown sku" };
  }
  const reservation = reserve(sku, quantity);
  if (!reservation.ok) {
    return reservation;
  }
  const cart = getCart(customerId);
  cart.push({ sku, quantity });
  return { ok: true, cart };
}

function clearCart(customerId) {
  const cart = getCart(customerId);
  for (const line of cart) {
    release(line.sku, line.quantity);
  }
  carts.set(customerId, []);
}

module.exports = { getCart, addToCart, clearCart };
services/pricingService.js
const { items } = require("../data/items");

const MEMBER_DISCOUNT_RATE = 0.10;

function lineSubtotal(line) {
  const item = items.find(entry => entry.sku === line.sku);
  if (!item) {
    return 0;
  }
  return item.price * line.quantity;
}

function subtotalFor(lineItems) {
  return lineItems.reduce((sum, line) => sum + lineSubtotal(line), 0);
}

function memberDiscount(subtotal) {
  return Math.round(subtotal * MEMBER_DISCOUNT_RATE);
}

function totalFor(customer, lineItems) {
  const subtotal = subtotalFor(lineItems);
  const discount = customer.tier === "member" ? memberDiscount(subtotal) : 0;
  return { subtotal, discount, total: subtotal - discount };
}

module.exports = { subtotalFor, memberDiscount, totalFor };
services/inventoryService.js
const { items } = require("../data/items");


function availableFor(sku) {
  const item = items.find(entry => entry.sku === sku);
  return item ? item.stock : 0;
}


function reserve(sku, quantity) {
  const item = items.find(entry => entry.sku === sku);
  if (!item) {
    return { ok: false, reason: "unknown sku" };
  }
  if (item.stock < quantity) {
    return { ok: false, reason: "insufficient stock", available: item.stock };
  }
  item.stock -= quantity;
  return { ok: true, reserved: quantity, remaining: item.stock };
}


function release(sku, quantity) {
  const item = items.find(entry => entry.sku === sku);
  if (item) {
    item.stock += quantity;
  }
}


module.exports = { availableFor, reserve, release };
services/paymentService.js
const { customers } = require("../data/customers");


function chargeCustomer(customerId, amount) {
  const customer = customers.find(entry => entry.id === customerId);
  if (!customer) {
    return { ok: false, reason: "unknown customer" };
  }
  if (customer.credit < amount) {
    return { ok: false, reason: "insufficient credit" };
  }
  customer.credit -= amount;
  return { ok: true, charged: amount, remainingCredit: customer.credit };
}


module.exports = { chargeCustomer };
services/notificationService.js
const sentEmails = [];


function sendOrderConfirmation(customerId, order) {
  const body = `Order ${order.id} confirmed for ${customerId}.`;
  sentEmails.push({ to: customerId, body });
  return { sent: true };
}


function sentEmailsFor(customerId) {
  return sentEmails.filter(email => email.to === customerId);
}


module.exports = { sendOrderConfirmation, sentEmailsFor };
routes/cartRoute.js
const { addToCart, clearCart } = require("../services/cartService");


function addItemRoute(req, res) {
  const { customerId, sku, quantity } = req.body || {};
  const result = addToCart(customerId, sku, quantity);
  if (!result.ok) {
    return res.status(409).json({ error: result.reason });
  }
  return res.status(201).json({ cart: result.cart });
}


function clearCartRoute(req, res) {
  clearCart(req.params.customerId);
  return res.status(204).json(null);
}


module.exports = { addItemRoute, clearCartRoute };
routes/orderRoute.js
const { customers } = require("../data/customers");
const { orders } = require("../data/orders");
const { totalFor } = require("../services/pricingService");
const { chargeCustomer } = require("../services/paymentService");
const { reserve, release } = require("../services/inventoryService");
const { sendOrderConfirmation } = require("../services/notificationService");


function nextOrderId() {
  return `o${orders.length + 1}`;
}


function reserveAllLines(lineItems) {
  const reservations = [];
  for (const line of lineItems) {
    const result = reserve(line.sku, line.quantity);
    if (!result.ok) {
      for (const prior of reservations) {
        release(prior.sku, prior.quantity);
      }
      return { ok: false, reason: result.reason, sku: line.sku };
    }
    reservations.push({ sku: line.sku, quantity: line.quantity });
  }
  return { ok: true, reservations };
}


function createOrderRoute(req, res) {
  const { customerId, lineItems } = req.body || {};
  const customer = customers.find(entry => entry.id === customerId);
  if (!customer) {
    return res.status(404).json({ error: "unknown customer" });
  }

  const reservation = reserveAllLines(lineItems);
  if (!reservation.ok) {
    return res.status(409).json({ error: reservation.reason, sku: reservation.sku });
  }

  const pricing = totalFor(customer, lineItems);
  const payment = chargeCustomer(customerId, pricing.total);
  if (!payment.ok) {
    return res.status(402).json({ error: payment.reason });
  }

  const order = {
    id: nextOrderId(),
    customerId,
    lineItems,
    subtotal: pricing.subtotal,
    discount: pricing.discount,
    total: pricing.total,
    status: "confirmed",
  };
  orders.push(order);
  sendOrderConfirmation(customerId, order);

  return res.status(201).json(order);
}


module.exports = { createOrderRoute };
__tests__/orderRoute.test.js
const test = require("node:test");
const assert = require("node:assert/strict");
const { createOrderRoute } = require("../routes/orderRoute");
const { items } = require("../data/items");


function fakeResponse() {
  return {
    statusCode: 200,
    body: undefined,
    status(code) { this.statusCode = code; return this; },
    json(payload) { this.body = payload; return this; },
  };
}


test("known customer with valid items receives 201 and an order id", () => {
  const res = fakeResponse();
  createOrderRoute(
    { body: { customerId: "riley", lineItems: [{ sku: "tea", quantity: 1 }] } },
    res,
  );
  assert.equal(res.statusCode, 201);
  assert.ok(res.body.id.startsWith("o"));
  assert.equal(res.body.status, "confirmed");
});


test("unknown customer returns 404", () => {
  const res = fakeResponse();
  createOrderRoute(
    { body: { customerId: "ghost", lineItems: [{ sku: "tea", quantity: 1 }] } },
    res,
  );
  assert.equal(res.statusCode, 404);
});


test("insufficient credit returns 402", () => {
  const res = fakeResponse();
  createOrderRoute(
    { body: { customerId: "devi", lineItems: [{ sku: "ramen", quantity: 10 }] } },
    res,
  );
  assert.equal(res.statusCode, 402);
});