Icon.io

Icon.io is a web platform for playing party games with friends, built around real-time updates: the lobby, rooms, chat, and play all happen live, broadcast to every player through sockets. Its one game is Draw & Guess, where one player draws a word and the others guess it.

Three of us built it in three weeks, as the final project of a web development course. I designed the interface in Figma, from the landing page where a player picks a name to the room list and the game, and built the real-time layer and the drawing board.

Real time, end to end

On the server, Socket.io broadcasts every change to the players it concerns: the lobby's room list, a room's players, chat messages, and each turn of the game. In the browser, React state takes those broadcasts in, so every player's screen stays in step without a refresh.

A shared drawing board

The drawing board is a canvas with a color palette and brush settings. Each stroke is broadcast as it is drawn, so the guessers watch the drawing appear as it happens.

Screenshots

Landing - picking a nameDraw & Guess - the room listDraw & Guess - choosing a word to drawDraw & Guess - drawing while the others guess