Introduction
Project Setup
Building Vue.js Admin Panel
-
Tailwind.css Crash Course (13:33)
-
Generate Vue.js project with Vite (1:42)
-
Add Tailwindcss to Vue.js Project (3:27)
-
Install vuex and create store (3:42)
-
Install vue-router and create routes (5:11)
-
Create Login form page (6:03)
-
Create request password reset and reset password pages (12:09)
-
Create Layout for guest users (10:27)
-
Create Empty Layout for Authorized Users (5:25)
-
Create Sidebar (16:52)
-
Create Navbar (13:21)
-
Create and Implement Sidebar toggle button (9:10)
-
Make Layout Responsive (5:37)
-
Handle Unauthorized Users to Redirect to Login Page (4:59)
-
Create Not Found Page (12:33)
-
Project Source Code
Connect Vue.js Admin Panel to Laravel API
-
Create Admin User Seeder (4:07)
-
Implement Login and Logout for Admin in Laravel (7:18)
-
Install and Configure axios in Vue.js (5:26)
-
Implement Login/Logout Full Flow (15:10)
-
Show Validation Error Messages in Login Form (12:37)
-
Add Splash Screen Loader and Output User in Navbar (14:44)
-
Project Source Code
Products CRUD in Vue.js Admin with Laravel API
-
Implement Product CRUD in Laravel API (14:01)
-
Create Vue.js Spinner Component (3:32)
-
Create Products Table in Vue.js (3:35)
-
Connect Products Table Vue.js Component to API (11:22)
-
Implement Pagination (13:26)
-
Implement Per Page and Search in Products (5:19)
-
Products sorting (19:54)
-
Refactor Product Component (3:34)
-
Create Empty Product Modal (7:33)
-
Implement Product Creation Modal Component (21:03)
-
Connect Product Create Modal to Laravel API (12:50)
-
Product Delete (6:50)
-
Product update (11:01)
-
Add Animation to Products Table (3:34)
-
Move API Controllers into Api Folder (1:10)
-
Testing products CRUD (1:54)
-
Project Source Code
Start Working on Website Frontend
-
Download the Frontend Theme (2:11)
-
Install Laravel Breeze (3:58)
-
Integrate E-commerce Theme into Laravel (20:55)
-
Create Login Form with Theme Design (15:04)
-
Create Password Reset Form (4:30)
-
Create Signup Form (8:55)
-
Render Products on Website Part 1 (10:02)
-
Render Products on Website Part 2 (2:42)
-
Send Email on Customer Registration (7:14)
-
Customize Email Templates (10:43)
-
Create Empty Product Page (7:36)
-
Display Product Details Page (8:34)
-
Project Source Code
Shopping Cart Functionality
-
Create Cart Helper with reusable methods (12:50)
-
Create CartController (10:50)
-
Prepare API Routes for Cart Management (3:51)
-
Create middleware guestOrVerified (2:27)
-
Prepare JavaScript for Add to Cart (10:50)
-
Implement Adding Items into Cart (7:34)
-
Create Cart Page Part 1 (16:15)
-
Create Cart Page Part 2 (5:30)
-
Show Cart Subtotal and Checkout Button (4:40)
-
Implement Add to Cart from Product inner Page (5:31)
-
Project Source Code
Customer Profile Management
-
Rename customer id into user_id (3:04)
-
Insert Customer in DB on Cegistration (2:28)
-
Change Countries States Column into JSON (2:56)
-
Setup Eloquent Model Relations from Customer to Addresses and to User (6:07)
-
Create Profile Controller (4:01)
-
Create ProfileRequest (12:28)
-
Create Customer Details Form (16:44)
-
Implement Customer Details Update (10:44)
-
Implement Password update (6:16)
-
Project Source Code
Stripe Checkout & Orders
-
Stripe Online Payments Checkout Part 1 (28:23)
-
Stripe Online Payments Checkout Part 2 (11:27)
-
Stripe Online Payments Checkout Part 3 (21:44)
-
Stripe Online Payments Checkout Part 4 (13:05)
-
Create Order List Page for Customers (19:46)
-
Implement Payment of Unpaid Orders (16:31)
-
Stripe Webhooks Part 1 (18:43)
-
Stripe Webhooks Part 2 (19:37)
-
Create Order Details Page (20:00)
-
Project Source Code
Output all Orders in Vue.js Admin Panel
-
Create Orders Table Component (8:38)
-
Load Data into Orders Table (19:14)
-
Prepare API for Order Details Page (11:50)
-
Create Final version of OrderResource (15:37)
-
Create Order Details Page (20:08)
-
Implement Order Status Update from Admin (21:50)
-
Display Notification on Order Status Update (15:52)
-
Create Mail classes for new order and order status update (12:43)
-
Final Test of Sending Emails (23:20)
-
Project Source Code
User Management in Admin Panel
Customer CRUD in Vue.js Admin Panel
-
Create Customer Table Component (11:49)
-
Prepare Laravel API Controller for Customers (13:19)
-
Create Customer Edit Form with Addresses (17:10)
-
Update CustomInput Component add Checkbox Support (7:56)
-
Implement Customer Update Part 1 (14:40)
-
Update CustomInput Component add Select Support (5:50)
-
Implement Country State Cascading dropdown (23:44)
-
Implement Customer Update Part 2 (9:18)
-
Implement Customer Search, by Name, Email, Phone (5:05)
-
Debugging Laravel Error (14:36)
-
Restrict Disabled Customer Login (5:26)
-
Project Source Code
Create Dashboard
-
Create Overall Information Cards (12:41)
-
Install vue-chartjs and Create Doughnut Chart (8:00)
-
Create Products and Customers Empty Cards (5:10)
-
Load Data From Backend for Dashboard Summary Cards (9:31)
-
Format Number as Currency (3:19)
-
Get Orders by Country and Load into Doughnut Chart (21:24)
-
Implement Loading Latest 5 Customers (14:13)
-
Display Latest 10 Orders (26:57)
-
Create Currency Formatting Filter (8:27)
-
Change Customer Modal into page and Link From Dashboard (15:07)
-
Add Animation to Dashboard Cards (3:05)
-
Implement Date Period Change (11:16)
-
Update Report Data by Chosen Date (10:26)
-
Project Source Code
Create Reports
-
Add Published column to Products Table (11:58)
-
Create Report Routes in Vue.js (8:07)
-
Create Reports Tab Components (2:51)
-
Apply Styles to Active Report Tab (1:47)
-
Create Reusable Trait (3:36)
-
Create Backend API Endpoint to Get Orders Data (9:56)
-
Process Orders Data for Charts (21:20)
-
Create Customers Report (7:33)
-
Implement Date Range Picker in Reports (19:00)
-
Create Reports
Deploy on production
-
Register on Hostinger.com for domain and hosting (4:24)
-
Choose your domain (2:24)
-
Setup web hosting & SSL (2:47)
-
Setup subdomain for admin panel (2:16)
-
Understand how we are going to deploy (4:03)
-
Connect to hosting server using SSH (4:39)
-
SSH basic commands (4:49)
-
Connect to server with public, private keys (9:43)
-
Installing Laravel using SSH (8:46)
-
Create MySQL database (7:38)
-
Deploy Vue.js admin panel (7:47)
-
Create and use business email address for email sending (7:52)
-
Configure stripe API keys (0:53)
-
Fix bug about creating new product (8:02)
-
Fix Laravel storage issue (3:57)
-
Configure Stripe Webhooks (5:02)
64 comments