Learn How To Build Complete Ecommerce Website Using React JS & Tailwind CSS | React JS Ecommerce Project 2024
👉 Source Code:
👉 Download the assets:
👉 Live Preview:
👉 Full tutorial with back-end:
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:
Instagram:
Twitter:
Facebook:
I’m also waiting for backend and admin panel plz upload another video as soon as possible sir!🙏🏻
my localhost is showing a white screen when I try to run the logo and onwards
Does this project use fakestore api
5:09:22 I finally got around to watching the full tutorial on how to make a complete e-commerce website using React JS. I'm so glad I did. This is a great tutorial that covers everything you need to know.
great project thanks for making this💌
Please release the next part as well
how to make that asset.js file plz reply sir
You have not used Redux toolkit in this project
2:50:25 😍😍
Is this tutorial eniugh to build fully functional ecommerce website because i want to build by own ecommerce website for my business.
Forget password will work ??
my localhost is failing to connect
Avinash sir i have just completed react can i make this project? For resume purpose or this is a full stack because in some of react js project you have written react js but in the video you tell full stack i am having confusion sir because i want to make Ecommercr project please sir reply can i do this ? And does this include firebase ?
Hello sir, In collection file i have entered the entire code and rechecked it again. But i am only able to filter kids wear, i am not getting men and women wear filter. And even i am getting topwear and bottomwear too. Can u check this sir
Just finished this Today !If you ever see this i just wanna say Thank you ! From 🇪🇹
4:03:10 – I notice a problem: If you add more than 1 product (e.g., 1 women's cloth & 1 men's cloth), then when you increase the quantity of women's cloth to 2, the cart icon number works fine, but when you try to delete the women's cloth, the number of your cart icon works correctly (set to 1), but the quantity number of your man's cloth is following the quantity number of the women's cloth that you just deleted, which is 2. Can someone help me with this?
2:12:00
guys I have a question, how did the assets generate all the features in assets.jsx ? how can I add features to a PNG
BALA !!! <3
rooting for u man, always grateful!
how to deploy it ?
Sir I have paid for source code but it's not download
Is it responsive?
What an amazing description! I will soon follow the tutorial and will have my own piece, with some modifications of course. Thanks a lot, sir.❤❤❤
i puchased the code for this website, but the code i got was for the other website "shoppers", please reply asap
greattt thanks
thanks , appreciate for your hardwork
You are telling about each content 😢❤
Very Impressive!
TypeError: setSortType is not a function
at onChange (
Mashallah i complete this now and i like the video
Please make video on backend language like nodejs express mongodb .
Your video helps me to understand more easy and step by step knowledge….
Please make video on backend from scratch
Keep up the great work , you're doing an amazing job honestly speaking.
I am facing issue in add to Cart section when I am clicking on add to Cart button ,Cart number is not increasing what should I do, can anyone help me if it's possible
EASY BUG FIX FOR THE COMMUNITY: On the Cart.jsx.
when adding multiple items of different sizes to the cart.jsx and then deleting some items using the bin icon the quantity number next to the cart items doesn't update correctly this is due to using defaultValue on the input field instead of value defaultValue as a property doesn't update on change the input field on the cart.jsx should look like so
<input
className='border max-w-10 sm:max-w-20 px-1 sm:px-2 py-1'
onChange={(e) => {
const value = e.target.value;
if (value === '' || value === '0') {
updateQuantity(item._id, item.size, 0); // Remove the item if quantity is set to 0
} else {
updateQuantity(item._id, item.size, Number(value)); // Update the item quantity
}
}}
type='number'
min={1}
value={item.quantity} // Use 'value' to sync with the current quantity
/>
EASY IMPROVEMENT FOR THE COMMUNITY: On the ProductItem.jsx.
You can stop the hover: scale making the image bigger and make clicking on the product redirect you to a new page and scroll back up to the top in one action.
Please like this if it helps so I know whether this is even worth writing.👍
const handleClick = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
return (
<Link className="text-gray-700 cursor-pointer" to={`/product/${id}`} onClick={handleClick}>
<div className="overflow-hidden relative group">
<img
className="group-hover:scale-105 transition-transform ease-in-out duration-300 group-hover:-translate-y-2"
src={image[0]}
alt="first image of product"
/>
<p className="pt-3 pb-1 text-sm">{name}</p>
<p className="text-sm font-medium">{currency}{price}</p>
</div>
</Link>
);
Parabéns pelo belo trabalho!
How to login to admin panel??
Sir, where do you find these images for your project?i want to add more for my project
Thank you so much for such an eye-opening tutorial. I believe with following your content, I am on a great path to becoming a good web developer. See you in a few days time.
Cheers.
hi bro no image inside project not visible project
Thanks