1. The document outlines setting up a Laravel project using Tailwind CSS for an ecommerce frontend. It describes creating layout files for the navbar and footer components that will be included on all pages. 2. Instructions are provided to generate reusable component classes for items like product images, checkout details, and similar products. These components will be used dynamically on home, checkout, and product detail pages. 3. Basic routes are defined for the home, login, signup, checkout, product details, and profile pages, each returning their respective view.

1. Advance Web PPT
Ecommerce Front-end
18094198-082
18094198-100
18094198-101

2. Create a laravel project
Run command :
“composer create-project laravel/laravel frontend”
Then change directory with command :
“cd frontend”
Run command to start the project:
“php artisan serve”

3. Add tailwindcss file
Add tailwindcss minified file in public folder
Create layout for nav and footer
Create files in resource/views/layout folder

4. Nav:
Nav contains a logo and shop name on the left side
On the right side 2 icons and 2 buttons
 Icon for profile and cart
 Buttons for login and signup
The body tag is started in nav

5. Fotter:
Social media icon and copyright
Body tag is closed here so every blade view which imports nav and footer can
access app.css too.
All blade views will include the nav at start and footer at the end
@include('layouts.nav')
// blade view content
@include('layouts.footer')

6. Create components
Run command:
“php artisan make:component checkoutimg”
This creates a component in views/component folder and a class in app/views
In class of the component add the variables
public $img;
public $title;
public $price;
public $desc;
Initialize them in constructor
public function
__construct($img,$title,$price,$desc)
{
$this->img = $img;
$this->title = $title;
$this->price = $price;
$this->desc = $desc;
}

7. Each variable is used ad “{{$title}}”
Repeat this process to create “Homeimg” and “Similarproducts” Components.
These components are used as
<x-compnentname prop=“propvalue”>
In case of php variables
<x-compnentname :prop=“$propvalue”>
Create components conti…

8. Home page
Static UI
Repeated component “homeimg”

9. Check Out page:
Static Order summary
Repeated component “checkout”

10. Product details
Product Description
Repeated component “similar products”

11. Routes
Route::get('/', function () {
return view('home');
});
Route::get('/login', function
() {
return view('login');
});
Route::get('/register',
function () {
return view('signup');
});
Route::get('/checkout', function () {
return view('checkout');
});
Route::get('/productdetails', function ()
{
return view('productdetails');
});
Route::get('/profile', function () {
return view('profile');
});