THE BIGGEST MERN STACK E-COMMERCE STORE PROJECT EVER (INTRO)

Su and YouTube channel so in this series of videos we are going to be building this monster level e-commerce application now you might be saying like Huzan it's not that much big project why are you calling it a monster well it is supremely complex so what I want to do is that I'm going to just show you this entire application from the user side and then I'm going to also show you from the admin site too okay so first of all I'm going to log in but you know what before we log in first of all I want to show you how to create a user so I'm going to just click on register and register a user so I'm going to just give a name of like I don't know Robert and here their email will be Robert gmail.com and the password will be robert1 12 uh1 12 would be fine so Robert one2 right here so if I click on this register button so here you can see it will gives us like user successfully register and here you can also see the username right here cool so once the user land on this project and their register they can see all of these products right here so if they like one of the products so they can just click on the heart and it will now add it right here to the favorites let's suppose if we choose these three products right here then I'm going to just click on this favorites and it will now brings us to all of their products which we selected as favorit right here we can also deselect that from here and here you can see that's totally empty now let me just go ahead and go back and we can also check out a specific product like if you just click on I don't know maybe I'm going to just click on this first camera right here so we can see the product image we can see the product title we can see the product description the price all of that more details right here we can add as many as we want right here we can add it to the card we can also provide what do we call it our rating so in this case I want to provide rating of like uh exceptional amazing product PR D ever or something like that amazing product ever and now if I click on this submit and here you can see my review is totally added now I'm going to just click on the all reviews and here we can also see all of the reviews right here so this is the admin who did this review and this is the Robert who did their review right here so now if I click on related product it will now gives us all of the related products right here okay so we can add this product to the card so now I'm going to just click on the addir to card so let's just click on that and here is our card word here so from here we can just increase the amount or we can also delete that right here so I'm going to just click on that and delete that right here from our U from our card right here here the next thing which I want to show you is the shop so I'm going to just click on the shop and this is how the Shop's going to look like right here so we will see all of these products right here and you can add more but in my case I was supremely lazy so I just add these few products right here okay so here you can see the categories so you can filter the products by categories you can filter the products by Brands and you can also filter the products by a specific amount or a specific price right here so let's suppose if I want to just get a Macbook so if I just click on the the MacBook right here so it will gives us all of the MacBooks and all of the brands which are related to the specific category so in this case we just only have one right here which is Apple so we can just only choose this apple right here so if I just click on this PC and it will gives us all of the categories which we have for all of these products right here like we have a cyber power PC we have MSI we have this PC right here okay so we can choose different kind of products based on these categories and also based on these Brands right here okay so if I just choose this I don't know cyber power PC or if I click on MSI it will gives us all all different kind of products to be precise all right so I'm going to just click on this reset button one more time so it will reset all of that filtering right here okay so if you just click on I don't know corx it will only gives us the correct product if you click on the Amazon Basics it will only gives us that if you click on the Puma it will only gives us that product and let's suppose let me just reset that one more time so if you want to search for a specific price product so I'm going to just copy maybe this product right here this amount and I'm going to just place it in this input right here so it will just search for that but we have to remove this dollar sign and here you can see we have this specific product right here okay so everything is looking smoothly so let me just reset that one more time so let me just add a few items to the card so I'm going to just add this item and also maybe the shoes and also maybe this um MacBook or also this clean desktop right here so I'm going to just add all of them to my card then I'm going to just click on my card right here and here you can see all of their products which we just added to the card we can increase the amount of that if you wanted to so maybe I'm going to just leave it the way it is and we have four items and we have the total price of this right here so now let me just click on proceed to check out and here we have to specify some sort of a location right here so I'm going to just specify like USA let's just copy then place it right here for the postal code I'm going to just Pro gibberish and also let me just provide a country of USA one more time and click click on the continue and here we have the product summary right here we have the item price we have the shipping price the tax price total price we have the location and we also have the payment method of PayPal now let me just place the order so if I just click on there so here we can see all of the products here we can see the shipping address it is not paid yet so that's why we are now getting this not paid and this is the order summary but now we can purchase this item by using PayPal or all of these other ones or a debit card if you wanted to I'm going to just click on the PayPal word here and here I'm using a fake PayPal account and I'm going to also show you how to do that let's just log in first of all and we can choose different kind of services to pay for this item and you don't have to pull up your own real credit card and buy these items this is going to be totally fake but I'm going to also show you how to make it real okay so I'm going to make it real a bit later and which I'm going to obviously show you how to make it real but for me this is totally fake right here so we just log in as John do right here and so here you can also see your location right here which is totally fake okay then I'm going to just click on complete purchase let's just click on complete purchase and here you can see we already successfully pad and here you can also see when this product was P right here so this is how this entire project looks like for a specific user so if I just click on that and we can go to the profile we can update our profile and we can go to our specific orders so in this case if I just click on the my order right here so we just did only one order and the delivery is currently set to pending because first of all we have to log in as an admin and we have to mark this item as delivered so then it will be completed right here so we can see the order image we can see the ID and the date and also the total amount and the paid status and delivered status so we can also click on The View detail and here you can see we have our product right here okay so this is how this entire project should look like for this one specific user right here okay so I already forgot to show you how to log in so let's just uh let me go back and let me show you how to log in I just show you the register one but I forgot to show you the login so we already created Robert so let's just uh provide the email address of Robert gmail.com and robert2 right here if I click on a sign in and here you can see we log in as Rober right here let me just log out and now let me just show you this entire application from the admin perspective so I'm going to just log in as an admin and you can provide more admin you can provide your own name as an admin but in my case I just for my name as an admin and now let me just log in as an admin so my password was hosan 123 I'm going to sign in and now if you check out the navigation so we can go to the dashboard we can go to the products the categories order user profile and all of that so what I want to do is that I'm going to just show you every single thing from scratch I'm going to just first of all go to the profile so the profile will be totally the same as the user like we can update the name we can update the email the password if you wanted to just click on this update button and it will update it for you and we can also go to our own orders and we can check out all of the orders which we did so currently we just have like no orders so that's why we cannot see anything and now let me just show you uh what do we call it the users right here so if I click on the users so it will now gives us all of the users right here so we have the user IDs and we have all of that users inside our database so we can update the user so we can update the username and also we can update the user email and all of or we can even delete the user if you wanted to so let's suppose if you want to delete I don't know maybe want to delete this mango so I'm going to just click on this uh delete icon click on okay and here you can see that mango is gone from this list right here okay so that was for the user list now let me just go ahead and go to the orders right here so if I just click on the orders so it will gives us all of the order details like um the item image also the ID also who did that order when that order was created and the total amount of that specific order and also the paid status and also the delivered status so now we just created this order right so this Robert uh make this order right here of this amount of money and he already paid so now if you wanted to make that as delivered so we just have to go to this specific product so I'm going to just go ahead and click on this more right here and it will now brings us to this specific user order and now if we click on Mark as delivered and here you can see that order is now successfully delivered so now if you go back and here you can see that delivery is successfully completed right here okay so this is how we are going to be checking all of the users orders now let me just go ahead and show you the categories right here so if I just click on the categories so these are all of the categories which we currently have so we have cameras we have sofa gemm shoes uh MacBooks PCS and all of that so let's suppose if you want to create yet another category of like I don't know maybe uh I don't know keyboards or something like that if I click on the submit and it will just create that category right here so if I just click click on the specific category I mean like that specific yeah specific category so we can update that category we can delete that if you wanted to so that's then now the next thing which I want to show you is the products right here and this is complex I'm going to just go ahead and so we can also navigate through by this drop down menu or we have this specific admin menu right here so if you just click on that we can go to the dashboard we can go to the category the product I me like create product all the product manage the users and manage the orders if you wanted to so I'm going to just go ahead and show you how to create a product so I'm going to just create a product now let me just click on upload the image and from here we can upload different kind of images right here like I don't know uh maybe I'm going to just upload this shoe right here let me just select this image and click on open and here you can see our image is now successfully added we can give him some sort of a name like uh I don't know uh Sho or something like that and price will be like $400 the quantity will be I don't know 521 the brand will be I don't know Nike or something like that and this is the best um shoe come on shoe ever b or something like that okay and count in stock we can just provide like I don't know 20 in stock and we can also provide a specific category so it will go to the shoe right here and we can create our categories from here I already show you that so then let's just click on submit and shoe is created right here okay so it will give us that popup box so now let me just go ahead and check out all of the products so let me just click on the products let me just click on this drop down menu and go to all of the products so let's suppose if I want to see all of the products or update all of the products or delete all of the products I'm going to just click on this all products right here and it will give me all of the products which we currently have inside our database so let's suppose if I want to update a specific product or delete a specific product so I'm going to just click on this update product right here and here you can see we have update delete the product image we have all of the detail about this specific product we can either update this product or we can totally delete that from our database so let's suppose if I want to update that so I'm going to just write like I don't know amazing um desktop or something like DK t o there we go so now I'm going to just click on this update and it will now successfully update it right here so now what are we getting we are now getting the title of amazing aming desktop so if I click on this update product one more time and it will now brings us to this specific product and here you can see we have this amazing desktop right here as a title so the next thing which I want to show you is that how to delete this product completely from our database so I'm going to just click on delete are you sure you want to delete this product yes I am I'm going to just click on okay and here you can see that amazing product or amazing desktop is totally gone from this database right here okay so this is how we are going to be checking all of the products so now let let me just click on this drop down menu one more time and let's just go ahead and manage the users so I'm going to just click on the manage users you already saw how to update or delete a user specific user so now let's just click on the manage orders and you already saw this page too so yeah this is the product which we are going to be building throughout this series right here and you are more than welcome to provide more functionality to it more styling to it but I just want you to know that I spend a lot of time building this project and this is the third version I'm building right now and I just want you to know that I already recorded all of the videos but I did not edit them so it will take me a little bit time to record I mean like to edit them so once I'm done with the editing so then you'll see all of this entire project in a few days so yeah I'm going to see you in a few days but before I close up this video first of all I'm going to show you like how much files you are going to be creating for this project okay so these are all the backend files which which you are going to be creating and these are all of the front end file which you are going to be creating for this project right here oh my God that's a lot that's totally a lot and we are going to be providing a lot of functionality too oh I forgot one more thing to show you the admin dashboard let me just click on that and go to the dashboard right here and this is how the dashboard looks like and we are going to be changing dashboard a bit later but I'm going to just make a separate video on how to refactor all of that styling and and the code and all of that so we are going to be changing this dashboard but currently it looks something like this so here you can see we have all of the sales all of the customers all of the orders and I know this is looking awful for now but if you do a lot of orders uh you're going to see a lot more bars right here and here you can see all of the orders which we have right here so yeah let's just start this monster from the next video so very soon I'm going to see you guys in the next video take care

Channel: HuXn WebDev

Views: 10,516

Keywords: MERN Stack, E-Commerce Development, Web Development Course, Building an E-Commerce Website, Full-Stack Development, MongoDB, Express.js, React, Node.js, Web Development Tutorial, Online Store, E-Commerce Platform, User Authentication, Payment Gateway Integration, Scalable Web Applications, Shopping Cart, SEO Optimization for E-Commerce, THE BIGGEST MERN STACK E-COMMERCE STORE ON YOUTUBE (INTRO), huxn webdev, huxnwebdev e-commerce

Id: PRpTY5LS95M

Length: 14min 55sec (895 seconds)

Published: Wed Oct 25 2023