Building 24 Classroom Tools That Load Fast on a School Chromebook (No Login, No Student Data)

Teachers have a very specific set of constraints that most web apps ignore: locked-down district Chromebooks, no permission to install anything, strict student privacy rules, and about five minutes between the bell and needing a tool on the projector.

Badge Your Classroom is a set of 24 free, browser-based teacher tools — wheel of names, timers, bingo cards, word searches, crosswords, a Jeopardy-style review board, a noise meter and more — built around those constraints. Here's what building for classrooms taught me.

Constraint 1: The device is a low-end Chromebook

Many school laptops are budget Chromebooks with limited RAM, on a shared school network. The goal is for every tool to load in under three seconds on one of those. In practice that means:

• One tool per page, no giant SPA bundle.
• No heavy UI framework for things like a timer or dice roller — plain DOM and a little JS.
• Canvas only where it earns its keep (spinner wheel, maze generator, word cloud export).

A countdown timer really doesn't need more than this:

function startCountdown(seconds, el, onDone) {
  const end = performance.now() + seconds * 1000;
  function tick(now) {
    const left = Math.max(0, Math.ceil((end - now) / 1000));
    el.textContent = `${Math.floor(left / 60)}:${String(left % 60).padStart(2, "0")}`;
    if (left > 0) requestAnimationFrame(tick);
    else onDone();
  }
  requestAnimationFrame(tick);
}

Computing remaining time from a fixed end timestamp (instead of decrementing a counter every second) keeps it accurate even when the tab is throttled.

Constraint 2: Zero accounts, zero student data

Every login or roster upload can trigger a district privacy review. So the rule is: no accounts and no student data leaves the browser. A class list pasted into the name picker stays in memory on that page.

That also simplifies the "fair picking" problem. A wheel of names that can repeat students feels unfair to a class, so the picker supports "remove winner" and keeps a history:

function createPicker(names) {
  let pool = [...names];
  const history = [];
  return {
    pick({ removeWinner = true } = {}) {
      if (pool.length === 0) pool = [...names]; // start a new round
      const i = crypto.getRandomValues(new Uint32Array(1))[0] % pool.length;
      const winner = pool[i];
      if (removeWinner) pool.splice(i, 1);
      history.push(winner);
      return winner;
    },
    history: () => [...history],
  };
}

Constraint 3: It has to project well

Teachers put these on a projector for 28 students. Full-screen modes, huge type, high contrast and no tiny controls matter more than clever features. The review game board, for example, is designed around full-screen projection and team scoring rather than student devices.

Constraint 4: Paper still wins

A lot of classroom work is printed. Generators for word searches, crosswords, mazes, bingo cards, word scrambles and cursive tracing all produce print-ready output with separate teacher answer keys. The trick is a dedicated print stylesheet:

@media print {
  nav, footer, .controls { display: none; }
  .puzzle { break-inside: avoid; }
  .answer-key { break-before: page; }
}

Constraint 5: AI features should work without AI

Two tools (a homework helper and a report card comment generator) use an LLM, but they also run in a mock/sample mode when no API key is configured. That makes development, demos and testing easy — and means the page never breaks just because a key is missing.

Takeaways for building edtech

• Design for the weakest device in the room, not your dev machine.
• No login + no student data is a feature teachers actively look for.
• Projector and print modes are first-class, not extras.
• Make AI features degrade gracefully.

All 24 tools are free at badgeyourclassroom.com. If you've built for schools, I'd like to hear what constraints surprised you.