Skip to main content
This guide will walk you through starting the backend server, launching the frontend client, and creating your first multiplayer game room.
Make sure you’ve completed the Installation steps before proceeding.

​
Starting the Backend Server

1

Navigate to Backend Directory

Open a terminal and navigate to the backend folder:
cd Backend
2

Verify Environment Configuration

Ensure your .env file is properly configured. For quick local play:
PORT=3000
JWT_SECRET=your_jwt_secret_key_here
DB_USE_SQLITE=true
The backend will default to port 3001 if PORT is not specified in server.js:13
3

Start the Server

Launch the backend in development mode:
npm run dev
You should see output similar to:
[nodemon] starting `node server.js`
DB conectado y SSL: false
Rutas de autenticación habilitadas

╔══════════════════════════════════════════════╗
║  Servidor corriendo en http://0.0.0.0:3001   ║
║  (escuchando todas las interfaces)           ║
╚══════════════════════════════════════════════╝

Local:   http://localhost:3001
Network: http://192.168.1.100:3001
Keep this terminal window open. Closing it will stop the backend server.
4

Test Backend Connectivity

Verify the server is running by accessing the health check endpoint:
curl http://localhost:3001/ping
Expected response:
{
  "ok": true,
  "time": 1709553600000,
  "host": "localhost"
}

​
Starting the Frontend Client

1

Open a New Terminal

Keep the backend terminal running and open a new terminal window.
2

Navigate to Frontend Directory

cd Frontend
3

Start the Development Server

Launch the Vite development server:
npm run dev
You should see output like:
VITE v5.4.21  ready in 342 ms

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.100:5173/
➜  press h + enter to show help
The --host flag in the dev script (Frontend/package.json:8) allows access from other devices on your network.
4

Open the Game in Your Browser

Navigate to http://localhost:5173 in your web browser.

​
Creating Your First Game

1

Register or Login

When you first open the game, you’ll need to create an account or login:
  • Register: POST to /api/auth/register with username, email, and password
  • Login: POST to /api/auth/login with email and password
Authentication is handled via JWT tokens. Your session will persist across browser refreshes.
2

Navigate to LAN Game Mode

From the main menu, select “Juego en Red (LAN)” (Network Game - LAN).
3

Create a Room (Host Player)

Click “Crear Sala” (Create Room).The backend will:
  1. Generate a unique 6-digit room code (e.g., 123 456)
  2. Create a Socket.io room
  3. Display the code on your screen
socket.emit('create_room', (response) => {
  console.log(response); 
  // { success: true, code: "123456" }
});
Share this 6-digit code with the player who wants to join your game.
4

Join a Room (Guest Player)

The second player should:
  1. Open their browser to http://[HOST_IP]:5173
    • Example: http://192.168.1.100:5173
  2. Login or register
  3. Navigate to “Juego en Red (LAN)”
  4. Enter the 6-digit room code
  5. Click “Unirse a Sala” (Join Room)
socket.emit('join_room', { code: "123456" }, (response) => {
  console.log(response);
  // { success: true } or { success: false, message: "error" }
});
5

Game Starts Automatically

Once both players are connected:
  • The game will start automatically
  • The host player always goes first
  • Each player has 12 seconds per turn
  • Actions are synchronized in real-time via Socket.io
Game events are transmitted using the game_event socket event (Backend/README.md:24), which forwards actions to the other player in the room.

​
Quick Reference

​
Port Configuration

ServiceDefault PortConfiguration
Backend3001Backend/server.js:13
Frontend5173Vite default

​
Terminal Commands Cheat Sheet

# Terminal 1 - Backend (with auto-reload)
cd Backend
npm run dev

# Terminal 2 - Frontend
cd Frontend
npm run dev

​
Socket.io Events

EventDirectionPurpose
create_roomClient → ServerCreate a new game room
join_roomClient → ServerJoin existing room with code
game_eventClient ↔ ServerSynchronize game actions

​
Game Controls

Once in a match:
  • Left Click: Select a card
  • Drag card to slot: Play card from hand
  • Click field card + click enemy card: Attack
  • Click two owned field cards: Fusion (same type and level)

​
Troubleshooting

If you encounter connection issues, check the following:

​
Backend Not Starting

# Check if port 3001 is already in use
lsof -i :3001  # Mac/Linux
netstat -ano | findstr :3001  # Windows

# Kill the process if needed
kill -9 <PID>  # Mac/Linux
taskkill /PID <PID> /F  # Windows

​
Frontend Can’t Connect to Backend

  1. Verify backend is running: http://localhost:3001/ping
  2. Check that both services use the same network
  3. Ensure firewall allows connections on ports 3001 and 5173
  4. Verify the backend’s network IP matches what the frontend is connecting to

​
Room Not Found Error

  • Verify the 6-digit code is correct
  • Ensure the host created the room before the guest tries to join
  • Check that both players are connected to the same backend server
  • Room codes are stored in memory (Backend/README.md:39) and cleared when the server restarts

​
Actions Not Syncing

  1. Open browser console (F12) and check for Socket.io errors
  2. Verify stable network connection
  3. Restart both the backend and clients
  4. Check that both clients are in the same room

​
Next Steps

Now that you have a game running:
For more detailed troubleshooting and LAN play configuration, see the complete LAN Setup Guide and Troubleshooting.

Build docs developers (and LLMs) love

Get started for freeTalk to us