Intermediate / Advanced

Advanced Debug Training

A full SvelteKit exercise — bugs hide across the client component, the server-side load function, and a POST endpoint.

Heads up: a 500 is part of the exercise

If you click straight through to the broken page, the server will respond with a 500 Internal Server Error (this also happens on the deployed Vercel build). That's not a deployment problem — it's the very first bug you have to find and fix. Once you fix it, the page will start rendering and the next layer of bugs becomes visible.

What's different from Basic?

  • Bugs span multiple files: a Svelte 5 component, a SvelteKit server load, and a JSON POST endpoint.
  • Some bugs are only visible after fixing earlier ones — they're layered.
  • You'll need to read server logs and use the browser inspector.
  • Requires a real Node toolchain — you can't just open an HTML file.

Step 1 — Get the project

Clone the full repository from github.com/Bliblofy/YouthTrivia:

git clone https://github.com/Bliblofy/YouthTrivia.git
cd YouthTrivia
npm install

Step 2 — Run the dev server

npm run dev

Then open http://localhost:5173/debug-training. You'll see the 500 immediately. Don't panic — switch back to your terminal and read the stack trace.

Step 3 — Where to look

The bugs are spread across these three files:

  • src/routes/debug-training/+page.server.ts — the server-side load that powers the 500.
  • src/routes/debug-training/+page.svelte — the Svelte 5 component (uses runes, callback props, snippets).
  • src/routes/debug-training/check/+server.ts — the POST endpoint that grades each answer.

Use Cursor's Debug mode and walk through them in order: terminal stack trace → server file → component → endpoint. Reload after each fix.

How a working page should behave

  • Loads a 5-question multiple-choice quiz from the server.
  • Shows the current slang term and four possible meanings.
  • Lets the user pick a meaning and submit it.
  • Reveals whether the answer was correct and shows the right meaning.
  • Tracks a running score that goes up on correct answers.
  • Shows a final summary screen after the last question.
Start the exercise → View repository on GitHub Too much? Try Basic first