What You'll Build
- A multiplayer trivia game with:
- Room codes so friends can join the same game
- Real-time scoring that updates live for all players
- Multiple trivia categories to choose from
- Round-based gameplay with a host who controls the flow
- Final leaderboard showing rankings after all rounds
- Works on any device with a browser
Tool: Lovable (no coding needed) Difficulty: Intermediate Time: ~30 minutes Coding required: None
Single-player trivia is fun, but trivia with friends is a party. In this guide, you'll build a multiplayer trivia game where one person creates a room, shares a code, and everyone answers questions in real time. Scores update live, you can pick categories, and a final leaderboard crowns the winner. It uses Supabase Realtime under the hood to sync everything.
This is an intermediate vibe coding project because it involves real-time data sync between multiple users. Don't worry — Lovable handles the Supabase integration for you. You'll learn how to prompt for multiplayer features, which is a skill that opens up tons of project ideas.
What You Need
The Founding Prompt
Go to lovable.dev and start a new project. Paste this prompt:
Build a multiplayer trivia game with real-time scoring using Supabase Realtime. Here are the requirements: LOBBY SYSTEM: - Home screen with two options: "Create Game" and "Join Game" - Create Game: generates a random 6-character room code (letters only, uppercase), and the creator becomes the host - Join Game: input field for entering a room code, plus a nickname field - Host also sets a nickname when creating the game - Waiting room shows all connected players with their nicknames in real time - Host sees a "Start Game" button, other players see "Waiting for host..." - Show the room code prominently in the waiting room so the host can share it GAMEPLAY: - 10 rounds per game, each round is one trivia question - Each question has 4 answer choices, only 1 correct - All players see the same question at the same time - Players have 15 seconds to answer each question - After everyone answers (or time runs out), reveal the correct answer and show who got it right - Points: 10 for correct answer, bonus 1-5 points based on speed (faster = more bonus) - Show a live scoreboard between rounds ranking all players by total score - Host clicks "Next Question" to advance between rounds TRIVIA CONTENT: - Include at least 40 trivia questions across 4 categories: Science, History, Entertainment, Geography - Before starting, the host selects which categories to include (can pick multiple) - Questions are randomly selected from the chosen categories, no repeats within a game REAL-TIME FEATURES: - Use Supabase Realtime to sync game state across all players - All players see answers being submitted in real time (show a counter: "3 of 5 players answered") - Live scoreboard updates after each round for all players simultaneously - If a player disconnects, show them as "Disconnected" in the player list UI DESIGN: - Bold, game-show style design with a dark background and vibrant accent colors - Large answer buttons with distinct colors (red, blue, green, yellow) similar to Kahoot - Animated timer countdown bar at the top of the question screen - Player avatars are colored circles with the first letter of their nickname - Celebration animation for the player who answers fastest each round - Fully responsive: works on phones so players can join from any device SUPABASE SETUP: - Create the necessary Supabase tables: rooms, players, questions, answers - Use Row Level Security appropriate for a multiplayer game - Use Supabase Realtime subscriptions for live game state updates
Click Generate and wait for Lovable to build your game.
Step 1: Test the Full Multiplayer Flow
Open the preview in two browser tabs (or one on your phone). In the first tab, create a game and note the room code. In the second tab, join using that code. Walk through the full flow: waiting room, starting the game, answering questions in both tabs, and checking that scores update in real time on both screens. Verify the final leaderboard shows correct rankings.
Step 2: Add a Round Results Screen
Jumping straight to the scoreboard after each answer is abrupt. Let's add a proper results reveal between rounds.
After each round, show a results screen for 5 seconds before the scoreboard. The results screen should display: the correct answer highlighted in green, each player's answer (correct in green, wrong in red) listed below, who answered fastest (with a "Fastest!" badge), and points earned this round per player. The host sees a "Show Scoreboard" button to advance. Add a transition animation between the results screen and the scoreboard.
Step 3: Add Player Reactions
Let players react during the game to make it more social and fun.
Add an emoji reaction system during gameplay. After each answer is revealed, players can tap one of 4 emoji reaction buttons (😂 🎉 😱 😤) that appear for 3 seconds. When a player reacts, their emoji floats up from their avatar on all players' screens in real time. Limit reactions to 2 per player per round to prevent spam. Show reactions using Supabase Realtime so all players see them immediately.
Step 4: Add a Category Vote
Instead of the host picking categories, let everyone vote for what they want to play.
After all players join the waiting room, add a voting phase before the game starts. Show all 4 categories. Each player votes for their preferred category (one vote each). After everyone votes (or 15 seconds pass), the category with the most votes is selected. If there's a tie, randomly pick from the tied categories. Show voting results with a bar chart before starting the game. The host still clicks "Start Game" after the vote.
Step 5: Add Sound Effects
A trivia game show needs sound to build excitement and tension.
Add sound effects using the Web Audio API (no external files). Play a countdown tick in the last 5 seconds of each question, a triumphant horn when a player answers correctly and fastest, a buzzer when time runs out, a drum roll when revealing the scoreboard, and a victory fanfare for the winner on the final leaderboard. Add a mute button in the top right corner. Sounds should be muted by default. Each player controls their own mute setting independently.
Step 6: Add a Rematch Feature
Games are more fun when you can immediately play again without re-creating the room.
On the final leaderboard screen, add a "Rematch" button visible to the host. When the host clicks Rematch, all connected players are brought back to the waiting room with their same nicknames. The room code stays the same. Scores are reset to 0. A new set of random questions is selected (no repeats from the previous game). Show a "Rematch starting..." countdown on all players' screens. Also add a "Leave Game" button for players who want to exit.
Step 7: Deploy and Share
Your multiplayer trivia game is ready. Click the Publish button in Lovable to deploy to a live URL. Share the URL with friends — they just need to open it on any device, enter the room code, and they're in. Make sure your Supabase project is on the free tier (it supports up to 500 concurrent connections, which is more than enough).
Level Up Your Game
Try these follow-up prompts to make your game even better:
Add difficulty levels:
Add a difficulty setting the host can choose before starting: Easy (20 seconds per question, straightforward questions), Medium (15 seconds, moderate difficulty), Hard (10 seconds, obscure questions). Show the selected difficulty in the waiting room. Tag each question in the database with a difficulty level and filter accordingly.
Add a timer:
Add a "Lightning Round" as the final round (round 10). In the Lightning Round, questions have only 7 seconds each, answers are worth double points, and questions auto-advance without waiting for the host. Show a special "LIGHTNING ROUND" banner with an electric animation before it starts.
Add animations:
Add these animations: player avatars bounce when they submit an answer, the scoreboard entries slide into place sorted by rank with position-change animations, the winner's name on the final leaderboard has a golden glow effect with animated confetti, and answer buttons have a satisfying press animation when clicked. Add screen-shake for wrong answers on the results screen.
Add high score saving:
Track game results in a Supabase "game_history" table. After each game, save all player scores. Add a "Hall of Fame" section on the home screen showing the top 10 all-time highest single-game scores with player nickname, score, date, and number of players in that game. Highlight any current player who appears on the leaderboard.
Add custom questions:
Add a "Custom Questions" option. Before starting a game, the host can toggle "Use custom questions." If enabled, show a form where the host types questions and 4 answers (marking the correct one) directly in the waiting room. Require at least 5 custom questions. Other players see "Host is adding questions..." with a count. Save custom question sets to Supabase so the host can reuse them later.
Want persistent high scores? Follow our leaderboard guide to connect your game to a database.
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."
Game not responding to keyboard Add to your prompt: "Ensure keyboard event listeners are attached to the document, not a specific element. Auto-focus the game container on load."
Mobile touch controls not working Add to your prompt: "Add touch event handlers for mobile. Include visible on-screen buttons for all controls on screens under 768px wide."