MENU

Fun & Interesting

Build a Full stack Minimal E-commerce Application with Laravel 11 and Livewire 3 | TALL Stack

code with SJM 20,650 9 months ago
Video Not Working? Fix It Now

## ??Source code, Here you"ll find two branches in my repo so I recommend to use the auth-breeze branch (link #1). Since it resolves the issue of slowness of the application which was caused by devdojo auth package: 1. https://github.com/shadrackjm/minimal-ecommerce-tall-stack 2. https://github.com/shadrackjm/minimal-ecommerce-tall-stack/tree/auth-breeze Use this link to buy your first Hosting plan from Hostinger to get a 20% discount https://hostinger.com?REFERRALCODE=1SHADRACK05 ## Introduction Welcome to the Minimal E-commerce App project! This guide will walk you through building a basic e-commerce application using the TALL stack (Tailwind CSS, Alpine.js, Laravel, Livewire). ❤ You can support me buy a new PC, through this link: https://buymeacoffee.com/codewithsjm ## Features - Setting up the development environment - Designing the landing page with Tailwind CSS & hyper-ui - Creating models, relationships, and migrations for products, categories, and users - Setting up authentication with DevDojo Auth Package - Building the product listing & product detail page - Building the product CRUD operations with Livewire components (admin) - Implementing the shopping cart with Livewire Timestamps 0:00 Introduction 2:13 Project Demo 24:30 Project setup 28:10 Setting up authentication using DevDojo auth package 36:50 Designing the Landing page 1:14:40 Designing the Product details page 1:29:00 Database design ( Models definition, creating migrations & relationship definitions) 1:40:44 Adding admin and performing product CRUD operation 2:01:16 Installing Preline UI and adding admin panel layout 2:10:49 Laravel 11 middleware ( creating & registration) 2:12:53 Implementing Multi role authentication (multi-authentication) 2:18:00 Adding Breadcrumb on admin dashboard 2:29:42 Performing Products and Categories CRUD operations 3:56:37 Showing products and categories in Livewire 3 DataTables 4:35:38 Adding Loading skeleton(Lazy loading), Product listing and Product details page 5:11:13 Implementing add to cart & Shopping cart Feature 6:01:55 Conclusion part & call to action ## Implementation Steps ### 1. Setting up the Development Environment - Install Laravel 11 - Configure Livewire 3 - Integrate Tailwind CSS ### 2. Setting up Authentication with DevDojo Auth Package - Install the DevDojo Auth package - Configure authentication routes and views - Perform multi authentication ### 3. Designing the Landing Page with Tailwind CSS & hyper-ui - Create a responsive landing page - Use Tailwind CSS for styling - Utilize hyper-ui components ### 4. Building the Product Listing & Product Detail Page - Create Livewire components for product listing - Design product detail page ### 5. Creating Models, Relationships, and Migrations for Products, Categories, and Users - Define models and relationships - Create and run migrations ### 6. Building the Product CRUD Operations with Livewire Components (Admin) - Create Livewire components for CRUD operations - Implement admin views ### 7. Implementing the Shopping Cart with Livewire - Create a shopping cart component - Handle adding, updating, and removing items ## Project Resources & videos you must watch: ## ??Source code, Here you"ll find two branches in my repo so I recommend to use the auth-breeze branch (link #1). Since it resolves the issue of slowness of the application which was caused by devdojo auth package: 1. https://github.com/shadrackjm/minimal-ecommerce-tall-stack 2. https://github.com/shadrackjm/minimal-ecommerce-tall-stack/tree/auth-breeze How to create Datatable in Livewire: https://youtu.be/0y7pS4DdRN0 Laravel: https://laravel.com/ Livewire: https://laravel-livewire.com/ Preline ui: https://preline.co/ HyperUI: https://hyperui.dev/ Hero icons: https://heroicons.com/ Logo ipsum: https://logoipsum.com/ DevDojo Auth Website: https://devdojo.com/auth/ How to add devdojo auth video: https://youtu.be/oGaRFYhoKQ8 ❤ You can support me buy a new PC, through this link: https://buymeacoffee.com/codewithsjm ## Use this link to buy your first Hosting plan from Hostinger to get a 20% discount https://hostinger.com?REFERRALCODE=1SHADRACK05

Comment