Inicia con TALL: Usa Tailwind, Alpine, Laravel y Livewire

La base de todo será un proyecto Laravel, así que comienza con obtener un proyecto fresco de Laravel usando la versión más reciente.

Resolvamos algunas posibles confusiones con el uso de Laravel Vite sobre Laravel Mix.

Instala las dos dependencias principales para el proyecto: Livewire y Laravel Breeze (que te dará acceso a Tailwind y Alpine también).

Crea los modelos, migraciones y demás componentes de Laravel, que se usarán para almacenar y gestionar los suscriptores y usuarios de tu sistema.

Comienza con Laravel y el uso de Breeze, para tener acceso a Tailwind y Alpine, y de paso el sistema de autenticación de usuarios.

Es momento de conocer a Tailwind y usarlo para crear la apariencia inicial del landing page del sistema de suscriptores.

Finaliza con la aplicación y uso de Tailwind, completando la apariencia total del landing page para los usuarios de tu sistema de suscriptores.

Continúa ahora con Alpine.js y dale un poco de dinámica a ciertos componentes esenciales creados con Tailwind.

Termina de conocer el stack, introduciendo a Livewire. Un componente principal que le dará al proyecto una línea de comunicación inmediata con Laravel.

Usa Tailwind para crear un nuevo modal que se mostrará al momento de confirmar una acción de éxito (como suscribirse).

Ahora que tienes varios modales, es muy buena idea generalizar el código para evitar repetir y así de paso sacar ventaja de los componentes de Blade de Laravel.

El primer paso será asegurarte de insertar un suscriptor en la base de datos, en cuanto se envía el formulario del modal de suscripción. Todo, usando Livewire y el modelo Subscriber creado con Laravel.

Como siempre, es importante validar la información recibida por los usuarios. Usando Livewire, tendrás acceso al sistema de reglas de Laravel, y además mostrarás los detalles del problema en tiempo real para el usuario.

Ahora que ya se ha creado el suscriptor, usa los componentes de Laravel, para enviar un correo de confirmación y asegurarte que ese usuario sea el propietario de ese email.

Implementa las acciones en Laravel, que se aseguren de confirmar la cuenta de un usuario de forma correcta, una vez que el usuario hace uso del enlace de confirmación.

Conoce una nueva directiva de Alpine.js que permitirá sincronizar estados y variables en tiempo real entre Alpine y Livewire, permitiendo coordinar las acciones y los estados para tus usuarios.

Ahora que puedes coordinar los estados entre Alpine y Livewire, muestra el mensaje de confirmación del email a los usuarios inicializando el modal de éxito dadas las condiciones correctas.

Finaliza esta sección, conociendo algunas características útiles de Livewire para mejorar mucho más la experiencia de los usuarios en el sistema de suscriptores.

Adapta algunos componentes de Laravel, para facilitar la implementación del panel de administración.

Es momento de agregar algunas rutas, acciones del controlador y una vista, para resolver la lista completa de suscriptores.

Usa Tailwind CSS para mostrar adecuadamente la lista completa de suscriptores en una tabla agradable a la vista.

Teniendo todo listo, es momento de mover todo a un componente de Livewire y permitir remover un suscriptor existente.

Implementa una tarea que es usualmente compleja con Livewire, permitiendo buscar fácilmente y en tiempo real, en la lista de suscriptores.

Felicidades por terminar. Ahora, es momento de seguir tu camino y poner en práctica lo aprendido. Por supuesto, acá estaré en caso de dudas.

Antes de finalizar, déjame mostrarte el mundo de posibilidades que tienes para seguir aprendiendo conmigo y seguir creciendo juntos.