Sketch'N'Guess
A GPS-based multiplayer drawing and guessing game for mobile, developed during a design sprint using React Native, Node.js and Socket.io for real-time communication.
- Mobile Development
- React Native
- Node.js
- Socket.io
- Design Sprint
- Prototyping
- Figma
- Role
- Developer & Designer
- Timeline
- Autumn 2024
- Type
- Course project
Problem
The brief was to build a mobile app where users paint on a geographic canvas using their GPS position. We turned that into a multiplayer game: one player draws a word by physically moving outdoors, while everyone else tries to guess what they're drawing in real time, a mobile Pictionary where your route is the pen.
What we built
The full flow runs on iOS and Android from a single React Native codebase, communicating with a shared Node.js server via Socket.io. Every step, from creating a game to the final leaderboard, is handled by the server in real time.
The host sets up the game, canvas size, round duration and their nickname. The server generates a lobby code. Other players join by entering the code and a nickname.
Once everyone is in, the lobby shows a live leaderboard that updates after each round. The host starts each round when ready, the server then randomly assigns who draws and gives them a word
The drawer sees their word and starts moving. GPS coordinates stream in real time to the server and out to all connected guessers, rendered as polylines on a blank map canvas. The drawer can adjust brush size, color and undo strokes while moving.
Guessers see the drawing appear stroke by stroke and type their guesses into the chat. Every message is checked server-side, a correct guess ends the round immediately, awards points to both the guesser and the drawer, and notifies all players.
Individual contribution
My main focus was the Node.js server and the chat function.
The server handles all game logic. Creating and joining games, assigning the drawer and word, distributing roles to connected clients, and managing the full session state via Socket.io. The chat doubles as the guessing mechanism: incoming messages are checked against the correct word server-side, and a correct guess ends the round and distributes points. Beyond the server, I contributed across the project where needed.
Revisiting the project
Two years later, I revisited the codebase.
The original implementation worked, but the code was inconsistent. There were a lot of magic numbers, mismatched layouts across screens, and some server-side bugs around session cleanup on timeout and disconnect. Returning to it for my portfolio gave me a chance to fix what I would have done differently the first time: a consistent design system, proper safe area handling, flex-based layouts, and cleaner server logic. The screenshots here reflect that updated version.