03 · Full-stack developer
Connect Four
Play a friend online, watch a match, talk while you play, or take on the computer.
- Role
- Full-stack developer
- Built with
React
Redux
Framer Motion
TailwindCss
Socket.io
Node.Js
Express.Js
01The problem
It started as a Frontend Mentor challenge: Connect Four for two people sharing one screen. I wanted to play friends who weren't in the room. Connect Four is simple at a table. Online, it isn't. Whose turn is it if the wifi drops? Can someone watch? Can you talk? And can the computer play well without the page freezing?
02How it works
You create a short room code and send it to a friend. No accounts, no matchmaking queue. Just the two of you, plus anyone you invite to watch. The server is in charge of the board, so a sneaky client can't drop a disc wherever it wants.
You can also play the computer. It thinks in the background so the game stays smooth, then waits a beat so it doesn't feel like a calculator. Voice is a call between the two players, not a chat room we have to host.
03Decisions
The calls that shaped how it works, and why I made them.
- 01
Wifi dropping shouldn't end the game
If someone disconnects, the turn clock pauses. They have thirty seconds to come back. Same name, same room, same board. If they don't make it, the room closes. That's better than 'refresh and start over.'
- 02
The computer has to feel like a person
Easy guesses. Medium thinks a little. Expert thinks longer, likes the center column, and goes first. It isn't unbeatable. It just plays well enough to be annoying, without locking up the tab while it decides.
- 03
The room should feel occupied
Up to five people can watch. Quick messages (including Pidgin), emoji, and a restart you both have to agree on. Each move has a thirty-second clock, and whoever started the last game goes second in the next. There are 72 achievements to unlock, saved with your stats on that device.
04Where it landed
You can play a friend with a room code, talk or trade quick messages while you play, watch someone else's match, or take on the computer at three levels.
Next project
Pairs
A card-matching game. Flip two cards at a time to find the pairs. Beat your best time solo, or play up to three friends online, with leaderboards for both.
