<-- this is shared/teaser/slider-teaser.html.erb -->
Project

Description

Someone in the room is lying.
ALIBI is a browser-based multiplayer social deduction game where a group of friends becomes a room full of suspects. Everyone joins with a single code, receives a secret role and a private clue, and then the real game begins: talk, accuse, defend, and vote. All in real time, before the hidden conspirators quietly take over the room.

Inspired by classics like Werewolf and Mafia, ALIBI is built for that specific moment when a group is together in one room, phones in hand, trying to read each other's faces. Every decision I made served that moment: mobile-first from the ground up, and as few taps as possible per phase, so players spend their attention on each other not on the interface.

How a round unfolds
A host spins up a room and picks a mystery scenario. Players pour in with a 6-character code - no accounts, no friction. Roles are dealt in secret: most players are Citizens, one or two are Conspirators, and in larger games a lone Investigator gets a nightly edge. After a shared case briefing, everyone privately opens their role, discusses the evidence, and votes. Ties trigger a revote. In bigger games, night falls -> the Conspirators can strike, the Investigator can probe, and then a new day, and a new round of suspicion, begins. It all ends with a reveal: who won, and who everyone really was.

Under the hood
ALIBI is built with React, TypeScript, and Vite, styled with Tailwind CSS. The hardest and most interesting part was making every player see the same story at the same time. Chat, votes, and phase changes syncing instantly across multiple devices. That entire real-time layer runs on Supabase Realtime, with no custom WebSocket server, and the whole thing ships continuously through Vercel.

Built to last, and to be trusted
The game's core logic ,role assignment, win conditions, vote resolution lives in pure functions, deliberately separated from the UI. That architecture paid off directly: it let me cover the most critical logic and the key user interactions with a Vitest test suite (React Testing Library, 32 passing tests). The project also went through a dedicated accessibility pass proper form labels, keyboard navigation, colour contrast, and live announcements for new messages.

Finding the look
The visual identity is pure noir detective: warm tones, aged-paper textures, gold accents, and monospaced type for codes. It didn't start there ~ the first design leaned cold and technical, closer to a hacking aesthetic. Switching to a case-file, dimly-lit-office mood made the whole experience feel like the mystery it actually is.

ALIBI is fully deployed and playable right now grab five friends, share a code, and find out who's telling the truth.

Appendices

Creators