DEV Community

Cover image for Build a real-time voting app with WebSockets, React & TypeScript 🔌⚡️

Build a real-time voting app with WebSockets, React & TypeScript 🔌⚡️

vincanger on August 09, 2023

TL;DR WebSockets allow your app to have “real time” features, where updates are instant because they’re passed on an open, two-way chann...
Collapse
 
matijasos profile image
Matija Sosic

this is a really solid tutorial. Super detailed so I can get things working + an interesting example, top notch work 💪.

Collapse
 
vincanger profile image
vincanger

Oh, wow. Thank you for the kind words, sir. Glad it could help :)

Collapse
 
jerryvrabeldevelopment profile image
Jerry Vrabel

Enjoyed. Starred the repo. Found a typo exampple.

"In this exampple, we’ll be using ExpressJS with the Socket.IO library. Although there are others out there, Socket.IO is a great library that makes working with WebSockets in NodeJS easier.
If you want to code along, first clone the start branch:"

Collapse
 
vincanger profile image
vincanger

Glad you liked it! Thanks for the typo find :)

Collapse
 
bullishgopher profile image
Sandy Nguyen

Great tutorial. A quick question. May I know where we can deploy the express server and the react client you implemented?

Collapse
 
vincanger profile image
vincanger

Wasp has a great guide on easily deploying via the CLI (if you used the Wasp variation): wasp-lang.dev/docs/advanced/deploy...

Collapse
 
bullishgopher profile image
Sandy Nguyen

Thanks, but as I mentioned, for express and react ... ???

Collapse
 
serhiyandryeyev profile image
Serhiy

Top notch!

Collapse
 
vincanger profile image
vincanger

thanks!

Collapse
 
infomiho profile image
Mihovil Ilakovac

WebSockets are great for adding bit of "magic" to my apps. Stuff happening real time is really cool to observe!

Reading through this now and I appreciate the interesting example 👍

Collapse
 
vincanger profile image
vincanger

What other examples you got for us?

Collapse
 
gabrielctroia profile image
Gabriel C. Troia

Hi @vincanger, thanks for showcasing Wasp's capabilities to me even more with your detailed article – it's a really great framework and from what I see there is a solid team behind it, and it has a lot to offer.

I think the idea of abstracting the backend as much of possible from the developer's day to day tasks is the future. I've been working on a similar framework since the beginning of this year, and although while different in scope a bit, it shares the same idea – focusing on frontend code only, while letting the framework take care of the backend (data store, network protocols, security, etc...) in a seamless way.

You can find more about it at movex.dev or a tutorial I recently wrote on how to build a chat app in react without the backend here, and I'd be really honored to get your take on it!

I've been doing it on my own since the beginning and it's pretty hard to get the word out and get some proper feedback without a solid network.

Cheers and thank you!

Collapse
 
nevodavid profile image
Nevo David

Great article!
Thank you for sharing!

Collapse
 
soloprogrammer profile image
SoloProgrammer

Always love the blogs where Socket connects me with them!