What You'll Build
- A multiplayer game system with:
- Real-time player synchronization using Supabase Realtime channels
- A room code system for creating and joining game sessions
- Live game state broadcasting between all connected players
- Automatic disconnect detection and reconnection handling
- Support for both turn-based and real-time sync patterns
Tool: Lovable + Supabase (no coding needed) Difficulty: Intermediate Time: ~30 minutes Coding required: None
Adding multiplayer turns any single-player game into a social experience. Instead of playing against the computer, you and a friend can compete or cooperate in real time — each seeing the other's moves the instant they happen. This guide walks you through adding a complete multiplayer system to any game you've already built with Lovable.
This is a perfect intermediate vibe coding project because Supabase Realtime handles all the hard networking stuff for you. There's no WebSocket server to manage, no infrastructure to deploy. You just describe what you want in plain English, and Lovable connects everything together. If you've built any game from our other guides, you can add multiplayer to it in about 30 minutes.
What You Need
The Founding Prompt
Go to lovable.dev and open an existing game project, or start a new one. Paste this prompt:
Add real-time multiplayer to this game using Supabase Realtime. Here's what I need: 1. ROOM SYSTEM: Add a lobby screen before the game starts. Players can either "Create Room" (generates a random 6-character room code) or "Join Room" (enter a code). Show the room code prominently so the host can share it. 2. SUPABASE SETUP: Connect to Supabase using these credentials (I'll fill them in later — use environment variables VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY). Use Supabase Realtime channels for all communication. 3. PLAYER TRACKING: Each player gets a random display name on first visit (stored in localStorage). Show both player names in a header bar during the game. Limit rooms to 2 players. 4. STATE SYNC: When either player makes a move, broadcast the entire game state to the other player through the Realtime channel. Both screens should update instantly. 5. TURN MANAGEMENT: Add a turn indicator showing whose turn it is. Only allow the active player to make moves. Switch turns after each valid move. 6. DISCONNECT HANDLING: If a player disconnects, show a "Waiting for opponent to reconnect..." overlay. If they don't reconnect within 30 seconds, end the game and show a message. Use Supabase Presence to track online status. 7. UI: The lobby should be clean and centered. Show a loading spinner while waiting for the second player to join. Add a "Copy Room Code" button that copies to clipboard.
Click Generate and wait for Lovable to build your multiplayer system.
Step 1: Set Up Your Supabase Project
Before testing, you need to connect Lovable to Supabase. Go to supabase.com, create a new project, and grab your project URL and anon key from Settings > API. In Lovable, click the Supabase integration button and paste your credentials. Supabase Realtime is enabled by default on all new projects, so no extra setup is needed.
Step 2: Test the Room System
Open your game in two browser tabs. In the first tab, click "Create Room" — you should see a 6-character room code appear. Copy the code and paste it into the "Join Room" field in the second tab. Both tabs should now show both player names and indicate the game is ready to start.
The room system needs polish. Make these changes: - Add a large, styled room code display with a copy-to-clipboard button that shows "Copied!" feedback - Show a pulsing "Waiting for opponent..." animation while only one player is in the room - Add a "Ready" button that both players must click before the game starts - Show player avatars as colored circles with initials next to each player name - If someone enters an invalid room code, show a clear error message "Room not found"
Step 3: Sync Game State in Real Time
Play a few rounds in both tabs to test that moves sync correctly. Each action one player takes should appear instantly on the other player's screen. If there's any delay or state gets out of sync, use this prompt to fix it.
Improve the real-time state synchronization: - Send the complete game state object on every move, not just the individual action - Add a sequence number to each state update so players can detect and resolve conflicts - When a new state arrives, smoothly transition the UI instead of jumping to the new state - Add a small "syncing..." indicator that flashes briefly when state is being transmitted - Make sure both players see identical board states at all times
Step 4: Add Disconnect and Reconnect Handling
Test what happens when you close one of the browser tabs. The remaining player should see a disconnect notification. Open a new tab and rejoin the same room — the game should resume from where it left off.
Improve disconnect handling: - Use Supabase Presence to track which players are online in each room - When a player disconnects, show a semi-transparent overlay saying "Opponent disconnected — waiting for reconnect..." with a countdown timer from 30 seconds - Save the current game state to Supabase database (create a game_rooms table) so a reconnecting player can resume - If the countdown reaches zero, declare the remaining player the winner - Add a "Leave Game" button that cleanly exits the room and notifies the opponent - Handle browser refresh — player should automatically rejoin their room on page reload
Step 5: Add a Chat System
A simple chat system makes multiplayer games more fun. Players should be able to send quick messages or emoji reactions to each other during the game.
Add an in-game chat system: - Add a small chat panel on the right side of the game (collapsible on mobile) - Players can type short messages that appear in real-time using the same Supabase Realtime channel - Include 6 quick-reaction emoji buttons: 👍 😂 😮 🔥 💀 🎉 that send with one click - Show messages with the sender's name and a timestamp - Limit messages to 100 characters - Auto-scroll to the newest message - Style the chat to match the game's visual theme
Step 6: Make It Mobile Friendly
Multiplayer games need to work on phones since that's how most people will play. Test your game on a phone-sized screen and fix any layout issues.
Make the multiplayer game fully responsive for mobile: - Stack the game board and chat vertically on screens under 768px wide - Make the chat panel a slide-up drawer on mobile that opens with a chat icon button - Ensure all buttons are at least 44px tall for easy tapping - Make the room code display large enough to read and tap to copy on mobile - Add touch event support for all game interactions - Reduce any padding and margins on mobile to maximize game area - Test that the lobby screen looks good on iPhone SE (smallest common screen)
Step 7: Deploy and Share
Click the Publish button in Lovable to deploy your multiplayer game. Share the URL with a friend — one of you creates a room, shares the room code, and the other joins. Since everything runs through Supabase Realtime, there's no extra server to deploy. Your game works anywhere with an internet connection.
Level Up Your Game
Try these follow-up prompts to make your multiplayer game even better:
Add difficulty levels:
Add a room setting where the host can choose difficulty (Easy, Medium, Hard) before starting. Show the selected difficulty in the lobby. Adjust game speed, complexity, or challenge based on the chosen level.
Add a timer:
Add a per-turn timer of 15 seconds. Show a countdown bar that changes from green to yellow to red. If time runs out, the current player's turn is skipped and it moves to the opponent. Add a "time pressure" visual effect when under 5 seconds.
Add animations:
Add smooth animations for multiplayer events: a slide-in animation when the opponent makes a move, a celebration animation when someone wins, a subtle pulse on the turn indicator when it's your turn, and a ripple effect on the chat when a new message arrives.
Add high score saving:
Save match results to a Supabase "match_history" table. Track wins, losses, and draws for each player (by their localStorage ID). Show a simple win/loss record on the lobby screen next to each player's name.
Add spectator mode:
Allow additional players to join a room as spectators. Spectators can see the game state in real-time but cannot make moves. Show a spectator count badge in the game header. Spectators can use the chat and emoji reactions.
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."
Supabase connection failing Make sure your Supabase URL and anon key are correctly set in Lovable's environment variables. Check that Realtime is enabled in your Supabase project under Database > Replication. If you see CORS errors, verify your Lovable domain is in the allowed origins.
Players not seeing each other's moves Add to your prompt: "Use Supabase Realtime broadcast with event type 'game_state' and send the full state object. Subscribe to the channel before sending any data. Add a console log for every message sent and received for debugging."