Developing Yummy.vote: Exploring Next.js 14, React Server Components, and Liveblocks.io

For programmers, every once in a while, you need a brief side project to give you an opportunity to try new things and keep up your love for programming.

This time around for me it was Yummy.vote - a scrum poker tool that was both a solution to a real-world problem and a playground for some of the latest news in React and Next.js, where I spend most of my career living.

Ever seen a cupcake get assembled?

Why Yummy.vote?

Our team at work often relied on the Scrum Poker tool available in MS Teams. But after multiple disruptions and breakdowns, it was evident we needed a more reliable alternative. This pain point, coupled with my eagerness to experiment with new technologies, led to the office coffee machine after work on a Friday, and then to Yummy.vote.

Ok, ok. Let's talk about the name quickly. I wanted something playful! Something that would resonate with the fun spirit of the tool and how agile teams should be kept. You want to go into work and have fun with development, not grind and slave away.

Besides, it was a toss-up between "Yummy.vote" and "Yummy Scrummy". The former won, mainly because I could already feel the "what the" stares from my coworkers if I linked them to a yummscrummy.vote...

The Tech Behind Yummy.vote

1. NextJS 14

NextJS has been a rising star in the world of React frameworks, version 13 brought MAJOR changes in the form of the app directory router and RSCs (React Server Components) which I hadn't had a chance to try yet, let alone all the other features that had been getting packed into it.

Yummy.vote became the perfect project for this. The framework's enhanced performance and developer experience features played a significant role in the rapid development of the tool.

2. React Server Components (RSCs)

I won't lie, I was an RSC skeptic, I believed that frameworks should solve for the pre-rendering of React, not React itself. This was a bad take. Initially, while they seemed more like an annoyance, as I watched more experienced developers explain them thoroughly the potential of RSCs became very evident.

They offer the promise of improved performance by reducing the amount of JavaScript sent to the client and pre-rendering swathes of your React app. The key challenge I had to solve to fall in love with them was finally understanding how to isolate different sections of my app correctly between server and client.

Once you get the hand of it RSCs honestly become a joy to work with, and it's unlikely I'll start a new project (especially in NextJS) without them.

3. Liveblocks.io

Introducing multiplayer features in applications is a time sink. Liveblocks.io has been on my radar for a while though and promises to make multiplayer less of a headache. It offers easy integration and "presence" features in sessions, as an example think of the multiple carets in a Google Doc where you can see other people move their focus and type in real time.

This was an easy sell, I needed a way to quickly sync peoples votes which Liveblocks "storage" would be perfect for, and who doesn't want to see the real time cursors of your team???

I rate liveblocks pretty highly after using it, the pricing structure means it'll be the only thing to hit any kind of limit if Yummy.vote gets too much usage, and frankly I'm unlikely to pay for it. Long term if that's an issue I'll swap it out for something like Supabase and ditch the live cursor positions. Alternatively I could find a sponsor for Yummy.vote who'd be willing to absorb the (small) cost. Any takers? πŸ™

Fun, Playful, and Functional

I believe pretty strongly in being unique and playful with your brand when you can, the ever brilliant horse browser is a perfect example of executing this well. It creates memorable and delightful interactions with your brand, and I know, it's probably going a bit far for a Scrum Poker, it did let me try out some new stuff.

Dynamic OG Images

A feature of new app router is dead simple OG image generation per URL, while there's definitely some... issues... to be solved with it, I had an absolute breeze of a time getting this up and running.

Some of my favourites

When you link a Yummy Roomβ„’ through to your company Slack (or yes, MS Teams) a unique OG image is generated for that room, it has the text with a shortlink for easy access and a choice of an emoji combination for a list of 50 I've thrown together.

Some are a bit... weird, and might get yummy.vote kicked out of the more 2serious4school teams, but it's a fun little feature. And besides, people need to lighten up! It's just an emoji after all.

Live Cursor Movements

Come on, you KNOW you need this. After the team is done voting you can see each others cursors and play chasies around the screen. Up next we need to add confetti cannons and throwable stamps to really spice up the planning sessions.

Blobmoji

I've not going into it. Bring back the blob!

Closing Thoughts

Overall I only spent 9 hours on it, but Yummy.vote has been a delight to build. It was a project that reaffirmed the importance of continuous learning and adaptability in the ever-evolving world of software development. Especially one where tech Twitter changes its mind on best practice React every 3 weeks.

Oh yeah, and thanks to actually have a project to implement them in, I've gone from RSC hater to putting RSC LOVER 😍 on my dating profile.

I hope you have fun with it, and I really hope it'll help your team with your planning sessions. πŸ™‚