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 (4:22)
Project Demo (5:22)

Project Setup

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

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

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

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)

Teach online with

Add Tailwindcss to Vue.js Project

Complete and Continue

Discussion

24 comments