A fun group project motivator
My friends and I had the idea of making a beerpong table that is covered in beer caps, to make it really cool looking and personal. So the idea was there, but I knew if we didn’t have a centralised way to track how many caps we already have, we won’t stick to the project. So that’s why I came up with this idea!
On the frontend it’s really basic, just spun up a nextjs project, added some shadcn components and a visualization of how many beercaps we already have. There are buttons to add and remove beercaps and a big counter. However, there was one problem: What if someone entered some beercaps at the same time and you then had two different counts being displayed?
The backend (redis and wss)
To solve this problem I had to make the client connect to a websocket server, that is connected to a redis store, which contains the count. So when someone adds a beercap, the websocket server tells redis to add it, and communicates the update to all connected clients. So you always see the latest count without needing to refresh your browser. That was a very cool way of over-engineering a simple counter 😅.
All Technologies used
- Next.js
- shadcn/ui
- express
- Redis
- Websockets
built with :heart: by andyyk