Building a TailwindCSS Laravel with Email Verification Queued Jobs

Building a TailwindCSS-Powered Laravel Application with Email Verification and Queued Jobs

Introduction

This article provides a detailed walkthrough on building a Laravel application with TailwindCSS. We will cover how to implement a custom user registration system that leverages Laravel's queue system to send email verification links. By following this guide, you will learn how to set up a modern and efficient user registration process, complete with email verification and job queues for better performance and user experience.

Prerequisites

Before we begin, make sure you have the following installed:

PHP
Composer
Laravel
XAMPP or any local server environment
Node.js and npm

Step 1: Setting Up the Laravel Project

Create a new Laravel project:

laravel new laravel-email-sending-with-queues
cd laravel-email-sending-with-queues

The full source code for this project is available on GitHub at the following link: new laravel-email-sending-with-queues

Configure environment settings in .env:

QUEUE_CONNECTION=database

Step 2: Implementing User Registration

Create the Registration Controller:

php artisan make:controller AuthController

Add Registration Logic in AuthController:

public function register(Request $request)
{
    $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|string|email|max:255|unique:users',
        'password' => 'required|string|min:8|confirmed',
    ]);

    $user = User::create([
        'name' => $request->name,
        'email' => $request->email,
        'password' => Hash::make($request->password),
        'email_verified_at' => null,
        'verification_token' => Str::random(60),
        'token_expires_at' => Carbon::now()->addMinutes(5),
    ]);

    // Dispatch verification email job
    SendVerificationEmail::dispatch($user);

    return redirect('/')->with('success', 'Registration successful! Please check your email to verify your account.');
}

Step 3: Sending Verification Email Using Queue

Create Email Job:

php artisan make:job SendVerificationEmail

Modify Job to Send Email:

public function handle()
{
    Mail::to($this->user->email)->send(new VerifyEmail($this->user));
}

Ensure Queue Worker is Running:

php artisan queue:work

Step 4: Creating and Sending Verification Email

Create VerifyEmail Mailable:

php artisan make:mail VerifyEmail --markdown=emails.verify

Modify VerifyEmail Mailable:

public function build()
{
    return $this->markdown('emails.verify')->with([
        'token' => $this->user->verification_token,
    ]);
}

Step 5: Verification Email Template

Create Email Template emails/verify.blade.php:

@component('mail::message')
# Verify Your Email

Please click the button below to verify your email address.

@component('mail::button', ['url' => url('/verify-email/' . $token)])
Verify Email
@endcomponent

This verification link will expire in 5 minutes.

Thanks,<br>
{{ config('app.name') }}
@endcomponent

Email in inbox

Conclusion

By following this guide, you have successfully created a Laravel application with a custom user registration system. The use of TailwindCSS provides a modern and responsive design, while the queue system ensures efficient email verification. This setup not only enhances the user experience but also improves the application's performance.

Feel free to customize the project further and share your experience in the comments below!

Happy coding!