Reddit Up / Down Vote Component using Livewire

Tech Stack: tailwindcss, alpine-js, livewire

Demo

Upvote/Downvote Component Example

Tailwind Dropdown using AlpineJS

Simple tailwindCSS toggle dropdown using AlpineJS, accessibility support.

Check Username availability using Livewire

Check if username exists in the database without refresh

Real-time ChartJS using Livewire

Chart component that generates some fake data with a refresh of every 2 seconds.

Select2 Multiple select using Livewire

Integrate Select2 dropdown with multiselect support using livewire

Star Rating Component using Livewire & AlpineJS

Rate your model objects using this reusable rating component

Code

Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro

Usage 


      @livewire('upvote-downvote-component', [
                            'model' => $post,
                            ], key($post->id))

Documentation

This is a reusable component to implement a Reddit-style upvote/downvote counter for any of your Laravel models.

It consists of a Vote Model, which stores the votes and have many to many relationships with your Model. Include the following method in your Model file for which you are looking to implement this component 

    public function votes()
    {
        return $this->morphMany(Vote::class, 'voteable');
    }