Building Virtual Rosca de Reyes: A real-time multiplayer cultural tradition
How I built Virtual Rosca de Reyes, a real-time multiplayer web experience that lets families and friends celebrate Día de Reyes together online.
Usually every year after the holidays a group of friends and I get together to continue a tradition on Three Kings Day (Jan 6th). Someone will bring a Rosca (Kings Cake) and lots of anticipation as we cut into the sweet bread, the laughter when someone finds baby figurine, and yes—the ongoing debate about who still owes tamales from years past. It was never about the religious aspect for me. It was about connection, tradition, and the people around that table.
As life scattered us across different cities, distance was breaking a tradition.
So I decided to build a virtual experience for us.
What is Virtual Rosca de Reyes?
Virtual Rosca de Reyes is a real-time multiplayer web experience that lets families and friends celebrate Día de Reyes together, no matter where they are. It recreates the tradition of cutting the rosca and finding el niño in a digital, interactive environment.
Here’s how it works:
- Create a room and invite friends via a shareable link
- Everyone joins and sees the same virtual rosca
- Take turns cutting slices in real-time
- Find out who gets el niño (and owes the tamales!)
- Celebrate the tradition together, even when you’re apart
The Technical Challenge
Building this required solving a few interesting problems:
Real-Time Synchronization
The core experience depends on everyone seeing the same thing at the same time. When someone cuts a slice, everyone in the room needs to see it happen instantly. This ruled out simple REST APIs and led me to WebSockets.
I built a custom WebSocket server that maintains room state and broadcasts updates to all connected clients. When a user cuts a slice, the server validates the action, updates the game state, and pushes the change to everyone in that room simultaneously.
Tech Stack
- Vite: Fast framework
- Tailwind CSS: Rapid UI development with utility classes, keeping the design clean and responsive across devices
- Custom WebSocket Server: Real-time communication for multiplayer synchronization
- Node.js: Backend for managing rooms, connections, and game logic
Design Considerations
The rosca needed to feel familiar but also work as an interactive game element. I focused on:
- Visual clarity: Making it obvious where users can click to cut
- Responsive design: Working seamlessly on mobile and desktop since families might join from different devices
- Low latency: Minimizing delay between actions and updates across all clients
What I Learned
This project reinforced something I already believed: the best projects often come from solving problems close to home. I wasn’t trying to build the next viral app or reinvent the wheel—I just wanted to share rosca with my family and friends.
Try It Yourself
The Virtual Rosca de Reyes is live and free to use. Whether you’re celebrating with family across the country or friends around the world, I hope it brings a little bit of that tradition back into your life. And if you get el niño? Well, you know what you owe 😂.