Hi! I am working on an E-commerce store using Laravel as my backend technology, Vue and Tailwind CSS for the front end. This is a fresh application and I intend to share with you every step I take. So if you’re interested to learn how to build an e-commerce store using Laravel, Vue, and Tailwind, take a seat, and let’s begin on this journey together.
Just so you know, I am writing this app alone, no collaboration and this is my first time using Tailwind CSS. Tailwind CSS has become popular among developers so I thought I should give it a try. If somewhere along the way It does not fit my style then I may have to swap it for Bulma.
Here is what we are going to be doing today
- Setup and install a new Laravel project
- Setup authentication using Laravel Breeze
- Setup mail sending using mailtrap
1. How Setup and install a new Laravel project
I am running Laravel via Laragon, so it’s easy to just start a new Laravel application, but you can use whatever you like, homestead is a good option but can be a pain for newcomers. Here is an article to guide you on how to set up Homestead. Setup Homestead on Windows – Step by Step guide
Create a database for our E-Store using Laragon
- From the Laragon dashboard, Click on the Menu
- Click MySQL
- Click on Create database
- Enter database name
- Click ok
Setup database configuration on Laravel
- Open the .env file
- On line 13 where it says DB_DATABASE= type the name of the database you just created
Migrate Application Database
Open your console and run this code
php artisan migrate
Wait for it to finish migrating, then open your application on the browser using the application name and append .test at the end. e.g. mysite.test you should expect to see the app landing page containing the Laravel logo and some vital links to resources.
Setup authentication using Laravel Breeze
Now it’s time to set up additional pages so users can Register to our application, log in and reset passwords. This is a very complex task that requires a reasonable amount of time and it is a big part of our application. We need this in other to track a user’s orders, cart items, and many other activities on the app.
Now we can decide to go down the rabbit hole, trying to implement this logic on our own or we can use Laravel Breeze which will take away the pain and save us time.
How to setup authentication using Laravel Breeze
Laravel Breeze is a minimal, simple implementation of all of Laravel’s authentication features, including login, registration, password reset, email verification, and password confirmation. To begin:
Run this code to install Breeze
composer require laravel/breeze --dev
Next Run this code to setup breeze and install Laravel inertia, Vue and other dependencies.
php artisan breeze:install --inertia npm install npm run dev
And lastly, run this code to migrate authentication tables
php artisan migrate
3. Setup mail sending using mailtrap
I need to send a recovery email to users and also other mail functionality, for purpose of testing and development I will use mailtrap which is a service made specifically for faking email and when the application is ready to go life, I will swap the settings for mailgun.
Follow this link to learn how to integrate mailtrap to your application