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

Published: 04 August 2024
on channel: code with SJM
9,033
241

🖐🖐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...
2. https://github.com/shadrackjm/minimal...

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...
2. https://github.com/shadrackjm/minimal...

How to create Datatable in Livewire:    • Build a DataTable from Scratch! in La...  
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:    • Laravel Authentication Made Easy: Dev...  

❤ 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


Watch video Build a Full stack Minimal E-commerce Application with Laravel 11 and Livewire 3 | TALL Stack online without registration, duration hours minute second in high quality. This video was added by user code with SJM 04 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 9,03 once and liked it 24 people.