30 Days of Vibe Coding - Day 19 - ReactionWall
A live reaction wall for events with flying emojis and text messages, powered by Firebase real-time sync.
A live reaction wall for events with flying emojis and text messages, powered by Firebase real-time sync.
Day 19. I wanted something fun and interactive for live events. The kind of thing you throw up on a projector at a meetup and let people send reactions from their phones.
The Prompt
> "Build a live reaction wall for events. Create an event, share a link or QR code, and reactions fly across the screen in real time. Emoji bar at the bottom, text messages too. Full-screen projection mode. Firebase for real-time sync."
Try it out yourself here
How It Was Built
Watchfire broke this down into 9 tasks. The first few were foundational: setting up Firebase Realtime Database, event creation flow, and anonymous auth so nobody needs to sign up. Then came the emoji reaction bar, the animated flying reactions using Framer Motion, the full-screen display mode for projectors, sound toggle, and a final polish pass.
The real-time part was the core challenge here. Every reaction needs to show up instantly on every screen viewing that event. Firebase Realtime Database handles that out of the box, but there's a lot of nuance in making it feel good. The reactions use a 30-second sliding window so old ones disappear, and there's rate limiting at 1 reaction per second to keep things from getting out of hand.
What I Got
The landing page is clean and dark. One button to create an event wall.
You name your event and hit "Go Live." That's the entire setup.
Once you're in, you get a QR code and shareable link in the top left so attendees can join instantly from their phones. The bottom of the screen has an emoji bar with 8 options plus a text input for custom messages up to 50 characters.
The display mode is where it gets fun. Full screen, dark background, reactions flying across with glow effects. The emojis have randomized trajectories, sizes, and a wobble animation. Text messages float across too in little purple bubbles. When people start spamming reactions, there's a burst effect that kicks in.
There are nice touches I didn't explicitly ask for. Haptic feedback on mobile when you send a reaction. Pop sounds via the Web Audio API with a toggle to turn them off. A cooldown indicator so you know when you can send again after the rate limit.
The Tech
...
---
Read the full article →

Add a comment: