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

[@DevZoneCodes]

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

[@amritanshu3335]

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

[@Arfajsheru]

Bro this is responsible website

[@imranasad9199]

I was unable to grasp the concepts in a three-month MERN stack course, but you made it possible to understand in just a 5-hour video. Thank you so much, sir!

[@hamudxd9497]

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

[@shubhtalk7073]

Brother search "as a programmer" channel he really create great project and explain everything for beginners

[@CosMIcAkaSh1111]

This project is not for beginners. And also it's not possible to tell that much code line by line 😅

[@leader8458]

For beginners it's suggested to take a crash course first, spend like a week or so in getting a little bit familiar with concepts and then create these projects to get a hold on the concepts

[@hamudxd9497]

@@leader8458 Ok sir Thnx

[@TheMarketingMan4U]

@@CosMIcAkaSh1111 It is possible. I do it in my one on one classes...with notes and screenshots.

[@AbhishekKumar-lu3lp]

I just completed this part of the video, and after checking the demo, I'm truly impressed. The quality is exceptional-I've never seen this level of e-commerce on KZbin

[@GreatStackDev]

I'm so glad that you liked it. Thank you 😊 We're working on another next level projects and will be published next week.

[@chidera_aniekwe]

This was a wonderful project! i even added a blog page to mine It took me 3 days but i finally finished. I can't wait for part 2, God bless you Greatstack for putting out such detailed videos. I noticed some little issues you might want to address in the next video. -On the mobile view, when you click on the menu icon, it will display the menu, but you can still scroll up. -In the recommended section, if you click on a product, it will load on the main product preview, but the recommended products remain the same. -The search icon is visible throughout the website, maybe it would help to be good to only show it on the collection page This was all i could point out. I will try to fix them on my own. Thank you soo much for what you are doing.

[@JoeHany-c4f]

to solve the problem that the related products do not update when you click on the recomndation product you simply pass the item itself to the relatedproducts component and put it in the dependency array of useEffect so whenever the item changes the related products will filter again and display the new recomindation here is the code: import React, { useContext, useEffect, useState } from 'react' import { ShopContext } from '../context/ShopContext' import '../styles/related.css'; import '../styles/latest.css'; import Title from './Title'; import ProductItem from './ProductItem'; const RelatedProducts = ({item}) => { const { products } = useContext(ShopContext); const [relatedProducts, setRelatedProducts] = useState([]); const getProducts = () => { if (products.length > 0) { let productsCopy = products.slice(); {/* fisrt method it takes more time for large datasets: productsCopy = productsCopy.filter(item => item.category === category) productsCopy = productsCopy.filter(item => item.subcategory ==== subcategory) */} {/* takes less time for large datasets*/} productsCopy = productsCopy.filter(product => (product.category === item.category && product.subcategory === item.subcategory && item !== product)); setRelatedProducts(productsCopy.slice(0, 4)); } } useEffect(() => { getProducts(); }, [products, item]) return ( {relatedProducts.map((product, index) => ( ))} ) } export default RelatedProducts

[@peace.0183]

Bro can you help me how to execute it It is really help ful to me

[@theviralworld9486]

bro can you please help me in running the project

[@chidera_aniekwe]

@@theviralworld9486 What do you need??

[@adityaKumar13137]

@@chidera_aniekwe brother can you share your github repo? it'll be helpful

[@pakhton8917]

AOA, Just completed the project! I learned a lot, including how to use ContextAPI professionally and the steps to create an e-commerce website. Waiting for the admin panel part to complete the experience. Thank You!

[@richard7019]

You have the best tutorials, hands down, one draw back we waited to long to see the changes your make,use a double sided screen . Plz makes these changes so beginners can fellow you step by step.

[@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.

[@navneet_prakash]

Great tutorial, just finished the frontend part, waiting for the backend :)

[@ShuvayanThakur]

me too

[@chiragmaheshwari6761]

hii can u plz provide me github repo link i am facing issue in product page image it is taking 80% width

[@parralelife]

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.❤❤❤

[@GreatStackDev]

I'm so glad you found it awesome! 😊 Do let me know once you complete this project.

[@greeneye360k]

Sir, plz do backend and admin panel part as soon as possible.

[@motivational_scroll]

yes we need backend as soon as possible

[@LittleJackOfficial]

yes we need backend as soon as possible

[@YashMishra-g2h]

Completed first part ....Waiting for the backend 😊

[@paulmwangi270]

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

[@theg7k]

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

[@rabbubasirul]

Thank you so much for this. I was struggling to remember react and found you project. This helped me a lot. I look forward for the backend. Again thank you very much! Hope to see more from you.

[@PlipaiTune]

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 😊

[@GreatStackDev]

Thank you so much 😊 Do let me know once you complete this E-Commerce project.

[@PlipaiTune]

​@@GreatStackDevSir, when will the next part come?

[@GreatStackDev]

With 3 to 4 weeks.

[@NazrinBanu786]

@@GreatStackDev jolly

[@CyrusTabji]

@@GreatStackDev I am presently working on Shopper E-Commerce project and have already COMPLETED Tomato Food Delivery Full Stack project and I learned a lot from you, thank you so much GreatStack.

[@olufunmilayoagboola7563]

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. 🙏🙏

[@GreatStackDev]

Glad it was helpful! Thank you. 😊 Do let me know once you complete this awesome project.

[@mhhamzaedits]

Premium content over all KZbin ❤

[@NazrinBanu786]

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

[@GreatStackDev]

Thank you so much Nazrin! 😊 Do let me know once you complete this E-commerce project.

[@NazrinBanu786]

​​@@GreatStackDev I am facing an error in chatapp I am solving it sir the contact is not fitting correctly

[@NazrinBanu786]

(\_/) ( •.•) />❤

[@YouTubeMastery101]

Mashallah i complete this now and i like the video

[@Khaladunnabi]

I am really impressed. Many prayers for you sir.

[@brocode04]

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

[@chennarapuvenkateswararedd4027]

We are excited for the next video

[@Hung-Dang-2206]

I really appreciate you, your tutorial help me from 0 to know how to create my own project, easy to learn, thank you GreatStack

[@debasishrana2703]

i watched this video fasttime in this channel i am totaly impressed how you make this video & explain the code.

[@pavant4391]

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

[@GreatStackDev]

Thank you so much Pavan. 😊 Do let me know once you complete this awesome project.

[@shareeknizamdeen2882]

​@@GreatStackDev sir completed when will you upload another part

[@pavankumar1119-zw9se]

Just finished this Part, learnt many things, Thank you Brother♥

[@GreatStackDev]

Glad to hear! Thank You Pavan. 😊

[@jay-lz6dz]

Thank you so much sir. Got to learn so many stuff. Just completed this the frontend part. Waiting for the backend part.

[@Meoww21375]

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

[@GreatStackDev]

Thank you. 😊 Do let me know once you complete this awesome project.

[@michiguz]

Thank you so much for this tutorial; I just finished it, and it was incredibly helpful. I’ll be looking out for your future videos

[@GreatStackDev]

I'm so glad to hear you completed it. Working on the another next level project! Thank You. 😊

[@PrinceAsare-Grant]

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

[@GreatStackDev]

Thank you so much! 😊 Try it and let me know once you complete it.

[@etemesisamwel6344]

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.

[@heartofol1727]

super tutorial thanks great stack

[@aboomaraboammar5846]

We are excited for the next video from Egypt

[@318harshsawant3]

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

[@Zakariyesultan]

Keep going, teacher ❤

[@GreatStackDev]

Thank you! 😃

[@mathwin1094]

your are the great person and great teacher❤️❤️ from Bangladesh 🇧🇩🇧🇩

[@GreatStackDev]

Thank you so much 😀

[@abdulkadirakmel6345]

Fantastic work! I'm eager to see what's next!

[@ManojSurulivel]

Expect one🎉 Thank you so much ...❤

[@GreatStackDev]

You're welcome Manoj! 😊 Do let me know once you complete this awesome project.

[@ManojSurulivel]

@@GreatStackDev Sure✨

[@muhammadfaisal4494]

Most needed this type of projects.

[@SharathSharath-sx2ji]

Exllent video for beginner coder❤

[@danielsuccess1841]

Please sir i am anticipating the backend project video This was so enlightened Thank you for this

[@GreatStackDev]

Thank you Daniel. 😊 Do let me know once you complete it.

[@danielsuccess1841]

@@GreatStackDev I’m done with this part already.. Waiting for the admin side and backend side sir 😁😁

[@priyankashah5709]

The design of the website is amazing, and the explanation of every concept is excellent. I learned a lot from this video and am looking forward to the backend series✨👑

[@FunZone-l5n]

Great work by GreatStack💌💌💌

[@GreatStackDev]

Thanks ✌️Keep learning.

[@shlokagrawal5809]

amazing project !! waiting for the vedio on deployment!!

[@bonfaceosuka]

Keep up the great work , you're doing an amazing job honestly speaking.

[@techcamp_pro48]

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

[@nadiafahmi7013]

Sir ..thank you from the bottom of my heart for being such a positive influence in my life. I look forward to continuing to learn from you , really you are the most talented person in the world , thank for you and thank for GreatStack

[@ITnationwithphiliso]

Great Stack you are great and I'm very grateful for your tutorials.

[@sdfsfsfd437]

Awesome project! Many thanks. And very interesting that video about showing how to upload the project to internet.

[@captainayaan]

Unbelievable wisdom. Thank you!

[@imalisonnguyenangel3938]

Thanks for your instructions. God bless you and he loves you so much.

[@haribalajeek8743]

thanks , appreciate for your hardwork

[@ShuvayanThakur]

Sir please upload the next part of this project. Creating the Admin Panel and full Backend is pending..can't wait to complete it.. Superb❤

[@GreatStackDev]

We're working on it. Will probably publish it on 16th Sep. Thank You. 😊

[@ShuvayanThakur]

@@GreatStackDev 🙇🏻‍♂️

[@4druu]

This tutorial is very valuable for beginners like me, please speed up the next episode more, I'm really waiting for it.❤

[@january6707]

did you completed the whole project and is it worth it to di it.

[@4druu]

@@january6707 I have finished the project on this video but there should be a next episode

[@eyobtadele1613]

Great job sir, it's amazing course

[@GreatStackDev]

Thank you. You’re the best buddy! 🌈

[@faicalalawi9392]

Amazing video, one of the best on youtube if you actually want to learn to build. When will the backend part be available ? 🙏🏽

[@GreatStackDev]

Thank you so much 😀 Within 3 to 4 weeks.

[@NitinPatil-Nikss]

very cool project 😍😍 and the way of teaching is totally Good..

[@vasudavesatheesh4386]

Great video .Waiting for the deployment video sir❤❤❤

[@sheptianbagjautama]

Greattt, im just finished the frontend part , waiting tutorial for the backend , Thanks GreatStack

[@GreatStackDev]

I'm so glad to hear that. We're working on it. Will publish it very soon. Thank you. 😊

[@mdtaha2335]

Sir, when u will uplaod backend and admin panel, we curious to learn from you ,this was a wonderful project! i even added a blog page to mine

[@GreatStackDev]

We're working on it. Will probably publish it on 16th Sep. Thank You. 😊

[@Feel_loved]

You’re doing great. Thank you

[@GreatStackDev]

Glad you liked it! Thank you.

[@ArjunCodess]

awesome project. thanks.

[@charanyadav2271]

Good to learn and great way of explanation

[@kira7mm]

Waiting for second part

[@sundaymba6500]

Always making great content. thanks so much sir.

[@GreatStackDev]

You're welcome. 😊 Keep coding.

[@olgalavida7977]

Very Impressive!

[@JaimeSuarez-Murias]

You do a GREAT job. Thank you.

[@nemsararanaba3582]

thumbs up for the Frontend Part Sir Please create the Backend Side also

[@GreatStackDev]

We're working on it. Will publish it very soon. Thank you. 😊

[@nemsararanaba3582]

Thanks a lot Sir .🎉

[@kira7mm]

Thank you so much for your kindness.

[@GreatStackDev]

You're welcome. Thank you.

[@nisx-t7i]

Good project!!! Just amazing. Please make a video on how to deploy online.

[@GreatStackDev]

Thank you so much 😀 Sure!

[@vikramvikrant-s5v]

very good project great one

[@santoshkumarjena6279]

thank you sir, your tutorials help me to learn project building .Sir please make project using react-redux and redux-toolkit

[@rishiksingha8685]

Thank you for premium content my teacher

[@Fusiongallary]

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

[@saudjavaid566]

sir i love youuuuuuuuuuuuuuu i was looking for this kind of tutotrial;

[@GreatStackDev]

Thank You 😊 Do let me know once you complete this awesome project.

[@saudjavaid566]

@@GreatStackDev okay sir

[@AdeshM98]

@CodingMaster-iv6vx If he provides the source code for free then most people will skip the video and download the source code directly without learning anything.

[@sahilbutala6911]

Waiting for second part ❣️

[@chanduaadhf]

It will be Very helpful to everyone

[@GreatStackDev]

Glad you found this helpful.

[@Ibrahim_webdeveloper]

How i wish you use Django for backend 😢❤ Much love from Nigeria ❤

[@SharathSharath-sx2ji]

Sir,Please uplode part too as soon sa posible ❤

[@GreatStackDev]

We're working on it. Will publish it very soon. Thank you. 😊

[@janinaweigl5702]

Thank you for the video!!!!! Really helpful

[@GreatStackDev]

I'm so glad! Thank You. 😊

[@Glorian692]

GreatStack you are the best. please do also the deployment tutorial of this beatiful app

[@reubenagbor1055]

We waiting for the other part of this video Sir 🙏

[@nemsararanaba3582]

Eagerly waiting for the backend part

[@sammankamal]

Exited for the next video!

[@GreatStackDev]

Thank you! 😊 Did you try this?

[@DanishKhan99-C]

​@@GreatStackDev finally done frontend. I'm waiting for backend

[@atilolavictor5198]

Great Job Sir

[@HarishSharma-cy7gm]

Great 👍 Curious for backend....

[@GreatStackDev]

We're working on it. Will publish it very soon. Thank you. 😊

[@HarishSharma-cy7gm]

@@GreatStackDev 🤩🤩

[@ayushjag-x1i]

@@HarishSharma-cy7gm bro can you please provide me the source code

[@mdarmankhan6252]

very helpful, thanks sir,

[@amanuelyeshiwas6656]

Thank you, great tutorial

[@GreatStackDev]

Glad it was helpful! Thank you. 😊

[@abdulahialao8605]

Thanks for creating the video

[@TuhinRoy06]

Make a video on deployment after uploading the backend part , then it will be very helpful... Waiting for the next project using AI along with the next.js

[@ALI-ll3ti]

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

[@salmanhaider8182]

love iran from pakistan . there are many iranian coders on youtube like code with mosh hamdani and code with hussain. they are very tallented

[@ALI-ll3ti]

@@salmanhaider8182 Hello, I also love my Pakistani brothers, may you always be successful and victorious, thank you. 🌹🌹🌹

[@POOJA-mi7ex]

Sir, your awesome. Please upload the second part soon

[@TWNOGaming]

How you create the assest js file with fake json data ? You create one by one Or u use any special website for automate the process?

[@Shiraz_Mazhar]

Hope he answers this

[@TWNOGaming]

@@Shiraz_Mazhar Yes I am still waitng for answer from his side

[@MS_LIBRARY]

great work this is really helpful

[@Abdouxs22]

Let's goo bro you are a genius

[@sarthakshirke1469]

superrrr sir

[@GreatStackDev]

Thank you Sarthak! 😊

[@nashal2671]

Awesome❤

[@ehackz]

thank you for your hardwork

[@GreatStackDev]

Thank you. 😊 Keep coding.