Hi dev.to! I’ve been teaching myself full-stack development for about 8 months now. To challenge myself beyond basic CRUD apps, I decided to try building a real-time social game mechanic inspired by "crash" games like Aviator. It’s been a massive learning curve, especially regarding WebSocket synchronization and mobile responsiveness .
The core idea is a social multiplayer interface where a multiplier curve rises in real-time, and users have to interact before the "event" ends.
Tech Stack: React, Tailwind CSS, and WebSockets for the live data stream.
The Logic: I’m using a Provably Fair algorithm (SHA-256 hashing) to ensure the backend results are transparent and verifiable by the client .
My Current Build:
You can see the live version here Aviator:
Where I need your help (The Roast):
I’m still seeing some "jank" in the animations, and I’m worried about the mobile experience. Since I don't have a big testing lab, I’d love some professional "roasting" on the following :
Animation Performance: I’m using CSS transitions for the multiplier curve, but it feels laggy on older Android devices. Should I switch to Canvas or SVG?
Mobile UX: Is the "Cash Out" button (the main interaction point) easy to hit with one hand? I’ve tried to follow thumb-zone principles, but I’d love a second pair of eyes .
Data Flow: Right now, I'm pushing updates every 100ms over WebSockets. Is this overkill for a simple multiplier, or will it cause memory leaks in long sessions?
I’m not looking for "looks great!" comments—please be as critical as possible. I really want to understand how to make the UI feel as "snappy" as a professional production app.
Thanks in advance for the feedback! 🍻