Build an E-Commerce Store Using Laravel, Vue, and Tailwind.

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.

Kick off

Here is what we are going to be doing today

  1. Setup and install a new Laravel project
  2. Setup authentication using Laravel Breeze
  3. 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 new app using laragon

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

Faker Mail – Setup mail sending using mailtrap for Laravel

1 thought on “Build an E-Commerce Store Using Laravel, Vue, and Tailwind.”

Leave a Comment

%d bloggers like this: