Add Tailwindcss to Vue.js Project | TheCodeholic

Autoplay
Autocomplete

Previous Lesson Complete and Continue

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

Introduction

Welcome to the course (2:27)
Project Full Demo (8:49)
Prerequisites (0:59)

Project Setup

Setup Working Environment (8:33)
Understanding Database Schema (3:23)
Generate Models and Empty Migrations (2:58)
Write Migrations (6:28)
Project Source Code
Discord Server

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

Section Overview (0:20)
Prepare UserController in Laravel API (12:34)
Display Admin Users in Vue.js Admin Panel (9:42)
Implement User Update and Delete (13:54)
Project Source Code

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

Upgrade to Laravel 11 (12:55)
Upgrade Application Structure to Laravel 11 (21:14)
Update vite packages (5:18)

Add Tailwindcss to Vue.js Project

Complete and Continue

Discussion

29 comments