Backend language
PHP
Backend runtime for the game domain, server-side validation, automation, and application services.
Citadels Online
A browser-based online adaptation of Citadels, the card-driven tabletop game by Bruno Faidutti, and a concrete example of Aptenova realtime web development. The product brings room setup, hidden role selection, district building, scoring, bots, real players, leaderboards, and multilingual play into a live web experience.
Realtime
Turns, timers, room state, and table updates move without page reloads.
Automation
Rules-aware bot opponents evaluate the board, their own hand, and scoring pressure without reading hidden player cards.
PWA
The product can be installed and reopened like an app from the browser.
Realtime product development
A strategic card game implemented as a dependable web application.
Players collect gold, draw district cards, secretly choose character roles, use character abilities, and build city districts. The match ends when the target number of districts is reached, then the product calculates points and declares the winner.
01
Each game starts from a room: players create a public or private table, configure the rules, invite real people, or add automated bot opponents with decision logic tuned for the current table state.
02
Every round changes the active roles. Character rank defines turn order, while character abilities create attacks, protection, theft, card exchange, income, and building decisions.
03
Players score through built districts, bonus district effects, completed city goals, and end-game bonuses. The highest score wins; draws are handled by the game flow.
04
The live product includes leaderboards, personal results, game history, spectator mode, and five interface languages: English, Russian, Ukrainian, Polish, and German.
Key Features
What makes Citadels Online useful as a development example.
The strongest part of the product is the full playable system behind the table: rules, rooms, live state, bots, scoring, and player-facing flow all work together in the browser instead of staying as a static demo.
-
Complete browser game engine
The product handles hidden role selection, turn order, character abilities, gold, district cards, building rules, end-game triggers, and final scoring.
-
Realtime multiplayer rooms
Players can create public or private rooms, tune match settings, invite people, watch games, and see room state update live.
-
Human-like bot opponents
Bots make weighted decisions from visible state and their own hand, respect hidden information, and can make rare randomized mistakes so solo play feels less mechanical.
-
Configurable game variants
Classic, Dark City, Deluxe, and Scenic Route options let the same product support different rule sets and player expectations.
-
Persistent results and leaderboards
Finished games feed personal results, match history, recent outcomes, and leaderboard surfaces instead of disappearing after a session ends.
-
Multilingual installable play
Five interface languages and PWA support make the game easier to return to across markets and devices.
Product screens
A compact gallery of the product flow.
Open any screenshot to inspect it in a preview modal, then move through the gallery with buttons, keyboard arrows, or a horizontal swipe on mobile.
Product surface
A full playable web product, not a static promo page.
01
Lobby and room flow: public and private games, room settings, leaders, results, spectators, and watch mode.
02
Game engine: character selection, district cards, income, building, special abilities, timed decisions, and final scoring.
03
Mode support: Classic, Dark City, Deluxe, and Scenic Route variations exposed through the live app.
04
Operational surface: authentication, game history, live sessions, PWA access, and admin-facing observability hooks.
Engineering roles
Laravel backend, Vue interface, realtime game loop.
Citadels is not a brochure wrapped around screenshots. It is a working browser game where backend domain rules, realtime transport, persistent storage, and frontend interaction all have to stay in sync during a live turn-based session: the same kind of coordination needed in serious realtime product development.
Application framework
Laravel
Main framework for routing, game flow, authentication, jobs, events, and operational tooling.
Database
PostgreSQL
Relational storage for users, game rooms, turns, cards, scores, and durable product data.
Cache and queues
Redis
Fast infrastructure layer for cache, queues, and realtime-adjacent state that should not slow down gameplay.
Realtime transport
WebSocket
Live transport for multiplayer updates, room state, turn changes, timers, and spectator views.
Realtime server
Laravel Reverb
Laravel-native WebSocket server used with Echo-style channels for realtime product behavior.
Server-driven UI bridge
Inertia.js
Connects Laravel routes to Vue screens without turning the product into a separate API-first frontend.
Frontend interface
Vue.js
Interactive UI layer for the lobby, game table, cards, player controls, settings, and live feedback.
Browser interaction language
JavaScript
Client-side language for game table interactions, realtime UI updates, room controls, and installable browser behavior.
Build and installability
Vite + PWA
Frontend build pipeline and installable browser experience for faster repeat access.
Realtime product logic
WebSocket channels keep player actions, room updates, spectator state, and timers synchronized while Laravel keeps the game rules authoritative.
Game automation
Bot opponents make weighted decisions from the visible game state, their own cards, role pressure, gold, and scoring opportunities. They do not know the cards held by human players or other bots, and a small randomized mistake chance lets them imitate human play so bot matches stay approachable.
Multilingual play
The interface and game content support five languages: English, Russian, Ukrainian, Polish, and German.