Chop Chop

lobby
gameplay
mobile login + character select
mobile gameplay
mobile gameplay pt 2
scoreboard!
chop chop logo!

🍳 Inspiration

We found the idea of creating a networked multiplayer game like those in Jackbox exciting, and we really enjoyed playing games like Overcooked! and Cooking Mama. So why not combine them all?

We wanted to create a fun, competitive experience that friends could share in the same room: something easy to jump into, a little chaotic, and full of moments worth yelling about.

🔪 What it does

"Chop Chop" is a competitive multiplayer cooking party game, where players join on their phones and compete to cook their recipes as fast as possible with a variety of gesture-based minigames.

All players cook the same recipes, but what matters is how quickly they can do it, and if they waste any ingredients in the process. Similar to the show, Chopped, each round starts with players grabbing the ingredients they need from the store. Then, the players follow the recipe card, which will present unique gestures they have to complete to cook their food, such as chopping vegetables or frying meat.

Finally, players also get the option to sabotage their fellow competitors, being granted one random ability after they complete each recipe. You can throw out people's raw ingredients, cause a blackout in the store, or freeze people's hands so they can't cook for a few seconds.

🛠️ How we built it

We built Chop Chop as a browser-based game using React, TypeScript, TanStack Start, and Tailwind CSS. The shared host screen and each player's phone connect to a Node.js and Express backend through Socket.IO, which keeps recipe progress, inventories, scores, and sabotages synchronized in real time.

The backend manages the shared game state and gives everyone the same randomized recipe sequence. It processes each room's actions in order so simultaneous purchases, recipe completions, and sabotages don't overwrite one another.

For the cooking minigames, we built a custom gesture recognizer that analyzes touch or mouse movements. It recognizes lines, zigzags, and circular motions using features such as straightness, corners, rotation direction, and path coverage. Recipes are defined in JSON, including their ingredients and gesture stages, making it straightforward to expand the menu.

We also built a mock-driven screen gallery to develop interfaces without running a multiplayer session, and used Docker Compose and Caddy for a consistent local development environment.

😵‍💫 Challenges we ran into

One of the biggest challenges was making gestures feel forgiving without accepting just any scribble. Players draw differently, especially when racing on a small phone screen. Our recognizer smooths and resamples strokes, then checks their shape and proximity to the target while allowing for imperfect finger movements.

Another challenge was coordinating actions across several devices. A sabotage can change someone's inventory or freeze their controls while they're cooking, so the backend needs to validate actions against the current game state. Keeping timed effects, recipe progress, and the host display consistent required careful coordination between client interactions and server updates.

We also had to design two complementary interfaces: a shared display readable from across the room and a phone interface that makes shopping and cooking easy under pressure.

🏆 Accomplishments that we're proud of

We're proud of bringing the shared-screen party game experience to the browser, with phones acting as interactive controllers and personal kitchens.

Our custom gesture system turns simple touchscreen movements into cooking mechanics, and the sabotage system connects those individual interactions to the wider competition. Completing a dish can give you an opportunity to interrupt another player's plans!

We also built automated tests for gesture recognition, game rules, sabotages, and real Socket.IO connections, giving us a way to check important behavior as the game evolved.

📚 What we learned

We learned how much multiplayer development depends on deciding where state belongs. Keeping shared rules and outcomes on the server gives every device a consistent view of the competition, while handling gesture recognition locally keeps the interaction responsive.

We also learned that interaction design involves balancing precision with player expectations. A mathematically accurate gesture requirement isn't necessarily enjoyable on a touchscreen; tolerances and clear feedback matter just as much.

Separating recipe data, game logic, networking, and presentation helped us develop and test those pieces independently.

🚀 What's next for Chop Chop

We'd like to expand the recipe collection with more cooking gestures, add new sabotages, and use playtesting to refine scoring, difficulty, and effect durations.

On the technical side, we want to improve reconnection support so a temporary phone disconnect doesn't interrupt a match, and persist game sessions so they can survive a server restart. We'd also like to polish animations, sound effects, and the mobile experience to make every chop, stir, and sabotage more satisfying.