Git Product home page Git Product logo

livewire-advanced-filter-by-tags-demo's Introduction

Advanced search and filter with Laravel and Livewire

A demo app using Laravel 8 and Livewire 2 showing how to implement a list of articles and tags, via a polymorphic relationship, that can be searched and/or filtered by tags.

The Tag list shows the article count of each tag and works with pagination. Tags are colored* (via a color attribute on the db) to be easier to see they working. You cam select multiple tags and the filter will update the list of items.\

Choose one of the versions

  • Version 1 works with just one model at a time. This is the version on the Main branch. This demo provides a SQLite database (database/database.sqlite) already populated with 100 articles, and 50 tags, so you don't need to migrate the DB to see things working. But you can also seed the database with the provided seeder classes by running php artisan migrate --seed after updating your .env file.

  • Version 2, a bit more complex, is a multimodel version, listing both articles and videos. Get it on branch search-multiple-models. It requires /protonemedia/laravel-cross-eloquent-search

Quick demo of version 2 (the multimodel version)

You can see it live here: https://livewire.sergiojardim.com/

livewire-multi-model-search-with-filtering.mp4

Screenshots of version 1

Light mode
Dark mode

How to run the demo

  1. Clone the repo
  2. Run composer install
  3. Rename .env.example to .env and change the database settings according to your machine
  4. Run php artisan migrate --seed to load fake content into your database
  5. Run php artisan serve if you are not using Laravel Valet.

You don't need to run npm install as we are using Tailwind CSS 3.0 via its CDN on layouts/app.blade.php. :)

Performance

Loading 10 articles (titles + date + tags) per page and the 15 most used tags on my 13" MacBook Pro M1, Laravel DebugBar took on subsequent page loads:

  1. Using the provided SQLite database: less than 50ms using 2MB of RAM.
  2. Using the a MySQL 8.0.22 database: less than 80ms using 2MB of RAM.

This demo app is an updated and improved version of my old Livewire 1 demo which was based from /breadthe/laravel-livewire-demo.


*Note: the tags colors were generated randomly and text contrast sometimes is bad, please on a real app consider fixing this for a better UX.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.