This guide gets the ULagos 360° frontend running on your local machine as fast as possible. By the end you will have the dev server live atDocumentation 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.
http://localhost:5173, connected to the production Railway backend, with a tutor session active and ready to update space statuses in real time.
Prerequisites
Before you start, make sure you have the following installed:- Node.js 18 or later — the Vite 7 build toolchain requires it. Check your version with
node -v. - npm — ships with Node.js. Yarn or pnpm also work if you prefer.
Steps
Clone the repository
Run the following command to clone the project and move into its directory:The repository contains only the frontend. No submodules or monorepo setup are required.
Install dependencies
Install all runtime and development dependencies declared in Key packages that will be installed include React 19, Vite 7, Tailwind CSS 4, Zustand 5, and Socket.IO Client 4.
package.json:Start the development server
Launch the Vite dev server with hot module replacement enabled:Vite will print the local URL in your terminal. Open your browser to:The app connects immediately to the production backend at
https://ulagos360-backend-production.up.railway.app. You will see a connection status indicator in the header once the Socket.IO handshake completes.Identify yourself as a tutor
On the very first load — or any time
localStorage does not hold a saved session — the app displays a tutor identification modal. Type your name into the input field and confirm.Your identity is stored in localStorage under ulagos360_current_user and is immediately emitted to the backend as a register_user event. On every subsequent load the app reads this saved name and re-registers you automatically, so you will not be prompted again unless you explicitly log out.Update a space status
The main panel renders a grid of space cards grouped by category (Bienvenida, Coffee Break, Campus Tour, Talleres, Tours en Curso). Each card shows the space name, its current status badge, and one or more action buttons.Click an action button — for example En Camino on a Bienvenida card — to advance its status. The change is applied optimistically in the local Zustand store first (so the UI updates instantly), saved to
localStorage, and then emitted to the backend as an update_space event. Every other connected tutor receives a space_updated event and sees the new status within milliseconds.Backend Connection
The app connects to the following URL by default, as defined insrc/hooks/useSocketConnection.js:
Available Scripts
| Script | Command | Description |
|---|---|---|
| Development server | npm run dev | Starts Vite dev server at http://localhost:5173 with HMR |
| Production build | npm run build | Compiles and bundles the app into the dist/ folder |
| Preview build | npm run preview | Serves the dist/ folder locally to verify the production build |
| Lint | npm run lint | Runs ESLint across the project using the flat config in eslint.config.js |