Let's Build Amazon in 2 Hours (Laravel, Vue JS, Inertia JS, Tailwind CSS, Stripe) Amazon Clone
Welcome to this tutorial series where we’ll be building a fully functional Amazon clone in just 2 hours! Using Laravel, Vue JS, Inertia JS, Tailwind CSS and Stripe, we’ll be creating a powerful e-commerce web application that looks and functions just like the real Amazon.
We’ll start by setting up our back-end with Laravel, then move on to creating the front-end with Vue JS and Inertia JS. Next, we’ll add Tailwind CSS for styling and Stripe for payments. Finally, we’ll finish up by integrating everything to make the application fully functional.
This tutorial series is perfect for beginners and experienced developers alike. Whether you’re new to web development or a seasoned pro, you’ll gain valuable skills and knowledge by building this Amazon clone. By the end of the series, you’ll be able to create your own e-commerce websites, and you’ll be able to use the skills you’ve learned to build other projects.
Don’t miss out on this opportunity to learn the latest web development technologies and build a powerful e-commerce web application. Make sure to subscribe to our channel for more amazing tutorials and to be notified when the next episode is released
00:00 - App demonstration
02:13 - What you need
02:58 - Project Setup
07:08 - Main Layout | Top Navigation section
17:07 - Main Layout | Footer Section
20:55 - Dashboard Section | Home
21:37 - Dashboard Section | Carousel | vue3-carousel
23:50 - Main Layout | Sub Navigation
26:24 - Dashboard Section | Categories Section
29:07 - Main Layout | Side Menu | Animate.css
33:00 - Main Layout | Hover Menu Effect
36:47 - Get Image Assets for Project
39:01 - Create Laravel Category Seeder and Product Seeder
40:48 - Laravel Models, Migrations, and Controllers for Products and Category
43:02 - Update Inertia to show Categories and Random Products
43:39 - Display Categories and Random Products
47:16 - Modify the Login and Register Section
53:01 - Categories Section | Page
57:23 - Create a Product Component
1:00:05 - Product Section | Page
1:05:46 - Address Section | Page | Create, Read, and Delete
1:17:09 - User table modification to first_name and last_name
1:21:58 - Address Section | Page | Create, Read, and Delete | PT 2
1:29:17 - Display the User and Address information | Updating where needed
1:37:42 - Cart Section | Pinia Install and Setup | pinia-plugin-persistedstate
1:43:35 - Create Cart Page and display Products
1:51:13 - Create Checkout Section | Page
1:56:16 - Adding Stripe to our Checkout
2:14:37 - Create the Success Page
2:18:07 - Create Confirmation Email | Laravel Mailable | Mailtrap
2:21:57 - Finished! Other Projects! LIKE! SUBSCRIBE! SMASH THE BELL!
Suggest:
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Learn Vue.js from scratch 2018
☞ Build a Quiz App Using Vue JS | Vue JS Quiz App Demo | Vue JS Project Tutorial | Simplilearn
☞ Pinia Option Store Vue 3 State Management (Hindi)
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework