--- title: "Building a Real-Time Product Filtering System with Livewire in Laravel – Part 1" description: "This comprehensive multi part guide on using Livewire to build a real-time product filtering system in Laravel." url: "https://sajdoko.com/blog/building-a-real-time-product-filtering-system-with-livewire-in-laravel/" language: "en" content_signal: "ai-train=no, search=yes, ai-input=yes" --- # Building a Real-Time Product Filtering System with Livewire in Laravel – Part 1 15 November 2024·4 minutes read·[Laravel](https://sajdoko.com/blog/category/laravel/) This guide sets up a Laravel project for a Livewire product filter. It covers installation, the database and the product structure used in the series. ## What We’ll Build Together The filter we build in this series will let users: - Filter products by category, price range, and availability in real-time. - Clear or reset filters easily. - Experience smooth interactions without page reloads. - Enjoy a responsive and visually appealing UI. By the end of this guide, you’ll have a robust filtering system and the knowledge to extend it with advanced features like saved filters, animations, and more. Let’s get started by setting up our environment and creating the building blocks for our application. ## Why Livewire for Real-Time Filtering? Livewire is a Laravel package that simplifies building dynamic, reactive applications by allowing you to write most of the logic in PHP while still achieving the responsiveness of modern JavaScript frameworks. Here are some reasons why Livewire is perfect for this use case: - It uses Laravel components for the server-side application. - Real-time updates are handled effortlessly with its reactive data binding. - It eliminates the need for a separate frontend framework, such as React or Vue. - Writing backend and frontend logic in one place makes it beginner-friendly and efficient. ## Setting Up the Laravel Project Let’s begin by setting up a new Laravel project: ``` composer create-project laravel/laravel livewire-filtering ``` Navigate to the project directory: ``` cd livewire-filtering ``` Start the development server: ``` php artisan serve ``` Open [http://localhost:8000](http://localhost:8000) in your browser to see the default Laravel welcome page. ## Installing Livewire Next, we’ll install Livewire. Run the following command: ``` composer require livewire/livewire ``` After installation, publish Livewire’s configuration and assets: ``` php artisan livewire:publish ``` With Livewire installed, we’re ready to create components and add interactivity to our application. ## Creating a Database and Configuring Laravel We’ll need a database to store product data. Create a new database named `livewire_filtering` using a tool like phpMyAdmin or MySQL Workbench. Update the `.env` file with your database credentials: ``` DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=livewire_filtering DB_USERNAME=root DB_PASSWORD=yourpassword ``` Run Laravel’s migration command to create default tables: ``` php artisan migrate ``` Now your Laravel application is connected to a database and ready to store data. ## Creating a Livewire Component Let’s create our first Livewire component for filtering products: ``` php artisan make:livewire ProductFilter ``` This generates two files: - A PHP class at `app/Http/Livewire/ProductFilter.php`, where we’ll define the logic for filtering products. - A Blade template at `resources/views/livewire/product-filter.blade.php`, which will render the filtered products. ## Designing the Product Display We need a basic structure to display products dynamically. Now, let’s create the `Product` model along with its migration file: ``` php artisan make:model Product -m ``` This command generates a `Product` model in `app/Models/Product.php` and a migration file in the `database/migrations` directory. Edit the migration file to define the table structure: ``` Schema::create('products', function (Blueprint $table) { $table->id(); $table->string('name'); $table->decimal('price', 8, 2); $table->string('category'); $table->boolean('available')->default(true); $table->timestamps(); });  ``` Run the migration: ``` php artisan migrate ``` Seed the database with sample products using a seeder: ``` php artisan make:seeder ProductSeeder ``` In the seeder file, add sample data: ``` 'Laptop', 'price' => 1000, 'category' => 'electronics', 'available' => true]); Product::create(['name' => 'Sofa', 'price' => 500, 'category' => 'home', 'available' => false]); Product::create(['name' => 'Watch', 'price' => 150, 'category' => 'fashion', 'available' => true]); Product::create(['name' => 'Headphones', 'price' => 200, 'category' => 'electronics', 'available' => true]); Product::create(['name' => 'Table', 'price' => 300, 'category' => 'home', 'available' => true]); Product::create(['name' => 'Shirt', 'price' => 50, 'category' => 'fashion', 'available' => false]); Product::create(['name' => 'Phone', 'price' => 800, 'category' => 'electronics', 'available' => true]); Product::create(['name' => 'Bed', 'price' => 700, 'category' => 'home', 'available' => true]); Product::create(['name' => 'Shoes', 'price' => 100, 'category' => 'fashion', 'available' => true]); Product::create(['name' => 'Camera', 'price' => 400, 'category' => 'electronics', 'available' => false]); Product::create(['name' => 'Chair', 'price' => 150, 'category' => 'home', 'available' => true]); Product::create(['name' => 'Jeans', 'price' => 70, 'category' => 'fashion', 'available' => true]); } } ``` Run the seeder: ``` php artisan db:seed --class=ProductSeeder ``` ## Next Steps The Laravel project, Livewire installation and product database structure are ready. The next part builds the filtering interface and displays the products. If you encounter a setup error, include the error message and the step where it occurred in the comments. ### Part 2: [Building the Core of a Livewire Product Filter](https://sajdoko.com/blog/building-the-core-of-a-livewire-product-filter/) - [Development](https://sajdoko.com/blog/category/development/) - [Laravel](https://sajdoko.com/blog/category/laravel/) ## Have a project in mind? Write to us and we come back with a concrete estimate within one working day. [Contact us →](https://sajdoko.com/contact/) ## Leave a comment [Cancel](https://sajdoko.com/blog/building-a-real-time-product-filtering-system-with-livewire-in-laravel/?format=markdown#respond) ## Recent Posts - [Fleet management software: what do you need beyond GPS?](https://sajdoko.com/blog/fleet-management-software-requirements-beyond-gps/) - [Custom CRM Development vs Generic SaaS: The ROI Framework for Growing Enterprises](https://sajdoko.com/blog/custom-crm-development-vs-generic-saas/) - [Web and Software Development Costs in Albania: The International Buyer’s Strategic Guide](https://sajdoko.com/blog/website-costs-in-albania-international-perspective/) - [Scaling WooCommerce Performance: Eliminating High-Traffic Checkout Bottlenecks](https://sajdoko.com/blog/scaling-woocommerce-performance-checkout-bottlenecks/) - [The Hidden Cost of Cheap or “Free” Websites: Why €100 Web Design Costs €3,000 Later](https://sajdoko.com/blog/the-hidden-cost-of-cheap-or-free-websites/) ## Recent Comments 1. Alvaro on [Optimizing and Extending the Livewire Product Filter – Part 4](https://sajdoko.com/blog/optimizing-and-extending-the-livewire-product-filter/#comment-4) 2. [sajdoko](https://sajdoko.com) on [How to Set Up WordPress on localhost Using XAMPP: A Step-by-Step Guide](https://sajdoko.com/blog/how-to-install-wordpress-on-localhost-using-xampp-step-by-step-guide/#comment-3) 3. Roshni on [How to Set Up WordPress on localhost Using XAMPP: A Step-by-Step Guide](https://sajdoko.com/blog/how-to-install-wordpress-on-localhost-using-xampp-step-by-step-guide/#comment-2)