Course Details
✔ - Built with latest Stack
✔ - About 20 unique pages.
✔ - 23 hours of content
✔ - 140+ videos
✔ - Fully functional project source code
✔ - Customer UI + Admin UI
✔ - Deploy on custom domain
✔ - Custom domain email address
Overview of the project
In this course you will see natural flow of building this amazing project. Including: debugging, problem solving, research, refactoring and more...
Landing Page
✔ - Output all database products with pagination
✔ - Add to Cart functionality
✔ - Responsive Design with Tailwind.css
Cart Page
✔ - Change quantity of the items
✔ - Remove items from cart
✔ - Proceed to checkout page
✔ - Send email to admin users on new orders
My Orders Page
✔ - Output customer orders with pagination
✔ - Pay unpaid orders
✔ - Click to view order details
Analytics Dashboard
✔ - Overall information about active customers, paid orders, total income
✔ - Order distribution by countries
✔ - Information about latest orders and customers
✔ - Change date range period to update data
All Orders in Admin Panel
✔ - View all orders with pagination, sorting and filtering
✔ - Click each order to view all details of the order
✔ - Update order status into shipping or completed
✔ - Send email to customer when order status is updated
Dedicated page for reports
✔ - Number of new orders by day
✔ - Number of new customers by day
✔ - Update date range period
By the end of this course, you will be able to...
✔ - Build full stack apps with Laravel, Vue.js and Tailwind.css from start to finish
✔ - Correctly implement Stripe Checkout in any project
✔ - Develop Vue.js apps and connect to third party APIs
✔ - Deploy Laravel and Vue.js apps on custom domain
✔ - Setup business email address and configure for email sending
Why you should take this course
What will you learn?
✔ - Create scalable Laravel project
✔ - How to Integrate an existing tailwind.css theme into Laravel
✔ - Manage your cart items for guest users with cookies
✔ - Correctly Implement Stripe online payments checkout
✔ - Handle Stripe Web hooks
✔ - Email sending in Laravel
✔ - Customize existing email templates
✔ - Create tailwind.css + Vue.js responsive admin panel
✔ - Connect existing Vue.js app to Laravel REST API
✔ - Implement CRUD operations in Vue.js + Laravel API
✔ - Upload images into Laravel API
✔ - Implement sorting, filtering and pagination in Vue.js
✔ - Create reusable Vue.js Components
✔ - Use Alpine.js in real project
✔ - Debug your problems and find solutions
✔ - Create charts in Vue.js and supply data from Laravel API
✔ - Deploy Laravel project on custom domain
✔ - Create custom email address ([email protected]) and use in your project for email sending
✔ - and much more
Your Instructor
Hi, I’m Zura aka TheCodeholic
I have 10+ years of experience working as a professional software developer. I have been teaching coding over 4 years. On my website you will find courses that are 100% project based, contains the most important aspects and use cases that I came across during my career.
Prerequisites - Who is this course for?
This course will assume that you have at least basic knowledge of Laravel and Vue.js
This course is not for you if you DON'T KNOW what is Laravel or Vue.js.
✔ - 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
Course Curriculum
- 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
- 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
- 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
- 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
- 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
- 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 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
- 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
- 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 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
- 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
- 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)