HADOS is a single-page application (SPA) built with React 19 and TypeScript, bundled by Vite, and backed entirely by Firebase. There is no custom API server — all application state lives in Firestore, all authentication is handled by Firebase Auth, and the front end communicates directly with Firebase through the official JavaScript SDK. The production environment is served by a lightweight Node.js static file server with SPA fallback routing.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/VasquezRivero92/HabboCafe/llms.txt
Use this file to discover all available pages before exploring further.
Tech Stack
React 19 + TypeScript
The entire UI is a single
App.tsx component tree. React 19’s concurrent renderer manages the leaderboard, modals, admin panels, and auth screens. TypeScript enforces strict typing across all Firestore document shapes (HabboUser, Dado) and component state.Vite 8
Vite drives both development (HMR on
localhost:5173) and production builds. The build pipeline runs the TypeScript compiler first (tsc -b) then Vite’s Rollup-based bundler, emitting optimized assets into the dist/ directory.Firebase SDK 12
Firebase provides both Firestore (document database with real-time listeners) and Authentication (email/password sign-in). The SDK is imported modularly — only the specific functions used are bundled, keeping the output lean.
Node.js Static Server
server.js is a dependency-free Node.js HTTP server that serves the Vite dist/ output in production. It handles MIME types for all standard web assets and implements SPA fallback routing so deep links never return a 404.Lucide React 1.23
All icons throughout the application — navigation, buttons, badges, modals — come from Lucide React. Icons are imported individually, ensuring tree-shaking keeps the bundle small.
Outfit Font
The design uses the Outfit typeface (Google Fonts) loaded via
@import in index.css. CSS custom properties define the full design token system: colors, backgrounds, borders, and typography.Firebase Services
HADOS uses two Firebase services, both initialized insrc/firebase.ts:
src/firebase.ts
db and auth are exported as named singletons and imported throughout App.tsx.
Firestore Collections
HADOS uses exactly two top-level Firestore collections.users
Each document represents a single player profile. The document ID is the Firebase Auth UID when the user self-registers, or an auto-generated ID when an intermediary or admin manually creates a player entry.
dados
Each document represents a tournament group. The document ID is auto-generated by Firestore.
There is no subcollection structure. All users across all Dados live in the flat
users collection and are filtered by dadoId at query time using Firestore’s where clause. This makes cross-Dado queries (e.g. fetching all users by Habbo username for a Global Admin view) straightforward without any joins.Data Flow
Real-Time Leaderboard Updates
The leaderboard is powered by Firestore’sonSnapshot listener. When the active Dado changes (or on initial load), the app sets up a live query:
useEffect return callbacks to prevent memory leaks when the component unmounts or the active Dado switches.
Score Updates and Rank Recalculation
When an intermediary or admin posts a point change, the app runs a batched write that updates every player’scurrentRank and previousRank in a single Firestore commit:
writeBatch ensures all rank fields update atomically — no intermediate state where some documents have new ranks and others have old ones.
Authentication
HADOS uses Firebase Authentication with the Email/Password sign-in method. The auth lifecycle is managed by a singleonAuthStateChanged listener mounted once on app load:
authLoading is false, then either shows the login/register form (if currentUser is null) or the main dashboard.
Role Assignment at Registration
Roles are set at the moment a user document is written to Firestore during registration. The Global Admin role requires the secret codeGLOBAL2026 to be entered during sign-up. All other new accounts receive role: "jugador" by default. Dado admins and intermediaries are promoted post-registration by higher-privilege users through Firestore updateDoc calls.
Habbo Avatar Integration
Every player’s avatar is fetched directly from the Habbo Spain imaging API. The URL pattern is:headonly=1 parameter is appended:
username value is URL-encoded with encodeURIComponent before being inserted. Avatar URLs are stored in the avatarUrl field of each user document at creation time. If the habbo.es API returns an error (e.g. the username does not exist in Habbo Hotel), the <img> element’s onError handler falls back to a DiceBear avatar generated from the username as a seed.
SPA Routing
HADOS has no client-side router. The entire application is a single React tree rendered at the root route/. Navigation between views (leaderboard, intermediary panel, admin panels) is handled by in-memory state variables (activeCategoryTab, activeInfoTab) rather than URL changes.
In production, the server.js static server implements a catch-all SPA fallback: any request for a path that does not match a file in dist/ returns dist/index.html with a 200 status, allowing the React app to boot and manage the UI state:
server.js
PORT or SERVER_PORT environment variables, defaulting to 8080.
Design Tokens
The visual design is driven by CSS custom properties defined insrc/index.css:
| Token | Value | Usage |
|---|---|---|
--color-accent | #ffd700 | Habbo gold — primary CTA buttons, borders, rank #1 |
--color-purple | #9d4edd | Intermediary actions, points modal, focus rings |
--color-success | #10b981 | Positive rank movement indicators |
--color-danger | #ef4444 | Negative rank movement, warnings, reset actions |
--bg-primary | #070709 | Page background |
--bg-card | #15151b | Panel / card background |
--border-color | #22222e | Default border for all panels and inputs |