Like without Login by barbajoe

posted on: Feb 20, 2024

TLDR: tradeoffs are a butt

There is an icon button on the bottom right of this post, and every one of my posts on this site, I just added that. It allows you to "like" the post, but without signing in! Aaaaaand it lets you like up to five times, and with a new icon each time! Oooooh, so fancy!

I've been wanting to add a "like" button to my posts for a while now, but I strongly dislike having to create a new account and login to do that. So I've been mulling it around in my head for a while and decided to throw something together. It didn't have to be perfect (which it very much is not), it just had to work... most of the time. Thus, with that acceptance criteria set, I decided that I was going to use user's IP address to identify them, and create a MongoDB instance to store the likes per post. Pretty simple, and it works! Most of the time 😅.

The fun things are in my `LikePost.svelte ` component and the server endpoints it hits `likes/+server.ts `. I'm using SvelteKit for this blog, so the server calls are super easy, and MongoDB has an NPM package that makes the CRUD calls trivial once I'd remembered how to do them. I did have a lot of learning to do as I haven't used MongoDB in quite a while, and I played around with quite a few ideas before finalizing on my "like" button functionality and user experience. Specifically, I really like the idea of allowing multiple likes. So I spent a fair amount of time playing with different icons before finalizing on the heart-to-star transitions. But with all of that, it works, and it's good enough for now 👍.

With all of that said, what are my next steps?

First is make a better ID then just using the IP address of the user. That's not even close to unique, but it works well enough for my purposes for the immediate future.

Second is utilize the singleton pattern for my DB connections. I'm embarrassed that I had forgotten to do that 🤦, and it had to be pointed out to me by CodeRabbit.ai . As a quick aside, Code Rabbit is phenomenally helpful. If you have some time, go look at my PR that adds this functionality. Code Rabbit makes a lot of really great insights. But with that, I need to go refresh my memory on how exactly to use the singleton pattern and if I need to be aware of any other things like thread limits or other things I've completely forgotten about.

Third is to add CSS Transitions. The changing icon is cool, but I want to give it that "pop" to make it a really nice user experience.

With all that said, go hit the like button! It does cool things!

Quick Links: