How to Add a Leaderboard to Your Vibe Coded Game

What You'll Build

A persistent leaderboard system with:
• Supabase project with a scores table
• Save high scores from any game to a real database
• Display top 10 players with names and scores
• Player name entry for personalized scores
• Real-time leaderboard updates without refreshing
• Reusable setup that works with any vibe coded game

Tool: Lovable + Supabase (no coding needed) Difficulty: Intermediate Time: ~25 minutes Coding required: None

Local high scores disappear when someone clears their browser. If you want your vibe coded game to have a real leaderboard — one where players see each other's scores and compete globally — you need a database. This guide shows you how to connect any game built with Lovable to Supabase, a free hosted database, so scores persist forever and update in real time.

This is the perfect next step after building any game from our guides. You don't need to understand databases, SQL, or backend development. You'll copy a few lines of SQL into Supabase to create your table, then use prompts in Lovable to wire it all up. The entire process takes about 25 minutes and works with any game — shooters, puzzles, word games, anything with a score.

What You Need

☐A free account on Supabase

☐A free account on Lovable

☐An existing game project in Lovable (or start one from our game guides)

☐25 minutes of free time

☐No coding experience needed

Step 1: Create a Supabase Project

Go to supabase.com and sign up or log in. Click New Project and fill in the details: give it a name like "my-game-scores", choose a database password (save this somewhere — you won't need it often but don't lose it), and select the region closest to you. Click Create new project and wait about 2 minutes for it to spin up.

Step 2: Create the Scores Table

Once your project is ready, click SQL Editor in the left sidebar. This is where you'll create the table that stores high scores. Paste this SQL and click Run:

create table public.scores (
  id bigint generated always as identity primary key,
  player_name text not null default 'Anonymous',
  score integer not null,
  game text not null default 'default',
  created_at timestamp with time zone default now()
);

alter table public.scores enable row level security;

create policy "Anyone can read scores"
  on public.scores
  for select
  using (true);

create policy "Anyone can insert scores"
  on public.scores
  for insert
  with check (true);

create index idx_scores_game_score on public.scores (game, score desc);

This creates a scores table with columns for the player name, their score, which game it's from (so you can use one table for multiple games), and the timestamp. The security policies let anyone read and insert scores but not modify or delete them.

Step 3: Get Your Supabase Credentials

Click Settings in the left sidebar, then API. You need two values:

Project URL — looks like https://abcdefghijk.supabase.co

anon public key — a long string starting with eyJ...

Copy both of these. You'll paste them into Lovable in the next step. These are safe to use in frontend code — the row-level security policies you set up in Step 2 control what people can actually do with the database.

Step 4: Connect Lovable to Supabase

Open your game project in Lovable. In the chat, paste this prompt — replace the placeholder values with your actual Supabase URL and anon key:

Connect this project to Supabase for a leaderboard. Install the @supabase/supabase-js package and create a Supabase client using these credentials:

Supabase URL: YOUR_SUPABASE_URL_HERE
Supabase Anon Key: YOUR_ANON_KEY_HERE

Create a supabase client utility that exports the initialized client so it can be imported anywhere in the project. Do not hardcode credentials directly in components — put them in the client utility file.

Lovable will install the Supabase library and create a client file. You'll use this connection in the next steps.

Step 5: Save Scores to the Database

Now tell Lovable to save the player's score when a game ends. This prompt works for any game — just describe when the score should be saved.

When the game ends (game over screen), save the player's score to Supabase. Use the Supabase client to insert a row into the "scores" table with these fields:
- player_name: for now use "Anonymous" (we'll add a name input next)
- score: the player's final score from the game
- game: "my-game" (a string identifier for this game)

Only save the score if it's greater than 0. Show a brief "Score saved!" toast message after successfully saving. Handle errors gracefully — if the save fails, show "Could not save score" but don't break the game.

Step 6: Add Player Name Input

Let players enter their name so the leaderboard shows who got each score. Add a name input before the score is saved.

Add a player name input. Before or during the game over screen, show a text input where the player can type their name (max 20 characters). Pre-fill it with the name from localStorage if they've played before. When they click "Submit Score", save their score along with their name to the Supabase scores table. Save the name to localStorage so it's pre-filled next time. If they leave the name empty, default to "Anonymous". Style the input to match the game's design.

Step 7: Display the Top 10 Leaderboard

The leaderboard is the payoff. Show the top 10 scores from the database so players can see where they rank.

Add a leaderboard section to the game. Fetch the top 10 scores from the Supabase "scores" table, filtered by game = "my-game", ordered by score descending, limited to 10 results.

Display the leaderboard as a styled table or list showing:
- Rank (1-10, with gold/silver/bronze colors for top 3)
- Player Name
- Score
- Date (formatted as "Mar 5, 2026")

Add a "Leaderboard" button on the game over screen that shows/hides the leaderboard. Also add a button to view the leaderboard from the main game screen. Show a loading spinner while fetching scores. If the player's current score made the top 10, highlight their row.

Step 8: Add Real-Time Updates

Make the leaderboard update automatically when other players submit scores, without needing to refresh the page.

Make the leaderboard update in real-time using Supabase Realtime. Subscribe to INSERT events on the "scores" table filtered by game = "my-game". When a new score is inserted by any player, automatically re-fetch the top 10 and update the leaderboard display. Show a brief subtle flash animation on the leaderboard when it updates. Unsubscribe from the channel when the leaderboard component unmounts.

Step 9: Deploy and Test

Click the Publish button in Lovable to deploy your game with the leaderboard. Open the game in two different browser tabs to test: play a game in one tab, submit a score, and watch it appear on the leaderboard in the other tab. Share the link with a friend and confirm their scores show up on your leaderboard too.

Level Up Your Leaderboard

Try these follow-up prompts to extend your leaderboard:

Add weekly and all-time views:

Add tab buttons above the leaderboard: "Today", "This Week", and "All Time". Filter the scores query by created_at: Today shows scores from the current day, This Week shows scores from the last 7 days, and All Time shows all scores. Default to "All Time". Re-fetch when the tab changes.

Add multiple game support:

If this project contains multiple games (or you want to reuse the leaderboard), add a game selector dropdown above the leaderboard. Query distinct game values from the scores table and show them as options. When a game is selected, fetch and display that game's top 10 scores.

Add score validation:

Add basic anti-cheat: before inserting a score, check that the same player_name hasn't submitted more than 5 scores in the last hour. If they have, show "Too many submissions. Try again later." and don't insert. This prevents spam without needing authentication.

Add a personal best tracker:

After saving a score, check if it's the player's personal best (query the scores table for the highest score with their player_name in this game). If it's a new personal best, show a "New Personal Best!" message with a celebration animation. Show the player's personal best on the game HUD.

Add rank badge:

After the player submits their score, query the total number of scores higher than theirs to calculate their global rank. Show "You ranked #X out of Y players!" on the game over screen. If they're in the top 3, show a gold, silver, or bronze trophy emoji next to their rank.

Common Errors

Blank screen after prompt If Lovable generates a blank screen, add to your prompt: "Make sure the game renders immediately on page load with no user setup required."

Supabase connection failing Make sure your Supabase URL and anon key are correct — copy them again from Settings > API in the Supabase dashboard. Check that your project is active (free tier projects pause after inactivity — go to the dashboard and click "Restore" if needed).

Scores not appearing on the leaderboard Check the Supabase Table Editor to see if rows are being inserted. If the table is empty, the insert might be failing silently. Add to your prompt: "Log any Supabase errors to the browser console so I can debug them."

Related Guides

Build a Shooter Game with Lovable — create a space shooter and add this leaderboard to it

Build a Wordle Clone with Lovable — build a word game then track daily scores with a leaderboard