Lessons 11-15 | Full-Stack Module

Milestone: Online Leaderboard Works

Connect frontend, API, and database, then verify that leaderboard data survives beyond a page refresh.

Lesson 1545 mincourse modulepaid enrollment

Learning objective

Connect the full stack and test persistence end to end.

Lab outcome

Ship a working leaderboard milestone.

Module milestone

Build a small full-stack leaderboard with persistent data.

Phase 1

Mission briefing

Before You Study (5 mins)

Lesson focus: Today we close the loop. The Frontend talks to the Backend, the Backend talks to the Database. This is how every major tech company works.

What you should have ready:

  • Frontend (Snake Game)
  • Backend (Express API)
  • Database (SQLite)

The Full Picture

[Snake Game] --> [API] --> [Database]
     ^            |           |
     |            v           v
  (Player)    (Server)    (Storage)

Think About

Before studying, consider:

  1. When you get a "Game Over", what should happen? (Send score to API).
  2. When the game loads, what should happen? (Fetch top scores from API).

By the End

After this lesson, you'll:

  • ✅ Connect all 3 pieces
  • ✅ Have a working, persistent leaderboard
  • ✅ Have a clear full-stack project you can explain

Let's connect the dots! 🔗