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