DEV Community

Cover image for ๐ŸซฐClickvote: Open-source upvotes, likes, and reviews to any context ๐Ÿ”ฅ

๐ŸซฐClickvote: Open-source upvotes, likes, and reviews to any context ๐Ÿ”ฅ

Nevo David on July 11, 2023

TL;DR I built an open-source app to add upvote, like, and reviews anywhere. And while it sounds easy, I kind of broke my head on the arc...
Collapse
 
ismaestro profile image
Ismael Ramos ๐Ÿš€

Hi Nevo!

First of all, congratulations on this project! It looks simply amazing!

As a front-end developer, I would like to know a little bit more about that aspect. If I understood correctly, in the end, if I want to use your service, do I need to add your component to my website? Is it designed as a web component? If not, would I be able to use it in an Angular app, for example?

I love the project, and once again, congratulations!

Isma

Collapse
 
nevodavid profile image
Nevo David

Hi Isma,
At the moment the project is self-hosted and you would need to host the entire project in order to use the component!

Yes, you need to add the component to your website, as this is the first version there is only a React Component. I hope the in the coming months I would have:

  • a web component
  • an angular component
  • a vue component
  • a svelte component

This is the NX library of the React component
github.com/clickvote/clickvote/tre...

In the future I would also host the entire service, so you can only use the component without hosting it yourself :)

I hope it helps!

Collapse
 
ismaestro profile image
Ismael Ramos ๐Ÿš€

Nicee!

I was thinking about helping in that part, maybe I can create a PR to add a web component or an angular component. Are you open to that?

:)

Thread Thread
 
nevodavid profile image
Nevo David

Of course!
But I am going to change the architecture a bit.
I got a bit of backlash on building something too complicated.
I might start by removing timescale and kafka.

Thread Thread
 
ismaestro profile image
Ismael Ramos ๐Ÿš€

Ok!
If I have time this week I might start just creating the markup and styling the component.
I'll stay in touch.

Thread Thread
 
nevodavid profile image
Nevo David

Great!
I added some setup instructions to make it a lot easier.

I have already created the angular directory over
/libs/angular-component

And it's already published to npmjs on
npmjs.com/package/@clickvote/angular

Collapse
 
softwaresennin profile image
Melโ™พ๏ธโ˜๏ธ

great great great stuff...

The issue that I have and I guess some others have is taking all what we know in this and that and piece it all up together and create solutions like this you just did.

I really really really want to say KUDOS to you for stepping out and sharing this. Many others have ideas but the implementation ... like what you just did here is where they get stuck and drop the idea.

Again Kudos!

Collapse
 
nevodavid profile image
Nevo David

Thank you so much Lionel! โค๏ธ

Collapse
 
gyurmatag profile image
Varga Gyรถrgy Mรกrk

Awesome. I will look into the project a little bit deeper later.
Haven't you considered using Supabase for most of the backend / real-time features of you application?

Collapse
 
nevodavid profile image
Nevo David

Superbase are really amazing for that, and I am using them with projects like
libraries.github20k.com

For the public upvotes.
I feel that as a closed sourced product that will probably be my go to.
But as an open-source product it must be flexible to any need.

If I put Supabase, I would force open-source users to use Supabase (they are great, but limiting)

Does it make sense?

Collapse
 
gyurmatag profile image
Varga Gyรถrgy Mรกrk

Yes of course. Thank you!

Thread Thread
 
nevodavid profile image
Nevo David

โค๏ธ

Collapse
 
mfts profile image
Marc Seitz

Just wow ๐Ÿคฉ you outdid yourself this week. Such a wide spectrum of technologies - in the end simplicity ๐Ÿ‘

Collapse
 
nevodavid profile image
Nevo David

Thank youn so much Marc!
According to Hackernews, I did an overkill infra haha

Collapse
 
mfts profile image
Marc Seitz

Hahahaha love it ๐Ÿ˜

Collapse
 
suede profile image
Yuval

Great article @nevodavid

Collapse
 
nevodavid profile image
Nevo David

Thank you so much โค๏ธ

Collapse
 
arndom profile image
Nabil Alamin

This is really great ๐Ÿ‘Œ๐Ÿ‘Œ

Collapse
 
nevodavid profile image
Nevo David

Thank you! โค๏ธ

Collapse
 
zevireinitz profile image
Zevi Reinitz

You're a freaking guru. Great Job!

Collapse
 
nevodavid profile image
Nevo David

Haha, thank you so much โค๏ธ๐Ÿš€

Collapse
 
matijasos profile image
Matija Sosic

Congrats, awesome stuff David!

Collapse
 
nevodavid profile image
Nevo David

Thank you sooo much!

Collapse
 
oba2311 profile image
Omer Ben Ami

Nice idea!

Collapse
 
nevodavid profile image
Nevo David

Thank you so much!

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Wow! Really cool project! I already gave you a star on GitHub.

As a front-end developer, it's a little hard for me to understand why would you need such a huge architecture for a component like this... don't you think something like Pocketbase or Supabase would get the job done for both, the component and the admin?

Collapse
 
nevodavid profile image
Nevo David

Yes! for the simple option of having an upvote that can def work.
But my questions was:

  • What if you need daily analytics around your likes in the app?
  • What if you are at scale? (Instagram)
  • What if you don't want to waste time in building it at all? even we Supabase you will need to have the logic of getting the likes, counting, preveting race condition and so on :)

I might be wrong about them all.

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo) • Edited

I think that PocketBase is good for small to medium-large (many thousands of requests per day), and the PocketBase SDK could be used for both, handle the votes and also get and post data to be used with the admin and analytics.

But as you say, if you want to create a huge app, maybe like Instagram, PocketBase or Supabase may not be the best fit for those kind of projects.

Pretty cool project by the way!

Collapse
 
lewiscowles1986 profile image
Lewis Cowles

What about w3c recommended webmention which enables likes and comments on any URL?

webmention.io