Course Details
✔ - Built with the latest Stack
✔ - 20 unique pages.
✔ - 33+ hours of video content
✔ - 200+ videos
✔ - Fully functional project source code
✔ - Customer UI + Admin UI
✔ - Deploy on custom domain
✔ - Lifetime access
✔ - Private Discord Group
✔ - Subtitles in English and Spanish
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
✔ Filter Products by Category
✔ Search for Products by Keyword
✔ Sort Products by Title and Price
✔ 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
Product Details Page
✔ Multiple Images of the Product
✔ Detailed Description with WYSIWYG
✔ Add Multiple Quantities into Cart
Stock Management
✔ Specify Quantity on each Product
✔ Restrict adding more than available quantity into the Cart
✔ Block "Add to Cart" button if Product is out of Stock
My Orders Page
✔ Output customer orders with pagination
✔ Pay unpaid orders
✔ View order details
View Details of Your Order
✔ View Details of Your order
✔ Track the Order Status
Manage Your Profile Details
✔ Update Personal Details
✔ Update Shipping and Billing Addresses
✔ Update Password
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
Admin Panel Product Listing
✔ List of All Products in Admin Panel
✔ Sort Products by Different Columns
✔ Search for Products by Keyword
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
Manage Customer Details
✔ List of All Customers
✔ Update Customer Details
✔ Block the Customer if Necessary
Manage Admin Users
✔ List of all Users
✔ Add new Admin Users
✔ Reset Password of existing Admin Users
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
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 12+ years of experience working as a professional software developer. I have been teaching coding over 5 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
- 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