Laravel Ecommerce Website With Vue.Js Admin Panel

Building Full Stack Applications with Laravel, Tailwind.css, Vue.js and Alpine.js and Deploy on Custom Domain

What you'll learn

Build full stack apps with Laravel, Vue JS and Tailwind CSS from start to finish

Create Tailwind CSS + Vue JS responsive admin panel

How to build Laravel REST API and connect it to Vue JS Admin Panel

Deploy Laravel and Vue JS apps on custom domain

How to integrate Stripe online payments in your Laravel applications

Requirements

Good knowledge of Object Oriented Programming

Basic knowledge of Laravel

Basic knowledge of Vue JS

Description

Welcome to the world of E-commerce development with our comprehensive course on building and deploying Laravel E-commerce websites! Whether you're just starting out or looking to expand your skills, this course is designed to guide you through every step of the process, from setting up your development environment to deploying your project on a custom domain.Throughout this course, you'll learn how to build full stack applications using the latest technologies including Laravel, Vue.js, Tailwind.css, and Alpine.js. With over 33 hours of video content and 200+ videos, you'll dive deep into every aspect of E-commerce development, including building a responsive landing page, managing cart items, implementing online payments with Stripe, creating an admin dashboard with analytics, and much more.One of the highlights of this course is the hands-on project-based approach. You'll follow along as we build a fully functional E-commerce website, tackling real-world challenges such as debugging, problem-solving, and refactoring along the way. By the end of the course, you'll not only have a deep understanding of Laravel and Vue.js but also the skills to deploy your own projects and even connect to third-party APIs.Here's a glimpse of what you'll learn:Creating scalable Laravel projectsIntegrating Tailwind.css themes into LaravelImplementing Stripe online payments checkoutHandling Stripe Webhooks and email sending in LaravelDeveloping responsive admin panels with Tailwind.css and Vue.jsConnecting Vue.js apps to Laravel REST APIs for CRUD operationsDeploying Laravel projects on custom domains and configuring business email addressesAnd much more!Whether you're a beginner looking to build your first project or an experienced developer seeking to enhance your skills, this course is tailored for you. With lifetime access to course materials and a private Discord group for support, you'll have everything you need to succeed.So, if you're ready to take your E-commerce development skills to the next level, enroll today and join me on this exciting journey!

Overview

Section 1: Introduction

Lecture 1 Project Full Demo

Lecture 2 Prerequisites

Section 2: Project Setup

Lecture 3 Setup Working Environment

Lecture 4 Understanding Database Schema

Lecture 5 Generate Models and Empty Migrations

Lecture 6 Write Migrations

Lecture 7 Project Source Code

Lecture 8 Discord Server

Section 3: Building Vue.js Admin Panel

Lecture 9 Section Overview

Lecture 10 Tailwind.css Crash Course

Lecture 11 Generate Vue.js project with Vite

Lecture 12 Add Tailwindcss to Vue.js Project

Lecture 13 Install vuex and create store

Lecture 14 Install vue-router and create routes

Lecture 15 Create Login form page

Lecture 16 Create request password reset and reset password pages

Lecture 17 Create Layout for guest users

Lecture 18 Create Empty Layout for Authorized Users

Lecture 19 Create Admin Panel Sidebar

Lecture 20 Create Admin Panel Navbar

Lecture 21 Create and Implement Sidebar toggle button

Lecture 22 Make Layout Responsive

Lecture 23 Handle Unauthorized Users to Redirect to Login Page

Lecture 24 Create Not Found Page

Lecture 25 Project Source Code

Section 4: Connect Vue.js Admin Panel to Laravel API

Lecture 26 Section Overview

Lecture 27 Create Admin User Seeder in Laravel

Lecture 28 Implement Login and Logout for Admin Panel in Laravel

Lecture 29 Install and Configure axios in Vue.js

Lecture 30 Implement Login/Logout Full Process

Lecture 31 Show Validation Error Messages in Login Form

Lecture 32 Add Splash Screen and Output User in Navbar

Lecture 33 Project Source Code

Section 5: Products CRUD in Vue.js Admin with Laravel API

Lecture 34 Section Overview

Lecture 35 Implement Product CRUD in Laravel API

Lecture 36 Create Vue.js Spinner Component

Lecture 37 Create Products Table in Vue.js

Lecture 38 Connect Products Table Vue.js Component to API

Lecture 39 Implement Pagination

Lecture 40 Implement Per Page and Search in Products

Lecture 41 Products sorting

Lecture 42 Refactor Product Component

Lecture 43 Create Empty Product Modal

Lecture 44 Implement Product Creation Modal Component

Lecture 45 Connect Product Create Modal to Laravel API

Lecture 46 Product Delete

Lecture 47 Product update

Lecture 48 Add Animation to Products Table

Lecture 49 Move API Controllers into Api Folder

Lecture 50 Testing products CRUD

Lecture 51 Project Source Code

Section 6: Start Working on Website Frontend

Lecture 52 Section Overview

Lecture 53 Download the Frontend Theme

Lecture 54 Install Laravel Breeze

Lecture 55 Integrate E-commerce Theme into Laravel

Lecture 56 Create Login Form with Theme Design

Lecture 57 Create Password Reset Form

Lecture 58 Create Signup Form

Lecture 59 Render Products on Website Part 1

Lecture 60 Render Products on Website Part 2

Lecture 61 Send Email on Customer Registration

Lecture 62 Customize Email Templates

Lecture 63 Create Empty Product Page

Lecture 64 Display Product Details Page

Lecture 65 Project Source Code

Section 7: Shopping Cart Functionality

Lecture 66 Section Overview

Lecture 67 Create Cart Helper with reusable methods

Lecture 68 Create CartController

Lecture 69 Prepare API Routes for Cart Management

Lecture 70 Create middleware guestOrVerified

Lecture 71 Prepare JavaScript for Add to Cart

Lecture 72 Implement Adding Items into Cart

Lecture 73 Create Cart Page Part 1

Lecture 74 Create Cart Page Part 2

Lecture 75 Show Cart Subtotal and Checkout Button

Lecture 76 Implement Add to Cart from Product inner Page

Lecture 77 Project Source Code

Section 8: Customer Profile Management

Lecture 78 Section Overview

Lecture 79 Rename customer id into user_id

Lecture 80 Insert Customer in DB on Cegistration

Lecture 81 Change Countries States Column into JSON

Lecture 82 Setup Eloquent Model Relations from Customer to Addresses and to User

Lecture 83 Create Profile Controller

Lecture 84 Create ProfileRequest

Lecture 85 Create Customer Details Form

Lecture 86 Implement Customer Details Update

Lecture 87 Implement Password update

Lecture 88 Project Source Code

Section 9: Stripe Checkout & Orders

Lecture 89 Section Overview

Lecture 90 Stripe Online Payments Checkout Part 1

Lecture 91 Stripe Online Payments Checkout Part 2

Lecture 92 Stripe Online Payments Checkout Part 3

Lecture 93 Stripe Online Payments Checkout Part 4

Lecture 94 Create Order List Page for Customers

Lecture 95 Implement Payment of Unpaid Orders

Lecture 96 Stripe Webhooks Part 1

Lecture 97 Stripe Webhooks Part 2

Lecture 98 Create Order Details Page

Lecture 99 Project Source Code

Section 10: Output all Orders in Vue.js Admin Panel

Lecture 100 Section Overview

Lecture 101 Create Orders Table Component

Lecture 102 Load Data into Orders Table

Lecture 103 Prepare API for Order Details Page

Lecture 104 Create Final version of OrderResource

Lecture 105 Create Order Details Page

Lecture 106 Implement Order Status Update from Admin

Lecture 107 Display Notification on Order Status Update

Lecture 108 Create Mail classes for new order and order status update

Lecture 109 Final Test of Sending Emails

Lecture 110 Project Source Code

Section 11: User Management in Admin Panel

Lecture 111 Section Overview

Lecture 112 Prepare UserController in Laravel API

Lecture 113 Display Admin Users in Vue.js Admin Panel

Lecture 114 Implement User Update and Delete

Section 12: Customer CRUD in Vue.js Admin Panel

Lecture 115 Section Overview

Lecture 116 Create Customer Table Component

Lecture 117 Prepare Laravel API Controller for Customers

Lecture 118 Create Customer Edit Form with Addresses

Lecture 119 Update CustomInput Component add Checkbox Support

Lecture 120 Implement Customer Update Part 1

Lecture 121 Update CustomInput Component add Select Support

Lecture 122 Implement Country State Cascading dropdown

Lecture 123 Implement Customer Update Part 2

Lecture 124 Implement Customer Search, by Name, Email, Phone

Lecture 125 Debugging Laravel Error

Lecture 126 Restrict Disabled Customer Login

Lecture 127 Project Source Code

Section 13: Create Dashboard

Lecture 128 Section Overview

Lecture 129 Create Overall Information Cards

Lecture 130 Install vue-chartjs and Create Doughnut Chart

Lecture 131 Create Products and Customers Empty Cards

Lecture 132 Load Data From Backend for Dashboard Summary Cards

Lecture 133 Format Number as Currency

Lecture 134 Get Orders by Country and Load into Doughnut Chart

Lecture 135 Implement Loading Latest 5 Customers

Lecture 136 Display Latest 10 Orders

Lecture 137 Create Currency Formatting Filter

Lecture 138 Change Customer Modal into page and Link From Dashboard

Lecture 139 Add Animation to Dashboard Cards

Lecture 140 Implement Date Period Change

Lecture 141 Update Report Data by Chosen Date

Lecture 142 Project Source Code

Section 14: Create Reports

Lecture 143 Section Overview

Lecture 144 Add Published column to Products Table

Lecture 145 Create Report Routes in Vue.js

Lecture 146 Create Reports Tab Components

Lecture 147 Apply Styles to Active Report Tab

Lecture 148 Create Reusable Trait

Lecture 149 Create Backend API Endpoint to Get Orders Data

Lecture 150 Process Orders Data for Charts

Lecture 151 Create Customers Report

Lecture 152 Implement Date Range Picker in Reports

Lecture 153 Project Source Code

Section 15: Deploy on production

Lecture 154 Section Overview

Lecture 155 Register on Hostinger.com for domain and hosting

Lecture 156 Choose your domain

Lecture 157 Setup web hosting & SSL

Lecture 158 Setup subdomain for admin panel

Lecture 159 Understand how we are going to deploy

Lecture 160 Connect to hosting server using SSH

Lecture 161 SSH basic commands

Lecture 162 Connect to server with public, private keys

Lecture 163 Installing Laravel using SSH

Lecture 164 Create MySQL database

Lecture 165 Deploy Vue.js admin panel

Lecture 166 Create and use business email address for email sending

Lecture 167 Configure stripe API keys

Lecture 168 Fix bug about creating new product

Lecture 169 Fix Laravel storage issue

Lecture 170 Configure Stripe Webhooks

Section 16: Bug Fixing and Optimization

Lecture 171 Section Overview

Lecture 172 Install Debug bar and optimize queries

Lecture 173 Upgrade to Laravel 10

Lecture 174 Install Laravel Telescope, debug and optimize API queries

Lecture 175 Add DB Transactions Part 1

Lecture 176 Add DB Transactions Part 2

Lecture 177 Write critical logs when an exception occures

Lecture 178 Update to latest version of Stripe PHP

Lecture 179 Fix customer editing if the customer does not have addresses

Lecture 180 Show validation errors on customer update from admin

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

Lecture 182 Update Vite and change the default port

Lecture 183 Fix customer delete bug

Section 17: Product Improvements

Lecture 184 Section Overview

Lecture 185 Change product modal into a product dedicated page

Lecture 186 Show Notifications on product create, update and delete

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

Lecture 188 Add CKEditor for product description

Lecture 189 Output CKEditor content correctly on frontend

Section 18: Stock Management

Lecture 190 Section Overview

Lecture 191 Add quantity column to products table

Lecture 192 Add quantity column to products table

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

Lecture 194 Check product quantity during checkout and restrict checkout process

Lecture 195 Increase product quantity when order is cancelled

Section 19: Multiple Images on Products

Lecture 196 Section Overview

Lecture 197 Define product_images migration and move image data into there

Lecture 198 Add relations to Product and ProductImage models

Lecture 199 Define image attribute on Product model

Lecture 200 Add noimage image in admin and in frontend side as well

Lecture 201 Create Image Preview component for image uploading

Lecture 202 Implement image remove before file is uploaded

Lecture 203 Implement image delete

Lecture 204 Preview existing images

Lecture 205 Implement saving multiple images

Lecture 206 Fix bug of showing correct list of images on product update

Lecture 207 Output multiple images on the website

Lecture 208 Implement deleted image revert

Lecture 209 Save images with random names on file system

Lecture 210 Implement image ordering in Vue.js

Lecture 211 Implement Image ordering in backend

Lecture 212 Fix bug when images were not uploaded during product creation

Section 20: Add Product Categories

Lecture 213 Section Overview

Lecture 214 Generate Category model, migration, controller, resources and requests

Lecture 215 Implement category CRUD on backend side

Lecture 216 Category CRUD on frontend Part 1

Lecture 217 Category CRUD on frontend Part 2

Lecture 218 Assign categories to product part 1 - Create product_categories table

Lecture 219 Assign categories to product part 2 - Install Vue treeselect component

Lecture 220 Assign categories to product part 3 - Save Categories on product

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

Lecture 222 Remove ProductModal component and cleanup Products and ProductsTable components

Lecture 223 Output categories as tree on home page

Lecture 224 Implement filtering products by category on website

Lecture 225 Implement filtering products by sub category on website

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

Lecture 227 Restrict choosing child category as parent during category update

Section 21: More Product Improvements

Lecture 228 Section Overview

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

Lecture 230 Pass images to stripe during checkout

Lecture 231 Implement searching for products by keyword on website

Lecture 232 Implement sorting of products Part 1

Lecture 233 Implement sorting of products Part 2

Section 22: Upgrade to Laravel 11

Lecture 234 Upgrade to Laravel 11

Lecture 235 Upgrade Application Structure to Laravel 11

Lecture 236 Update vite packages

This course is ideal for people who just started learning Laravel and Vue JS and want to build some cool project.,This course is excellent for you if you want to see the full working process of building application from an experienced developer,This course is good for you if you are looking for awesome project to put in your portfolio