Completed
Livewire mini-projects
Some useful Livewire mini projects that you can use in your Laravel projects
Laravel
Livewire
Overview
Project #0 - Simple Counter
A single counter number with + and - buttons to increase or decrease the number. Simplest example how you can create dynamic page without writing JavaScript.
Project #1 - Calculator
Very simple Calculator with with +, -, *, /, % operations. It has two inputs and one dropdown for operation and = button to calculate result.
Project #2 - Simple todo list
Application made quantillion times. In this case it is made with livewire and Eloquent model. The data is saved, updated and deleted from the database.
Project #3 - Cascading dropdown
Cascading dropdown for continents and countries, you choose continent and countries are filtered based on it. Loading indicator is displayed while countries are loading
Project #4 - Product search and pagination
We have products table with multiple columns and pagination links and search input field. The data comes from the database and search keyword is saved in the URL. So when you refresh the page the content is filtered.
Project #5 - Image Upload
Possibility to upload multiple images.
Have preview before submitting.
Images are validated on submit.
Images are saved on local file system
All uploaded images are displayed even after page reload
Project #6 - Registration form validation
Very simple registration form with the following fields:
customer role (radio list with two options: customer, vendor),
first_name
last_name
email
password
company_name
vat_number
company_name and vat_number fields are only displayed and are required if role is vendor. When you submit the form validation messages are displayed. As soon as you type in the inputs realtime validation happens and error messages are updated or hidden. Every input has debounce on validation so that too many ajax requests are not sent.
When the validation passes, session flash message is displayed.
Gallery
Project Screenshots
More Work
Related Projects
Laravel Image Manipulation REST API
Simple image resize REST API project with Laravel. You can send your image with url or uploaded file, then set the width and height of your image and get the resized image. with url you send the width and height as url params. the height is optional but w
Next Step
Have a similar idea?
Let's talk about how we can build something reliable, scalable, and thoughtfully designed.
Get in Touch