Laravel TALL Stack example code

1. Set up the project:
- Create a new Laravel project using the `laravel new` command.
- Install Tailwind CSS and its dependencies:

     composer require laravel/ui
     php artisan ui tailwind
     npm install
     npm run dev
     

     composer require livewire/livewire
     

     npm install alpinejs
     

2. Create a Livewire component:
- Generate a new Livewire component using the `php artisan make:livewire` command:

     php artisan make:livewire todo-list
     

php
     <?php

     namespace App\Http\Livewire;

     use Livewire\Component;

     class TodoList extends Component
     {
         public $newTodo = '';
         public $todos = [];

         public function addTodo()
         {
             $this->todos[] = [
                 'title' => $this->newTodo,
                 'completed' => false,
             ];
             $this->newTodo = '';
         }

         public function toggleTodo($index)
         {
             $this->todos[$index]['completed'] = !$this->todos[$index]['completed'];
         }

         public function removeTodo($index)
         {
             unset($this->todos[$index]);
             $this->todos = array_values($this->todos);
         }

         public function render()
         {
             return view('livewire.todo-list');
         }
     }
     

3. Create the Blade view:
- Open the generated `resources/views/livewire/todo-list.blade.php` file and add the following code:

html
     <div class="p-6 bg-white rounded-lg shadow-md">
         <h2 class="text-2xl font-bold mb-4">Todo List</h2>

         <div class="mb-4">
             <input wire:model="newTodo" type="text" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Add a new todo" />
             <button wire:click="addTodo" class="mt-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add</button>
         </div>

         <div class="space-y-2">
             @foreach ($todos as $index => $todo)
                 <div class="flex items-center justify-between bg-gray-100 px-4 py-2 rounded-md">
                     <div class="flex items-center">
                         <input type="checkbox" wire:click="toggleTodo({{ $index }})" class="mr-2" {{ $todo['completed'] ? 'checked' : '' }} />
                         <span class="{{ $todo['completed'] ? 'line-through text-gray-500' : '' }}">{{ $todo['title'] }}</span>
                     </div>
                     <button wire:click="removeTodo({{ $index }})" class="text-red-500 hover:text-red-600">Remove</button>
                 </div>
             @endforeach
         </div>
     </div>
     

4. Add Alpine.js:
- Open the `resources/views/layouts/app.blade.php` file and add the following script tag at the bottom of the `` section:

html
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
     

5. Style with Tailwind CSS:
- Open the `resources/css/app.css` file and add the following Tailwind CSS directives:

css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     

6. Use the Livewire component:
- Open the `resources/views/welcome.blade.php` file and replace the content with the following:

html
     <x-app-layout>
         <x-slot name="header">
             <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                 Todo List
             </h2>
         </x-slot>

         <div class="py-12">
             <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                 <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                     <div class="p-6 bg-white border-b border-gray-200">
                         <livewire:todo-list />
                     </div>
                 </div>
             </div>
         </div>
     </x-app-layout>
     

This example demonstrates how you can use the TALL stack to build a simple Todo List application. The Livewire component handles the logic for adding, toggling, and removing todos, while Tailwind CSS provides the styling and Alpine.js adds interactivity to the UI.

You can further customize this example by adding more features, such as authentication, teams, and other Jetstream-provided functionality, to create a more robust application.