How To Make Complete E-Commerce Website Using React JS | React JS Ecommerce Project 2024

Learn How To Build Complete Ecommerce Website Using React JS & Tailwind CSS | React JS Ecommerce Project 2024

SUBSCRIBE: @GreatStackDev

-------------------
In this tutorial we will create an eCommerce website / Web App using React JS and Tailwind CSS. We will create the Home page where we will display the Latest products, best selling products, newsletter subscription box and Footer.

We will also make products collection page to display all products added on this online shopping website. On this product collection page we will create product filter, product sort and product search features also.

Then we will create the product page where it will display product image gallery, title, price, description, add to cart button and Related products. After that we will create Place Order page, Cart page, My Order List page, About Page, Contact Page, Login and Signup page.

After completing this ecommerce website for customers, we will create the website for admin. Where admin can add new products on website, list and delete the products, display and update the orders.

To build this E-commerce website we will use React JS & Tailwind CSS. After completing this front-end eCommerce project, we will build the backend in the next tutorial, To create the back-end we will use Node JS, Express, MongoDB and React JS. So this is going to be a MERN Stack Ecommerce Project.

-------------------

Watch Full Stack Food Order Website tutorial:

Watch Full Stack Chat App tutorial:

Watch Full Stack Music Streaming Website

Watch Full Stack Blog Website Tutorial

-------------------------------------
Build more React JS projects:

Complete Portfolio Website In React:

Build ChatGPT Clone In React:

Build AI Image Generator with OpenAI In React

Create Weather App In React

-------------------------------------
Time stamp:

00:00 Project Overview
11:00 React Project Setup
21:56 Create Pages and Routing
31:35 Create Navigation bar
55:52 Header section
01:09:06 Latest Products section
01:28:07 Best Seller Products
01:35:11 Policies and Newsletter box
01:43:59 Footer Section
01:50:25 Collection Page
02:09:07 Product Filters
02:23:48 Product sort
02:30:30 Search Feature
02:46:31 Product page
03:26:00 Create Add to cart feature
03:41:51 Cart Page
04:18:02 Place Order Page
04:34:19 My Order Page
04:43:24 Login Page
04:56:07 About Us Page
05:03:20 Contact Us Page

-------------------------------------
Images Credit:

-------------------------------------
Connect with me:

Connect with GreatStack:

[hamudxd]

SIR YOU HAVE NO COMPARISON __BUT FOR BEGINNERS IF YOU EXPLAIN EVERY LINE OF CODE AND EVERY POINT THAT WOULD BE BENEFICIAL___OVERALL A GREAT TUTOR YOU ARE

[MrPlipai]

I think we got one more gift 🥰 I won't cut it short with a little thank you. Lots of prayers and love for you my dear teacher 😊

[DevZone]

The most talented person on the Earth!! Hats Off!! Keep up the great work

[paulmwangi]

Just when I was giving up on the week. Avinash brought another project i'll be working on this project this week

[mujibulhaquetanim]

Your projects are incredibly beginner-friendly, brother. Whenever I search for any project, your channel immediately comes to mind. I've even recommended your channel to my friends, and they share the same opinion, man. Much respect to you. Sending love from Bangladesh.

[NazrinBanu]

u are talent sir, u are so valuable for beginners like me.

[thegk]

Hi Dev,
Thanks for your time and support. I am waiting for the video on deploying the website online

[ALI-llti]

من از ایرانم پروژه های شما خیلی به من کمک می‌کند ممنونم بابت ضبط این دوره عالی ❤❤❤❤

[shafnisha]

Thankyou soo much, hoping to see the project to be uploaded online!

[Meoww]

Aa huwi na baat bhaiya i like this type of project where i got to learn many things

[eegkehj]

This guy just won my heart, show your interest here and appreciate him to bring us this type of content.

[pavant]

Addicted to ur way of teachingg sir🤩🤩🤩🤩🤩

[olufunmilayoagboola]

Thank you sir for been timely, I have been hoping to get this particular type styled with tailwind Css as I started working on the previous e-commerce project styled with css. 🙏🙏

[kevinkavete]

Wow! simply AMAZING. I hope one day i can reach this level of EXPERIENCE and Attention-to-Detail

[harshsawant]

Bro you deserve a big big jadu ki jhapi from my side as I was trying add some changes from my side in your 9 hrs ecom website but when I saw this intro I'm gonna try this and improve my skills

[sujalpatel]

please sir i am seeing your channel since your channel name was easy tutorial from 2019 i was in 8th

[mhhamzaedits]

you are better than, Sheriyansh Coding School, Code With Harry, Thapa Tecnical, and more of all Youtube

[techcamp_pro]

Thank you sir, the
most talented person on the Earth!! Hats Off!! Keep up the great work

[PrinceAsare-Grant]

Thank you for all your effort and tutorials. May God forever bless you. You are the best

[amritanshu]

00:06 Creating a full-stack e-commerce website using MERN stack
02:41 Product display and search functionality explained
07:29 Demonstration of updating order status and adding new products through the admin panel in an e-commerce website.
10:03 Setting up React JS Ecommerce Project 2024
15:57 Adding assets and configuring product data for the e-commerce website.
18:35 Adding Telwin support for project and creating folder structure
24:45 Using React Router Dom to create multiple routes for multiple pages
27:39 Creating routes for different pages in the e-commerce website
33:40 Creating logo, UL tag, and using Navlink for navigation
36:19 Adding and updating menu items for navigation bar
41:40 Creating a profile icon with a dropdown menu
44:29 Creating navigation bar and making it responsive
50:06 Implementing dynamic classes based on visibility state
52:43 Setting up navigation bar with clickable links in React JS E-commerce project
58:16 Styling paragraph tags for improved theme looks
1:00:58 Adding custom fonts to improve web page UI
1:06:31 Setting up context API for sharing global data
1:09:14 Display latest added products using context API
1:14:29 Creating a title component and using it in the project
1:17:14 Setting latest products using React state and useEffect hook
1:22:28 Displaying multiple products in the latest collection component using React JS
1:25:17 Implemented product display and navigation logic.
1:30:22 Creating best seller products list using React JS
1:33:04 Displaying best seller products on the website
1:38:47 Creating a newsletter subscription field with React JS
1:41:25 Creating a newsletter subscription box with form validation and submit functionality
1:46:44 Creation of UL and li tags with class names and text content for an e-commerce website
1:49:33 Creating footer and starting on collection page UI design
1:55:05 Creating category and subcategory filters for e-commerce website using React JS
1:58:14 Adding dynamic class names based on filter status
2:03:47 Creating Select Tag and Adding Options
2:06:48 Using useEffect to execute code when component loads
2:13:12 Implementing category and subcategory filtering logic with React JS
2:16:21 Setting up subcategory filter in React JS E-commerce project
2:21:49 Implementing filter and sort functionality for e-commerce website.
2:24:27 Creating filtered product copies and implementing sort feature
2:30:28 Created product sort feature and added search logic
2:33:31 Setting up search functionality in React JS e-commerce website
2:39:06 Using the useLocation hook to control visibility of the search bar based on the URL path
2:41:56 Toggle visibility of search bar on eCommerce website
2:47:01 Fetching and displaying product data using React Hooks
2:50:01 Using Effect Hook to fetch and store product data
2:55:29 Display multiple product images with interactive functionality
2:58:25 Creating and displaying product images and information
3:04:10 How to hide scroll bar and align images in React JS Ecommerce Project
3:06:49 Implementing dynamic sizing logic for e-commerce buttons
3:12:25 Creating comment and review section with styling
3:15:15 Creating a related products component with filtering logic
3:21:13 Rendering product data and setting related state
3:24:00 Setting up product details for e-commerce website
3:29:29 Adding and managing cart data in the e-commerce website using React JS
3:32:14 Implementing add to cart functionality with item ID and size parameters
3:37:08 Display dynamic quantity count on cart icon
3:39:59 Logic for obtaining total count of cart items.
3:45:16 Adding items to the cart and displaying on the web browser
3:48:15 Adding class name property and mounting title component
3:53:32 Display product price and size with styling
3:56:17 Adding functionality to delete product from the cart
4:01:41 Implementing logic for updating product quantity in the shopping cart.
4:04:22 Retrieve total cart amount from context file in React component.
4:10:08 Setting up tags and content in React JS ecommerce project
4:12:27 Mounting the card total component on the cart page
4:17:36 Designing the Place Order Page in React JS
4:20:23 Creating multiple input fields in the form with different types and placeholders.
4:25:54 Implementing different payment methods using Flexbox properties in React JS E-commerce website.
4:28:33 Adding logic to update indicator color based on payment method selection
4:33:45 Create UI for orders page in React JS
4:36:24 Rendering product images and data using the map method in React JS
4:41:54 Implementing UI elements like buttons and text in React JS
4:44:39 Creating login page UI in React JS.
4:50:25 Customizing the UI display based on the login state
4:52:58 Creating and implementing login and signup functionality
4:58:23 Adding static text and styling to website elements
5:01:02 Creating layout and styling for sections and text content
5:06:50 Create layout for contact us page with phone number, email ID, text, button, and newsletter subscription box
5:09:27 Created all pages for e-commerce website