Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Pewiz/ulagos360/llms.txt

Use this file to discover all available pages before exploring further.

ULagos 360° connects to an external Socket.IO server to synchronize space states in real time across all connected tutors. The backend URL and every connection option are configured in one place: src/hooks/useSocketConnection.js. Changing a single string in that file is all that is needed to redirect the frontend to a different server.

​
Default Backend URL

The production backend is hosted on Railway at: 
https://ulagos360-backend-production.up.railway.app
This URL is hardcoded in the setupSocket function inside src/hooks/useSocketConnection.js.

​
Connection Configuration

The full io(...) call used to establish the Socket.IO connection is shown below. All options are set explicitly to give predictable behavior under the unstable network conditions typical of open-day events.
src/hooks/useSocketConnection.js
socketRef.current = io("https://ulagos360-backend-production.up.railway.app", {
  transports: ["polling", "websocket"],
  upgrade: true,
  timeout: 30000,
  reconnection: true,
  reconnectionDelay: 2000,
  reconnectionAttempts: 5,
  maxReconnectionAttempts: 5,
  reconnectionDelayMax: 10000,
  randomizationFactor: 0.5,
  forceNew: false,
  autoConnect: true,
  withCredentials: false,
  rememberUpgrade: false,
});
Key decisions in this configuration:
  • transports: ["polling", "websocket"] — starts with long-polling and upgrades to WebSocket once the connection is stable. This avoids hard failures on networks that block raw WebSocket traffic.
  • reconnectionAttempts: 5 — the client will retry up to five times with a 2 s base delay, capped at 10 s, before giving up.
  • withCredentials: false — no cookies or auth headers are sent, so simple CORS origins work without additional server configuration.
  • timeout: 30000 — allows up to 30 seconds for the initial handshake, accommodating cold-start latency on Railway’s free tier.

​
Changing the Backend URL

1

Open the connection hook

Open src/hooks/useSocketConnection.js in your editor.
2

Find the io() call

Locate the io(...) call inside the setupSocket function near the top of the callback body.
3

Replace the URL string

Swap the URL string with your server’s full address, including protocol and port if non-standard. For example:
socketRef.current = io("https://your-server.example.com", {
  // ...existing options
});
4

Build the frontend

Run the production build from the project root:
npm run build
5

Redeploy

Upload the generated dist/ directory to your hosting provider (Vercel, Netlify, static host, etc.).

​
CORS Requirements

The Socket.IO server must explicitly allow the origin from which the frontend is served. Because the frontend uses withCredentials: false, a simple wildcard origin (*) or an explicit allowlist of your frontend domain is sufficient — no credential handling is required on the server side.
If CORS is misconfigured, the Socket.IO connection will fail silently from the frontend’s perspective. Tutors will see “Desconectado” in the header with no further error message in the UI. Open the browser DevTools Console and Network tabs to check for blocked preflight requests or connect_error events.

​
Running a Local Backend

For development and testing without the Railway server, you can spin up a local Socket.IO backend and point the frontend at it.
  • The server/ directory in this repository contains empty placeholder files (server.js, package.json, render.yaml, README-DEPLOY.md) — all are 0 bytes and do not contain working code. They serve only as a reminder of the expected file layout.
  • The actual backend is a separate, external repository. Any Socket.IO server that implements the event protocol is compatible — see the WebSocket Events reference for the full list of required events.
  • After setting up your local server, point the frontend at it by replacing the URL in useSocketConnection.js: 
    socketRef.current = io("http://localhost:3000", {
  // ...existing options
});
During local development, open the browser console before loading the app and watch for connect and connect_error Socket.IO lifecycle events. A successful handshake logs connect with a socket ID; a failed one logs connect_error with a reason string that pinpoints whether the problem is network, CORS, or a missing event handler on the server.

​
Expected Server Event Protocol

The backend must implement all events documented in the WebSocket Events reference. This includes responding to client-emitted events such as register_user, get_all_spaces, update_space, sync_spaces, and user_logout, as well as broadcasting space_updated and state-response events to connected clients.

Build docs developers (and LLMs) love

Get started for freeTalk to us