React JS Project : E-commerce website with Reactjs, Tailwindcss, Redux-Toolkit || FREE source code

hello everyone in our today's video we're gonna explore that a beautiful looking e-commerce website and at the end of the video I'm gonna provide the source code so you can have this website too in your portfolio now first of all what are you gonna have in this website as you see we have a banner with the logo and then add a tab which gonna take us through the other page to home shop about contact and journal so whichever phase is active it gonna reflect over here now the home is active so we can see it's reflected now if we go to the shop it's reflected also and then we are gonna having that shop by category button which we can make a shop by category and then we're gonna having our search pattern I just search a type something you're gonna it's gonna search through with that with it gonna match through with the text and search so let's go and the tea table on simply you see it's coming with a unique inline uh destination as you see is going to the product then it's coming with the T table is taking through that headings that a product title and then combining is as a route and from here also you can see the view details about that about the color and categories you can add from here also in that product view details one and then also you're gonna have that in line way that from which area you reach over here from the product then the teachable so it's a section over in the product now after that over here that's your personal information table over here there is the login sign up profile and others if if you just want to see the login page go to the login if you are not logged in it will show us to login and it's coming with a validation over also then we're gonna have to go through the sign up if you doesn't have the account now in over here as you see every single field is validated so you need to feel like fulfill every single uh field over here and then after that we have a slider a beautiful looking slider you can scroll through and also it's having Auto slide but as you see it's clickable one if you click on it it's gonna take you to that offer whatever offer is having in the table as you see in the product view there is also so many things happening which I'm gonna come later on now after that in the right section you're gonna have your profile if you see on CEO hover on it the icon is reflecting if you click on it it will take you to the profile we are not signed in the Surah is taking us to the sign in option and the same way it gonna also take us to the cards and now after in that bottom we're gonna have the sale product if you click over here it will take you to the product section and then in the bottom we have the new arrival section the product which is arrival the newly arrived it can be located here and by the way it's fully responsive so don't be freaked out the website is fully responsive and it can be a very good asset to your portfolio and then also you can add product details and everything you can do you can compare you can add to the card you can go to and see the view details and you can add the to the product also from here and now after that we have that bestseller products available here we have the product of the Year section the banner section same like the banner we have a special offers and then we have the filter in the filter we have a little a title description and my social link available and of course it's my YouTube channel don't forget to hit the Subscribe and like my video and then we have that accessory section which is the top uh like the title one you can click and it will reach to the other side and also we have that subscribe button if you click you see the validation going on if I type something it will not be because you need to give a valid email number so just keep a valid email number so it's gonna show you you subscribe successfully so now that's pretty much everything will be in the home page so let's go to the shop page now in the shop page there is like you can toggle through with the shopping category you can shop uh like you can toggle through the color through the brand and price and other things and just see one thing there is like 3 6 9 and 12 products because I created position over here once you just you want to add 24 products if you click it will add 24 products over here as you see that products from 1 to 24 or 46 total 46 Forex I have over here so that's the very good one if you just want to feel free to make something changes over here it will reflect also so now let's add some more products because we just want to make us some shopping and now let's go to our shopping cart so what we're gonna have in our shopping cart as you see in that over here we have the title about the product price quantity and subtitle and this is the item price over here we can actually add some more product and the price is reflecting over here we can delete it in the backwards but we cannot delay it till is one because I cannot minus we cannot remove the product from here if you want to delete that product just type click on that cross button it will delete the product and also by the way you can reset your card and you see it's coming with a message that your card feels lonely is empty car and also if you just click on the continue shopping you can just go back to shopping so let's uh just add some product and now that proceed to check out I keep pending for you people because that can only be happened once you give your credential to create the login page registration authentication only then you will be able to create that and also in the about section you can add your details whatever things you want in the context you can also as you see you can anybody can contact with you like if I type my name you I need to give that actual mail otherwise it will not work hello from me so now I want to post see thank you dear so it's taking the name the one which I just now type okay then your message has been received successfully further details will send to you by the email I have been giving so the name and email is saving in the state and giving me that same thing so that's cool right and then also we have the journal section so that's pretty much everything you can customize it the way you want because I'm gonna give you that code and let's go to check is responsibility like responsiveness and you see once we coming in this smaller screen by the way you can just drag over here and you can do it but I will use the response like the response nail tool to that is a little bit about true way if I click and the toggle through with that button I can actually close over here by clicking it and also I can go in any page from here just by clicking on that so let's go to the home page and you see even our our slider is responsive right it's highly responsive for that small page so it really can be workable for you if you having in this in your portfolio so you if you just slightly scroll through to everything it's fully responsive trust me and this two button is not available for the smaller display because it will looks a little bit messy so after the screen size getting larger I'm adding that button so that's pretty much everything so now the question is how are you gonna have this website for you you don't need to code with me okay I'm not gonna show you how to do it I'm gonna give it to you so you can use it in your portfolio but how you can use it if it doesn't have that coding background don't worry there is nothing uh to be already I'm gonna show you how you can have it okay to compile that website as you don't you need to know about the node.js because you need to have the installed in your machine otherwise it cannot be run and also you need to have that Visual Studio code and then you need to have that prior knowledge about the telling CSS because all the design pattern is happen with the talwin CSS and you need to have the acknowledgment of react and JavaScript pretty much that's all you need to have and the code how it can be available for you as you see I have a GitHub account so in that over here I just committed that is already shopping and that repo is public so either you can come over the repo and from here you can uh like the Clone it you can download it the way you feel free and if it doesn't have that GitHub account don't be hurry I'm also giving you that a free Google link which I already just if you go to that share link is all access is there anyone with the link you can edit it you can copy and then it should be workable so now how it can be uh like a master rise so let's see I'm gonna show you how you can do it I'm gonna use that GitHub repo so I'm gonna clone it from here and let's just uh yeah clone uh let's just close other tabs I'm gonna just keep that one open now I'm having my folder over here so I'm gonna open my terminal on it and then I'm gonna write that git clone so I'm gonna clone oops uh yeah I'm gonna clone it again because I click in the wrong button so that's from here and then it clone I'm gonna paste it so now it's gonna clone everything over there the full total website is gonna clone and by the way all the images are static or everything is and don't worry there is no viruses available because it's also getting support from the GitHub so nothing is uh like uh harmful there for your computer just download it clone it and it will be just fine for you as you see it's already cloned so let's see what is clone so let's go to that folder already be shopping and now I'm gonna open it inside my code editor and now I received there is everything related on that file is available over here we have a build folder because around build on that and for that one for our today's build either you uh what I suggest you you can just remove that build folder that's not a required for you because you're gonna build it by yourself so let's go to my terminal and if you're using the year you need to just write that in ad if you're using the npm you just need to do is npm install so it gonna install everything and What's It Gonna install just see over here it's gonna install Redux because we are using Redux to managing the store and also it gonna install that frame or motion to creating the motion react react icons which I use for the icon and react business which for the position Redux which is coming with the Redux toolkit and react router Dom to creating that link and also I use that react Sleek to create that beautiful slider versus to save that in local time and Slick Carousel I use talwin is scorable I used and also I use the talvin CSS so everything is just not that much dependency over here so now what I'm gonna do I'm using the npm so I'm gonna use that npm install so it gonna just download all the install all the dependencies related to run the project so while it's installing let's see the structure of the project I have a source folder inside the source folder I have all the assets available I use pretty much all from the local site so you can understand how you can create so whatever image I use in the banner for the slider image that's the image I have over here and also the image for the products the best seller products the new variable products and special offer products over here and the sale products so that's the images empty card and that's all images I'm not importing those images one by one what I did I created one file index.js from here I'm importing all the images from my local file and then I'm exporting all the images from here so now I can if anything wrong with the images I can come over here and check it so in that way it's very simple to me to import all the images so that's the assets I have for this project then I have that component section and I keep everything inside the folder structure so you can understand if you go to for looking for the banner you can see all the banner details available over here if you're looking for the designing layouts for the button design for the flex Image Design if whichever you find in I created in locally is available over here thus the things which I imported inside the home page so that's the home component whatever the best seller the filter header whatever I used in the home you will find it over here and the page props is coming from the page Nation product details shop page and also that special case there is one special case available and that's also you can find it over here so that's the component side so it's already installed so let's put the npm star to start in our local server so that's pretty much everything it just that's the things you need to do actually nothing to be ordered for right and then I have that one constant folder from there I'm importing all the assets like I have that never list which I have a data title and with the link whenever I'm clicking which route is taking me and then I have the special offer data over over available and the presentation item this are pretty much all the items available here in this folder structure in that constant and also you see the pages I have that about page data this is every single page with having a folder so you can identify pretty much easily and is the account page sign up sign in then I have the curve page I have the contact page home page Journal offer payment product details and then the shop page and by the way all the things is passing out from that index.js but the starter point is my app as you see I'm giving it from the app and I'm wrapping our app with that our Redux and also with that persist get to save the product in a local local page like whenever you are adding some items in the curve if you refresh the page it will stay there because it's saving in the local memory with the purchase get so it will not go okay then I have that app and in that app I am passing all the router setup maybe you have some more routing setup if you can modify it you can modify if you because as you see also click in a product is taking that ID and that ID is the product name so by that way I'm going through that link so pretty much if you explore a bit you can understand it much more better as you see it's running in my local machine if you did that the way I said it will be available in your local machine right now so now that's pretty much everything to you need to do to have it now you can change the logo you can change like if you if I want to change the banner okay I want to change some Banner data now where I have the banner let's go to uh I think it's a header yeah it's header so let's go to our component let's go to our home the header is inside the home section let's go to our header that is the header so now in that header as you see we have that never list which that never is happening so if we click on the list it will take two on that index which is coming from the constant now with that shop I want to change the shop I want to make it like marketing okay let's see it will change that shop now we see it's changed to marketing so that's pretty much simple to change and you can do it so just what I suggest you because all the image are are locally right so you can arrange your product the way you want so you can change the product image right you can download some image or you can link the image and how you can modify that one is very simple like uh let's go to let's go to like uh pixels because I'm gonna show you how you can add one product over here let's take chart don't be hurry maybe my network is a little bit slow okay take uh okay it's coming so what I'm gonna do I'm gonna okay I'm gonna just open that in a new tab so I want to add that image okay I want to add that image any of the image available over here so this is the cap for boys right and now I have an image over here which I'm passing from my local Mission so but now I want to add the image the way I want so let's save it so some of the maybe one of the image will be on that right so let's just hit refresh I think we're gonna see it somewhere because we change that image so let's go to shop uh no it will be in the special section here remember it's a special image we change so let's go to a special offer okay it should be somewhere actually which one will change so special offer data okay so you should have been four products and that one actually special offer 201 Capital boys okay let's find that one careful voice but where is that data should be available oh sorry I think I didn't use that one somewhere so yeah yeah I just remember because I use that with other products so let's change some data from the presentation items so that pagination items is reflecting all the products item available which is in the shop if you come in the shop you see that product is available over here so image is changed so in that way you can just you see if you want to change you can also change the title the way you want is the card for cap for boys and let's just make t-shirt for voice and also we change the price from here 75 I see that's change if you add to curd if you go back here that's the same way so and as you see this image is not looks that much good so what we need to do let's go to cart page we'll just uh refactor and do that so that's the card and now on that page over here we're gonna find that product so just I think the item card so let's see that's the item the price item dot Name ID so where is the image that's the image giving within height so now we just make that object cover and I think it's gonna reflect over here also you see the image is fit if you change contain the way you want it will be same the way you want it to be seen so that's very simple to create so in after having uh that all the conversation with me so whatever I said if you feel free and follow through you're gonna have that in your portfolio then go through one by one all the folder step you can just you're gonna find everything reasonable and if you modify it by the way there is uh Redux toolkit over here this store I have been created which I am saving with the Redux persist and that is the slices available for us user info is null I didn't create because you need to create the user cutting Shield that's the products from where I'm giving the initial listed and then I'm passing all the like add to card increase quantity decrease quantity delete items like the reset car everything is passing from here if you want to modify feel free to modify and do all the changes you like but trust me if you just if you don't do anything but you just understand that if you have the node.js information if you know how to just having an idea of little bit of code this website this portfolio can sorry this e-commerce website can be in your portfolio you can show it in your portfolio and you can link it now this one can be available for you so now by the way even you have that portfolio how you can make it live right because it's a react application so let's go now as you see I have that application over here so after having that how you can deploy it how you can have that in your own like with https that you are you need to show someone right so to do that what I'm gonna do I'm gonna close my terminal and to make that happen you need to install the git in your machine right otherwise it will not work you need to just go to the gate and download whichever version is record for your mission it will be pop-up over here download and give the pathway it's very simple to organize and you can have it and after having that you need to initialize that git in it and that it will initialize the git over here then you need to pass the common git add it gonna add everything to that repo and like then you need to pass that git commit so I'll pass that initial comments oops now it will save everything in the comment right and in the if if that git ignore is not coming with that automatically you need to add a file in the roots of your road uh like the road directory of your project and here you need to just avoid that note modules and other things otherwise it gonna put so many things in that GitHub repo which is not mandatory so now you need to open your GitHub account otherwise if you haven't gitlab get bucket wherever you want to and now from here I want to create one account and that one will be uh oops it will be test project and I'm making it public so you can view it also now as you see there is a branch everything which I'm having in the master maybe you can have in the main so what I'm gonna do I'm gonna connect my repo with that git remote so now okay get remote origin so okay there is uh okay let's see which I have before git status ah okay okay because that gate was previously before it was happened which I didn't remove that's why because we cloned so we need to remove the repository from there right like if you are having that from my repo even you do everything you cannot uh because you need to remove the git repo so you can do in two way first of it you can do it from here inside that RB shopping you can alike remove that you can just delete it from here or you can just type that command over here rmrf.kit so it gonna remove that git folder from here so now let's initialize that git in it again and then now it gonna create that git uh repo again from the beginning and as you see I don't have oh like everything is clean over here and I'm gonna pass that git add so it's gonna add everything but remember it's adding everything remember the node modules everything is added because I don't have that git ignore anymore so that can be and a very uh bad things because it's gonna put so many things for you so what I'm gonna do I'm gonna revert it I'm gonna remove the git again so and then now I'm gonna put that oops it will be get in it and now what I'm gonna do in the root directory in the root folder the top up there I'm gonna just type A git ignore and now I'm gonna pass that oops it will be not module that's the module oops it will be modules node modules or you want to avoid that note modules from here so now we're gonna pass that gate at and now it will see it's just adding little bit few files which is not required for the GitHub so now I'm gonna make that git commit which will be my initial comment oops it will be initial comments okay as you see you need to be very careful with that you need to it will be same clone either one or two so I give two before so let's end up with two and now what I'm gonna do I can initialize with that that git remotes and also I'm gonna do git push origin now whatever the line you have over here if you have main you can do the main if you have Master you can just type simply the master so after typing those things it gonna push everything through my GitHub account it will be available over here and from like if I just refresh as you see everything is available over here now that one I can deploy in the netlify are reversal so to do that you just I will definitely I'll just deploy in the virtual you need to open a virtual account just go to versal.com it's very simple you just need an email or your GitHub account that's very simple to do it and because I'm gonna using my a GitHub repo so let's open a project and then from that project you see the test project is available I'm gonna import that and I'm gonna just deploy it that's it so now what it gonna do it gonna fetch everything and by the way we're not pushing that node modules because it gonna it's gonna initialize that from the beginning whatever the packages we are using whatever the directory we're using it gonna update everything by itself and then it gonna deploy it to their server so now it's you see it's giving everything from the person list like the browser list everything is updating so just give a few little bit of time to that to upgrade and deploy it and as you see it's taking so fast here it just did everything well as you see we are in our dashboard and if you want to just see uh what if you want to see that build log and everything is available so you can see from here also the deployment history but right now I don't want to say anything because it's success as you see is having the test project rosie.versal.app and it will be live pretty much very simply to having your website and also by the way you can actually rename that one as the way you prefer you can connect it to your domain and you can rename or whatever you want to do so let's uh load that page when you're initializing from the first time like if you are opening that from the first it will take a bit of time let's roll it Gonna Save in the caching data so you can see it very easily so from that gets a repo remember we are deploying it now it's not my project anymore if you did did everything perfectly now that's your project you can put in your portfolio just change the things the way you want and you can like it's a very good asset for your portfolio I didn't have that once I start building so now you can have it you can do it as the way you want just to the Subscribe right and hit the likes button to just having some contribution to so that other people can reach all the link like the GitHub repo link and also the Google Drive link it will be available in the description I'll give my mail you can mail me you can uh comment me everything if you are facing any trouble any issues let me know I'm gonna help you with that and if you are really willing to convert it in the JS to create it in the next chest just put uh in the comments and if I reach more than 20 requests I'm gonna create it in the next yes okay so hope you can do that by your own and you can let that happen make it the way you want so we'll see you in the next video wish you good luck with that

Channel: Noor Mohammad

Views: 51,495

Keywords: e commerce project, react js project, e commerce website project, e commerce website project react js, e commerce website project using react js, ecommerce project react, ecommerce project react js, react js, react js ecommerce project, react js tutorial, react js source code, react js project with source code, e commerce project in react js with source code, ecommerce free website, free source code, react js project free source code, ecommerce website in react js

Id: _JluE_1oGnI

Length: 29min 53sec (1793 seconds)

Published: Thu Jun 08 2023