How I developed a clap/like button devtool that works on any website

Have you ever thought about adding a feedback system for your blog or e-commerce? Something simple, like a like button, or a clap reaction. Have you ever tried to implement it?

Well, I tried, and it’s not that immediate as some tutorials around make you think. Even if it may look like a simple task at first, one does not simply create a like button.

The challenges

The challenges I found on my path were many. I will try to sum them up and go one by one explaining how I solved them, and how I finally came out with my own creation, Lyket, a webdev tool to quickly add clap/like/voting buttons to any website. Link → https://lyket.dev/

Here we go:

1. I cannot get away with a simple function for storing buttons scores, I need to store data somewhere, so I definitely need a DB and some architecture.
2. I need to be able to remember visitors interactions but the idea of asking to signup to some service that nobody wants to signup to really appalls me, so I have to find another way.
3. I need to provide statistics for the clients.
4. I want the icons to be animated and satisfying to click!

I figured that not everybody wants to spend time dealing with such nuisances so I decided to give it a try and make it a Saas!

I am miss Wolf and I solve problems

1. Choosing the right tech

Coming from the Jamstack world I wanted to create a headless solution that integrates with the new generation web frameworks, like Next.js or Gatsby, and to provide the most flexible solution.

I am confident in Rails and React and I believe that they make a great team so I picked these two for my architecture. I setup an “API only” project in Rails and fire it up.
I wanted the API to be very simple and flexible but, renaming after renaming and refactoring after refactoring, I had to give up on creating RESTful endpoints since, on top of everything, I wanted my API had to behave exactly like a button would do. So:

Click once → upvote.
Click twice → remove vote.

This does not apply for clap buttons, where
Click once → upvote.
Click twice → upvote.
Click three times → upvote.
You got the idea.. 🙂

Well that was fun. It was my comfort-zone after all. ❤ Rails. I recently added Redis to improve the performance of the voting system, instead of using PostgreSQL. Spoiler alert, now it’s a rocket 🚀

For the “head” part I opted for a React + Typescript library that could be used on React and Next.js (SSR). I used tsxd to bootstrap the React library and, I must say, it is amazing. It takes care of all the dull configurations. I was about to give up on the project from the dullness before finding out about it!

To make the HTML widget that you can embed anywhere simply adding a <script> import, I used React’s lightweight brother, Preact. Piece of cake! You can take a look at the code in the Github repo here

I have many other challenges on the tech side but I guess it can become boring after a while. Write in the comments if you want to know more!!

2. I can get, yes, satisfaction

The “make it nice, make it sparkly” challenge was really hard for me because I am unsure about my eye for details and I am a little embarrassed by my CSS skills, but in the end, I managed to do it!

Animation was the trickiest part. At first, I tried using animating libraries, like Mo.js, but it was really dirtying my code and the final result looked very hackish. So I finally gave up and decided to animate all icons with simple CSS. It wasn’t easy but in the end I managed to create beautiful icons, resizable and with a clean CSS animation. So satisfying!

3. Private is better

Privacy is becoming a more pressing concern around the web day-by-day, and getting rid of omnipresent services like Facebook or Google is a pressing issue felt by many. While these multi-billion companies store data and sell them to third parties just to allow users to leave a token of appreciation, I wanted to allow interactions without requesting any more data than those required to provide the service.

I opted to track interactions using a token stored in the browser local session. Once you click on a button the browser saves a unique key in local session, with no more than 3 session ids per IP address. This allows multiple people to vote in the same workplace/house but also prevents too many requests from the same IP.

Another concern is dealing with potential malicious users. To ward off any robot intrusions, I implemented an optional reCAPTCHA check for all button actions.

4. A dashboard to rule them all

After I released the first prototype I started to use Lyket for my own projects and I started to see that I missed seeing my data in a nice way. So I created a dashboard app in ReactJS where I could see all buttons sorted by score.

Pros and cons

I am very proud of what I did but I wouldn’t feel honest if I did not list all the pro and cons of using Lyket.

Pros

Super fast!
You just need set an ID for you button and you can start right away to receive feedback! You can customize buttons or choose among some of the most famous buttons on the web - Twitter likes, Medium claps or Reddit votes etc. In this video I try to explain it,

No useless polemics
Most competitors offer like buttons in addition to comments but I believe that not every blog need a commenting section. They can lead to pointless rants while a simple reaction button can immediately make a webpage feel a little less aloof and without bloating the interface.

Flexible
The headless approach is ground-breaking. At first I envisioned Lyket would be used only by JAMstack or static webdev but I was proved wrong! This initial choice allowed me to provide the service for all kind of stack, including Wordpress, Wix and even Notion!

CONS

No registration
Not requiring to signup is an advantage but it cuts both ways. I understand if clients would like to know more about the people who interact with their website. For this purpose I am thinking on adding a few optional features to trigger a registration form on user interactions.

No no-code version
Many people have asked me for a no-code version of Lyket. I designed Lyket for developers so I really did not think about it. I am working for a no-code integration for Wordpress, but still it’s TBA.

**Real time? **
I think receiving real time feedback would be really cool. It is not a real “con” at the moment since none has requested this feature and competitors do not have it, but still! I would love to work on it!

I would love for you guys to give a feedback, or if you have any questions I would be glad to answer.