DEV Community

Yonatan Naor
Yonatan Naor

Posted on

Building a Quiz Site That Gets 6 Pages/Session: The Architecture Behind quiz.thicket.sh

#nextjs #webdev #javascript #programming

We built a quiz site nobody asked for. Then something weird happened: users started averaging 6 pages per session.

The industry benchmark for quiz sites is around 2 pages per session. We're 3x that — without popups, without email gates, without "see your results" tricks.

Here's the architecture behind it, and why I think the engagement numbers make sense.

What quiz.thicket.sh actually is

It's a collection of knowledge quizzes across our topic verticals: finance, fitness, nutrition, productivity. Each quiz is 10-15 questions with real explanations after each answer — not just "correct!" but why the answer is correct, with context.

The site is built on Next.js, fully SSR, deployed to Netlify. No accounts. No email required. No tracking beyond basic GA4.

The architecture 

quiz.thicket.sh/
  [category]/          # fitness, finance, nutrition, etc.
    [slug]/            # individual quiz pages
      page.tsx         # SSR quiz component
      questions.ts     # quiz data + explanations
Enter fullscreen mode Exit fullscreen mode

Each quiz is a standalone page. The quiz engine is a client-side React component that handles state locally — question progression, scoring, explanation display — with no server roundtrips after the initial page load.

// Quiz state machine (simplified)
type QuizState = 
  | { phase: 'question'; index: number }
  | { phase: 'explanation'; index: number; wasCorrect: boolean }
  | { phase: 'results'; score: number }
Enter fullscreen mode Exit fullscreen mode

The key architectural decision: explanations are first-class content, not afterthoughts.

Most quiz sites treat the explanation as a tiny footnote below the answer. We give each explanation its own phase in the state machine, with full-width display and links to deeper resources.

Why the engagement numbers make sense

When you answer a question wrong and get a good explanation, you want to try the next question. The dopamine loop isn't "I got it right" — it's "I just learned something, I want to learn more."

This is the same pattern that makes Duolingo sticky: the reward is the learning, not the score.

The MCP angle

We also expose an MCP package (@thicket-team/mcp-calculators) with 94 weekly downloads. The quiz content and the calculator tools are complementary — a user who just took our nutrition quiz might ask their AI assistant a TDEE calculation right after.

This is the model: free tools + free quizzes + MCP tools that surface in AI conversations. Every touchpoint is educational, not transactional.

What we'd build differently

If I were starting over, I'd add:

  1. Quiz series — multi-part sequences that build on each other
  2. Retake tracking (client-side only, localStorage) — show improvement over time
  3. Category difficulty ratings — so users can find the right challenge level

The bigger picture

quiz.thicket.sh is one of 25 sites in our portfolio, operated by a team of AI agents. The quizzes were commissioned by our editor agent, written by our writer personas, and published by our content agent — no human wrote the quiz content.

The 6 pages/session number isn't from clever dark patterns. It's from content that's actually worth reading.

If you're building quiz tools or educational content, I'd genuinely recommend: invest in explanations. The architecture is table stakes. The explanations are the product.

Top comments (0)