Build and Deploy Laravel Ecommerce Website with Vue.js Admin Panel

Welcome to the course

Project Full Demo

Setup Working Environment

Understanding Database Schema

Generate Models and Empty Migrations

Write Migrations

Project Source Code

Section Overview

Tailwind.css Crash Course

Generate Vue.js project with Vite

Add Tailwindcss to Vue.js Project

Install vuex and create store

Install vue-router and create routes

Create Login form page

Create request password reset and reset password pages

Create Layout for guest users

Create Empty Layout for Authorized Users

Create Sidebar

Create Navbar

Create and Implement Sidebar toggle button

Make Layout Responsive

Handle Unauthorized Users to Redirect to Login Page

Create Not Found Page

Section Overview

Create Admin User Seeder

Implement Login and Logout for Admin in Laravel

Install and Configure axios in Vue.js

Implement Login/Logout Full Flow

Show Validation Error Messages in Login Form

Add Splash Screen Loader and Output User in Navbar

Section Overview

Implement Product CRUD in Laravel API

Create Vue.js Spinner Component

Create Products Table in Vue.js

Connect Products Table Vue.js Component to API

Implement Pagination

Implement Per Page and Search in Products

Products sorting

Refactor Product Component

Create Empty Product Modal

Implement Product Creation Modal Component

Connect Product Create Modal to Laravel API

Product Delete

Product update

Add Animation to Products Table

Move API Controllers into Api Folder

Testing products CRUD

Section Overview

Download the Frontend Theme

Install Laravel Breeze

Integrate E-commerce Theme into Laravel

Create Login Form with Theme Design

Create Password Reset Form

Create Signup Form

Render Products on Website Part 1

Render Products on Website Part 2

Send Email on Customer Registration

Customize Email Templates

Create Empty Product Page

Display Product Details Page

Section Overview

Create Cart Helper with reusable methods

Create CartController

Prepare API Routes for Cart Management

Create middleware guestOrVerified

Prepare JavaScript for Add to Cart

Implement Adding Items into Cart

Create Cart Page Part 1

Create Cart Page Part 2

Show Cart Subtotal and Checkout Button

Implement Add to Cart from Product inner Page

Section Overview

Rename customer id into user_id

Insert Customer in DB on Cegistration

Change Countries States Column into JSON

Setup Eloquent Model Relations from Customer to Addresses and to User

Create Profile Controller

Create ProfileRequest

Create Customer Details Form

Implement Customer Details Update

Implement Password update

Section Overview

Stripe Online Payments Checkout Part 1

Stripe Online Payments Checkout Part 2

Stripe Online Payments Checkout Part 3

Stripe Online Payments Checkout Part 4

Create Order List Page for Customers

Implement Payment of Unpaid Orders

Stripe Webhooks Part 1

Stripe Webhooks Part 2

Create Order Details Page

Section Overview

Create Orders Table Component

Load Data into Orders Table

Prepare API for Order Details Page

Create Final version of OrderResource

Create Order Details Page

Implement Order Status Update from Admin

Display Notification on Order Status Update

Create Mail classes for new order and order status update

Final Test of Sending Emails

Section Overview

Prepare UserController in Laravel API

Display Admin Users in Vue.js Admin Panel

Implement User Update and Delete

Section Overview

Create Customer Table Component

Prepare Laravel API Controller for Customers

Create Customer Edit Form with Addresses

Update CustomInput Component add Checkbox Support

Implement Customer Update Part 1

Update CustomInput Component add Select Support

Implement Country State Cascading dropdown

Implement Customer Update Part 2

Implement Customer Search, by Name, Email, Phone

Debugging Laravel Error

Restrict Disabled Customer Login

Section Overview

Create Overall Information Cards

Install vue-chartjs and Create Doughnut Chart

Create Products and Customers Empty Cards

Load Data From Backend for Dashboard Summary Cards

Format Number as Currency

Get Orders by Country and Load into Doughnut Chart

Implement Loading Latest 5 Customers

Display Latest 10 Orders

Create Currency Formatting Filter

Change Customer Modal into page and Link From Dashboard

Add Animation to Dashboard Cards

Implement Date Period Change

Update Report Data by Chosen Date

Section Overview

Add Published column to Products Table

Create Report Routes in Vue.js

Create Reports Tab Components

Apply Styles to Active Report Tab

Create Reusable Trait

Create Backend API Endpoint to Get Orders Data

Process Orders Data for Charts

Create Customers Report

Implement Date Range Picker in Reports

Section Overview

Register on Hostinger.com for domain and hosting

Choose your domain

Setup web hosting & SSL

Setup subdomain for admin panel

Understand how we are going to deploy

Connect to hosting server using SSH

SSH basic commands

Connect to server with public, private keys

Installing Laravel using SSH

Create MySQL database

Deploy Vue.js admin panel

Create and use business email address for email sending

Configure stripe API keys

Fix bug about creating new product

Fix Laravel storage issue

Section Overview

Install Debug bar and optimize queries

Upgrade to Laravel 10

Install Laravel Telescope, debug and optimize API queries

Add DB Transactions Part 1

Add DB Transactions Part 2

Write critical logs when an exception occures

Update to latest version of Stripe PHP

Fix customer editing if the customer does not have addresses

Show validation errors on customer update from admin

Don't allow to make the order if customer address information is not provided

Update Vite and change the default port

Section Overview

Change product modal into a product dedicated page

Show Notifications on product create, update and delete

Add Two buttons on product page and redirect user to products table

Add CKEditor for product description

Section Overview

Add quantity column to products table

Show the "product is out of stock" message on product page

Show error messages when adding item into the cart if it is out of stock

Check product quantity during checkout and restrict checkout process

Section Overview

Define product_images migration and move image data into there

Add relations to Product and ProductImage models

Define image attribute on Product model

Add noimage image in admin and in frontend side as well

Create Image Preview component for image uploading

Implement image remove before file is uploaded

Implement image delete

Preview existing images

Implement saving multiple images

Fix bug of showing correct list of images on product update

Output multiple images on the website

Implement deleted image revert

Save images with random names on file system

Implement image ordering in Vue.js

Implement Image ordering in backend

Section Overview

Generate Category model, migration, controller, resources and requests

Implement category CRUD on backend side

Category CRUD on frontend Part 1

Category CRUD on frontend Part 2

Assign categories to product part 1 - Create product_categories table

Assign categories to product part 2 - Install Vue treeselect component

Assign categories to product part 3 - Save Categories on product

Assign categories to product part 3 - Implement get categories as tree

Remove ProductModal component and cleanup Products and ProductsTable components in Vue.js

Output categories as tree on home page

Implement filtering products by category on website

Implement filtering products by sub category on website

Implement sorting of categories by name in category dropdown in admin panel

Section Overview

Show proper validation errors in product form on product create/udpate

Pass images to stripe during checkout

Implement searching for products by keyword on website

Implement sorting of products Part 1

Implement sorting of products Part 2

Upgrade to Laravel 11

Upgrade Application Structure to Laravel 11