Project Setup
Building Vue.js Admin Panel
-
Section Overview (0:46)
-
Tailwind.css Crash Course (13:33)
-
Generate Vue.js project with Vite (4:01)
-
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
-
Section Overview (0:22)
-
Create Admin User Seeder (4:07)
-
Implement Login and Logout for Admin in Laravel (10:00)
-
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
-
Section Overview (0:39)
-
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:30)
-
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
-
Section Overview (0:29)
-
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
-
Section Overview (1:19)
-
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
-
Section Overview (0:13)
-
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
-
Section Overview (1:30)
-
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:48)
-
Stripe Webhooks Part 2 (19:37)
-
Create Order Details Page (20:00)
-
Project Source Code
Output all Orders in Vue.js Admin Panel
-
Section Overview (0:44)
-
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
-
Section Overview (0:33)
-
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
-
Section Overview (0:41)
-
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
-
Section Overview (0:42)
-
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)
-
Project Source Code
Deploy on production
-
Section Overview (0:39)
-
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)
Bug Fixing and Optimization
-
Section Overview (1:07)
-
Install Debug bar and optimize queries (9:49)
-
Upgrade to Laravel 10 (10:43)
-
Install Laravel Telescope, debug and optimize API queries (19:38)
-
Add DB Transactions Part 1 (8:52)
-
Add DB Transactions Part 2 (7:35)
-
Write critical logs when an exception occures (3:47)
-
Update to latest version of Stripe PHP (7:31)
-
Fix customer editing if the customer does not have addresses (6:41)
-
Show validation errors on customer update from admin (12:21)
-
Don't allow to make the order if customer address information is not provided (6:30)
-
Update Vite and change the default port (3:56)
-
Fix customer delete bug (3:15)
Product Improvements
-
Section Overview (0:25)
-
Change product modal into a product dedicated page (18:35)
-
Show Notifications on product create, update and delete (2:26)
-
Add Two buttons on product page and redirect user to products table (6:48)
-
Add CKEditor for product description (14:51)
-
Output CKEditor content correctly on frontend (4:01)
Stock Management
-
Section Overview (0:39)
-
Add quantity column to products table (9:04)
-
Show the "product is out of stock" message on product page (6:21)
-
Show error messages when adding item into the cart if it is out of stock (17:03)
-
Check product quantity during checkout and restrict checkout process (7:21)
-
Increase product quantity when order is cancelled (5:15)
Multiple Images on Products
-
Section Overview (0:58)
-
Define product_images migration and move image data into there (19:19)
-
Add relations to Product and ProductImage models (1:41)
-
Define image attribute on Product model (1:44)
-
Add noimage image in admin and in frontend side as well (4:38)
-
Create Image Preview component for image uploading (14:53)
-
Implement image remove before file is uploaded (11:37)
-
Implement image delete (14:50)
-
Preview existing images (6:10)
-
Implement saving multiple images (16:39)
-
Fix bug of showing correct list of images on product update (2:17)
-
Output multiple images on the website (7:15)
-
Implement deleted image revert (6:00)
-
Save images with random names on file system (6:05)
-
Implement image ordering in Vue.js (30:37)
-
Implement Image ordering in backend (5:52)
-
Fix bug when images were not uploaded during product creation (3:40)
Add Product Categoriees
-
Section Overview (1:13)
-
Generate Category model, migration, controller, resources and requests (6:08)
-
Implement category CRUD on backend side (8:55)
-
Category CRUD on frontend Part 1 (16:21)
-
Category CRUD on frontend Part 2 (25:41)
-
Assign categories to product part 1 - Create product_categories table (6:02)
-
Assign categories to product part 2 - Install Vue treeselect component (6:07)
-
Assign categories to product part 3 - Save Categories on product (7:40)
-
Assign categories to product part 3 - Implement get categories as tree (21:05)
-
Remove ProductModal component and cleanup Products and ProductsTable components in Vue.js (4:02)
-
Output categories as tree on home page (17:26)
-
Implement filtering products by category on website (3:57)
-
Implement filtering products by sub category on website (10:28)
-
Implement sorting of categories by name in category dropdown in admin panel (4:49)
-
Restrict choosing child category as parent during category update (16:07)
More Product Improvements
-
Section Overview (0:23)
-
Show proper validation errors in product form on product create/udpate (6:13)
-
Pass images to stripe during checkout (6:03)
-
Implement searching for products by keyword on website (11:25)
-
Implement sorting of products Part 1 (19:56)
-
Implement sorting of products Part 2 (3:21)
-
Source Code
Upgrade to Laravel 11
15 comments