Livewire & Alpine web app redesign from the ground

I am React and Laravel web app developer. I have decided to re-setup or re-design one of my web apps with Livewire and Alpine from the ground. during this conversion, I share with you the sense, problems, needs and so on.
the web app is multilingual (en and ar), has complicated model relations with modal, Ajax and…


  1. navigating between view and class of a component is frustrating, especially when the livewire components go high. it is better a folder named livewire with two subfolder class and view.

  2. in modal there is other colors of a product and by click, on each color, I want to add a class (isactive) to that clicked other color, it was what I did in Alpine by @click and :class instead of addClass and removeClass in jquery:

            <div x-data="{id:null}">
                @foreach($product->othercolors as $color)
                  <img wire:click="theOtherColor({{ $color->id }})" @click="id = {{ $color->id }}"  **:class="{'isactive': id === {{ $color->id }}}"** src="{{ asset('images/colors/' . $color->image) }}">


  1. I use IntelliJ and a dedicated plugin to cover livewire seems is a need.
  2. in modal section the x-data, x-show is fantastic, clear and less jquery.
1 Like

Hey mehdiyaq,

Nicely done, keep going!
I’m currently working on redesigning my own website and looking for successful examples.

I’d recommend you reading this guide on redesigning, it contains all the steps to be taken to succeed in restyling websites and web applications.
The simplest yet the most effective piece of advice there is that analyzing your competitors’ websites is essential in creating a nice UI / UX.
Basically, there is no need to reinvent the wheel, just look through good websites and pick the best solutions to implement in your website.

Please, keep us updated about your redesign process, and good luck!

1 Like


thank you for informing me and sharing.


Totolly agree with you on this point. Something have to be done for that. Way too much back and fourth between those file/folder. A big loss in productivity. ,

1 Like