How to build an eCommerce Website using React Redux, GraphQL, Firebase #1 – Basic setup and homepage

welcome to the first video in this brand-new video series on creating an e-commerce website using react Redux and firebase now in this first video I'm going to be introducing you to the project we're going to look at the project architecture and we're going to build our first components this includes a header component and our directory component and later on in this series we're going to use that to send users to different types of products that we want to build into our application by the end of this video tutorial we're going to introduce you to the project architecture as well as building out these initial components now this tutorial and the tutorials to follow have been brought to you by simple tech comm so I want to encourage you guys before we even get started to visit our website that's simple comm we post links to not only this playlist and this tutorial series but all the others that we create and we'll add to that going forward we also have links to all of our open source github projects that I also want to encourage you guys to check out you can either find links to those in the description of this video or you can head over to our website again simple calm or you can visit our official github page which is github calm for / simple Tut our official YouTube channel again youtube.com forward slash simple - we post a lot of new content on a regular basis we have an entire series we just finished on testing within react I really want to encourage you guys to check out all those videos but do please subscribe if you're new to the channel if you're looking for JavaScript and react based content then this is really a great resource for you and I want to encourage you guys to check it out and and please comment subscribe we do check all the comments and we do rate it and it does guide us in terms of the kind of content that will be looking to cater for coming going forward into the near future I also want to encourage you guys to check out our official Facebook page you can find us at facebook.com forward slash simple touch okay so I really want to get up and running with our project as quickly as possible and with this minimal configuration as possible so to get started I'm gonna be using create react app now if you aren't aware of what that is it's basically a boiler plate for a react application created for us by Facebook now this is also now Facebook also created react itself so you can rest assure that this is a very high quality boiler plate now what I've done is I've created a new folder on my desktop which I'm gonna be basically using to store all of my application files etc so I'm just going to create a new terminal window here I'm going to be using I term you can use any terminal you want I'm just gonna CD into that particular directory and then as you can see here these are the commands we need to type out I'm not going to be using the typical my app directory it's gonna basically build this in this folder directly so let's go ahead and create that was finished installing create react app I've switched into a feature brunch which is just called tutorial 1 and what I'm gonna do is I'm going to run the application so let's go ahead and do that we can just type in NPM start I just a heads up you guys are gonna have to have a few things installed on your machine to follow and code along in this series you're going to need to install node on your machine you're gonna need a chat text editor it can actually be any text editor that you like but I would recommend installing vs code apart from anything else just being able to follow along with everything that I do I'm gonna be using vs code so you can follow along a little bit easier for using the same software but of course if you have other other preferences you know sublime text or atom that's absolutely fine that's up to you ok so I have this application running now as you can see it's just a boilerplate it really doesn't have much to it it's just a single page obviously this is a single page application but it's just one page it's got a s a little bit of text and a link and of course we want to build something a lot more complicated than this we're building an e-commerce website so there's a lot that's come along with this boilerplate that we don't want and we really want to rip out so let's go ahead and make some of those changes right now so I'm just going to go back over into my text editor and I'm just going to make some changes so I'm gonna go into the source directory and you can see here we have our app CSS now of course I'm gonna make some breaking changes here so don't be surprised if things don't work initially but don't worry I'm gonna show you how to fix it so let's delete some of these files so I just deleted the app CSS we're gonna be replacing that we're actually going to be using s CSS we have this test here now I'm not going to be writing tests in this series I think it's going to be covering enough if you're interested in how to write unit tests then I have an entire series dedicated to testing with react and redux so please head over to our YouTube channel youtube.com simple Tut look at our playlists and find that so let's just delete these tests we don't need the index CSS either and of course we have our index J s that's fine we don't want our logo SVG we have a serviceworker we might cover that a little bit later in the series but for now we can get rid of that we have set up tests I've already mentioned we're not going to be writing tests so we don't need this we have our yarn lock here some people recommend committing this with a project I'm not really convinced that's the best way to go so for me I'm actually going to remove my yarn look we have a readme here this is actually just a default create react at readme MD file I'm going to strip all of that out and over here come over to our public folder we have our index.html file we have our logos I'm just gonna delete these logos we don't need those and pretty much everything else for now is okay I'm gonna get rid of the favicon icon as well and I'm just gonna delete that I'm just gonna come into index.html and I'm gonna remove or for now I'm just gonna comment out the link that includes that favicon we'll probably upload our own custom one or if you want to yourself you can you can replace it here but obviously I don't want the default one so I've just removed it for now let's come back over to our source folder and of course we're gonna have to remove all of these references to the assets that we've just deleted so if you actually come to your browser right now you can see that everything is failing to compile because it's looking for things like the serviceworker that do not exist anymore so let's come over to our text editor let's remove all of those assets so the logo the CSS we don't need that we can actually remove all the default content in our apt ES file so let's do that - it's a lot simpler now let's go back to our index J's file and again we have links to the Service Worker we don't need we don't have index CSS anymore and of course we can remove this bit of code down here related to the serviceworker let's save that and let's come back over to our browser and you can see we're just getting a blank page if you check the console you'll notice that there are not any kind there are no errors now because we've cleaned up the application there's nothing actually to show so let's come back over to our index file and let's go into app KS and let's just write in the note the standard hello world and save it now we have hot reloading so if you didn't know what that know that before you can see it's automatically reloaded and you can see hello world so we know that the application is not erroring anymore we've removed all of the garbage that came along with crate react that we didn't need and we can just go ahead and start building out our application we've already made some significant changes to our application and we should really check in our code at this point so let's come back over to I term let's quit our application let's run a get status let's add and commit all of those changes I'm actually going to add this change for the yarn local file - ok let's commit and let's just call these changes clean up you get status ok cool alright now what I want to do is I actually want to think ahead and what I want to do is actually want to use s CSS in this project right I don't want to write standard CSS now s CSS is the bracketed version of sass and sass is of course a CSS preprocessor that allows us to do some fancy things in CSS things like you know mix-ins which are basically functions within CSS but the main benefit is being able to use that tree like structure in our CSS that just makes it much more efficient now of course sass and scss is not standard CSS it's not supported in even modern browsers so it has to be compiled into standard CSS on the build and transpile and compile stages of our application workflow so what we're going to do is we need to install a single dependency with create react out to actually allow us to do that so to do that again I'm just going to say NPM install no sass and we're going to go ahead and install and what that will allow us to do is really with minimal effort we can now use scss within our project now if we actually weren't using create react app and this is one of the benefits of using create react app we'd actually have to configure that with webpack and it would be a little bit more complicated but because we're using Create react app a lot of this stuff is taken care of for us we don't have to worry about this this foundation level configuration of our application which is really fantastic so let's go ahead install its dependency and move on to the next step at this point we're ready to restart our applications so npm start and once that starts up its gonna launch our browser again we're gonna have hot reloading and we're gonna see our hello world okay so let's create our header component so to do that I'm gonna create a components folder inside of my source directory in there I'm gonna create a header folder and within my header folder I'm gonna have index J s and I'm also going to have styles s CSS great okay so within index yes I'm going to import react from react it's gonna be a functional component so it's just gonna be Const header equals props and a functional component it's just gonna return something for now we're gonna have a header and export default header so up here I'm also going to import that stylesheet right so I'm gonna have import style start yes yes and it's best practice to just have a line here okay so what I want to do is just have a class name I'm just going to call this my header and within this I'm going to create some basic styles so I'm just gonna target the header I'm going to set the height to something like 65 pixels now actually what I'm going to do is I'm going to use REMS which is a CSS measurement unit so what I'm actually going to do is within my root directory so the source directory I'm going to create a new file called default s CSS and within this I'm going to come to my app j/s and I'm going to import default dot s CSS right so we're going to import that from our root app.js file and I'm going to use this to target the HTML and the body and first of all I'm going to set the height which is very important to 100% but I'm also going to just set some a style on the HTML which is the root element of our document right I'm going to set the font size to 10 pixels that means I can come back over to my header style my header style sheet and within my header style sheet I'm going to set the header to a height of 6.5 REM that is 6 that is basically 65 pixels and I'm gonna set a box shadow of 0 pixels to 4 pixels 0 and then rgba we choose a color I'm gonna set it to something like this and what you're gonna see here I'm also gonna come back over to default.css and I'm going to target everything and the books sizing to Porter box right I'm gonna add some fullbacks in here too so just bear with me this is just setting up some default styling and I'm gonna come back over now to my app J s and I'm going to import my header component so let's import header from my components header and I'm just going to include that on the page like so now if I come back over to my browser you're gonna see that here we go we have our we have our our header here is now included on the page but it's still not quite right we seem to have a bit of space between our header is not fully the full width of the page let's come back over to our our default style sheet I want to set some additional Styles here I'm just gonna set the margin to zero and padding to zero let's come back over and you can see now that our header is edge to edge it's full width and we just have this nice shadow that just lifts the header a little bit off the page to just you know bring a bit more attention to it that's cool I'm gonna come back over to my text editor now and I'm also going to what I want to do is I want to include a custom font so I'm gonna go over to google fonts and this is just a way of getting some free fonts and I'm gonna use open sans and I'm just gonna say that I want to use this so I'm gonna select this style and we want let's go with light we want regular and we want bold and let's go ahead and embed that it's gonna give us a link to a style sheet we're gonna copy this we're gonna come back over to our text editor and we're gonna go to our public folder and index.html and we're going to include a link to this in our header in our head so just above our title tag we're gonna include a link to that style sheet let's come back over to this and grab the font family and let's come back over to our text editor and within our text editor we're going to come back over to our default s CSS and we're going to target the body and we're going to paste in that font family we're going to set a default font size of about 18 pixels which is a 1.8 REM and we're going to set a line height of one you can either set a line height of 1 or you can just not set a line height I'm going to set a line height of 1 and we're gonna set a font weight of 400 which is regular and we're gonna save that I'm also going to set some default styling on my links right and also where I've set the books sizing I'm just gonna add a comma here and target the before and the after pseudo elements too and what I want to do with the links actually is I just want to set the text decoration 10 none and what I also want to do is I want to add a base transition right and I'm just gonna add a transition of let's say 0.4 seconds ease in and out and let's add some fullbacks here cool alright so we've added that that's all in place so let's come back over now to our home page let's close up Google so you can see here we have our font open sans we have our header on the page but what I want to do is I just want to add my logo in my header and I just want to Center the content on this particular page so to do that I'm just gonna minimize the browser and minimize my text editor and on my desktop I have i hack Chua we have a logo right so I'm gonna come into my my actual files here and into the source directory and what I'm gonna do is I'm gonna create a new folder called assets and within assets I'm going to just place my logo dot PNG and all this is is just the simple set logo right so let's come back over now we've moved that into the folder back into vs code you can see we have our assets folder logo dot PNG and what I'm gonna do is within my header component I'm going to add a wrapper right which is going to be a div with a class of rap and within that I'm gonna have I'm going to have another another div here which is just gonna be with a class of logo and we're gonna have our image now the first thing I'm going to do is I'm going to import my image so this is my logo we're gonna import the logo from and we need to come out of this directory out of the components directory we need to go into assets and in here I have my logo to PNG right and then what we need to do is we need to take our logo and for the source of the image we're gonna add that and we're gonna add some alt text which is gonna be simple Tut logo and that's our image right that's our image tag so let's come back over to a browser and just see what we have so as you can see we at the moment we just we've included our logo but it's not looking the way that we want it to look so let's come back over to our text editor and we can come back into our s CSS right and what we want to target first of all is our wrap right and we want to set a max width on this to about 1450 pixels and we want to Center it with a margin 0 or so and then we want to target our actual logo so what we want to do is on the wrap we want to set this to position:relative and on the logo we're gonna say position is absolute we're gonna set this 0 pixels from the left in fact we're actually going to set this to be 10 pixels from the left but from the top we're going to set it to 50% and we're gonna do a transform translate on the y-axis minus 50% and this is going to Center it for us right okay so let's come back over to the browser and you're gonna see that we have now got this actually it's not it's not positioning it quite right so let's come back over to our text editor we are so the wrap actually we need to make sure that this is the same height as the parent so it lists at that to a hundred percent that's now centered but it's certainly not the right size so let's come back over to our text editor we're gonna set a width on our logo to be about 1 thirty basically 130 pixels okay we load that still not quite right let's target the image tag display:block with 100% and a margin of zero and let's come back to a browser there you go it's not quite right uh it needs to be REM and that pixels and there you go so now we have our image appearing the way we want it to in our header okay so so far we've built our header component but what I want to do next is build our directory component and this is basically going to allow the user to select for either men's or women's clothing these are categories that they can search for later on when we build up our product pages so what I'm going to do is I'm going to go ahead and come back over to my text editor and i'm going to create a page component so within my source folder i am going to create another folder called pages and within pages we're gonna have another folder called home page and within home page we're gonna have another file called indexes and i'm going to import react from react and it's going to be a functional component so const home page equals props function where we're just going to return for now we're just going to return a section HTML section let's just put in an h1 for now called home page and we're gonna export default home page so i can come back over to app j s i'm gonna remove this hello world h2 i need to first of all i need to import our home page from our pages home page and we can include that under our header like that cool so let's just come back over to a browser and you're gonna see that we now have home page instead of that h2 and I have my react developer tools you can see the components that we have on a page currently we have our header and our home page component but we don't have any props here we don't have any components nested within that either let's come back over to our home page and what we want to do is anything that we want to display on our home page any components we're going to include them now rather than on App KS we're actually going to include them on our home page index file index page file here now I mentioned I want to create a another component which is going to be our directory component so within components I'm going to create a directory folder and within directory I'm gonna have an index file and it's also going to have its own Styles SCSS cool alright so within this I'm going to import react from react and again it's just going to be a functional component so Const directory it's just gonna equal props we're gonna return I div for now and we're going to export default directory and on our home page index file here we're going to import our directory component which means we have to come out of our that folder going to components directory and we're just going to remove the h1 for now and we're going to include our directory component now let's come back over here to our browser again now you'll see nothing because we just have our directory component and the directory component doesn't have anything in it it's just at the moment is just returning a blank div with nothing in it now as I've already explained the directory component is basically just going to have two images with two links one to take the user to show up for mens and want to take the user to shop for women's clothes now those pages do not exist yet we're just putting in this boilerplate component onto our home page so let's go ahead and get started now in the assets folder I've already gone ahead and added two images one shop for men and one shop for women's image so I'm going to use them in my directory component so the first thing I need to do is import those images into this component so I'm going to go ahead and import shop men from and it's basically up a directory in assets and it's I believe it's called shop I'll check what it's called it's called shop men's dot jpg and I'm going to duplicate this and this one is gonna be shop women jpg' so I'm gonna have to dibs here right and I'm gonna use I'm actually gonna input this with CSS so I'm gonna say style and we're gonna have ourselves a background image where is that and we're gonna use URL and I'm going to insert the image here so this first one is going to be women I'm just going to duplicate this here the second one is going to be firm in right and we're gonna call this card and the the class name is going to be item add a class name to the wrapper here as well just put directory and I'm actually gonna add another wrapper here as well which is gonna be wrapped and I'm gonna wrap that around both of these two divs and actually inside of the the div tag itself we're gonna have a span for now it'll actually let's actually make this a link and we're going to just say shop womens and we'll have one in here which gonna be another link show men's okay great now let's come over and let's look in our browser and you can't really see much right doesn't really look like much at the moment so we're gonna style this up so let's go ahead and let's come back over to our text editor and let's go into the the scss for the directory component right so what I want to do is I want the images first of all I want the content to be centered with the header right so we had set a max width on the header of I believe 1450 so we want to Center the content to the same margin I'm actually going to do this in my app Jess we have our app here and I'm going to come into default CSS and I'm going to target app and I'm gonna set a max width of 1450 and I'm also gonna set some padding of 10 pixels from the right and left and of course I'm going to Center that using margin zero also so that will give us the centered content that we want okay so this is actually centered the header I want the header to be full width so actually what I'm gonna do is I'm gonna change that a little bit I'm gonna add another div here the class name of main and I'm gonna wrap that around my header and a home page component come back to default and I'm gonna target main instead of app and it's still the same but that's because I need to come to up Jess and move the header out of main and if I do that this goes full width but the content stays centered which is what I want that's fantastic now what I want is I want the these to the directory component I want it to be the same height as the page right I wanted to spend the height of the page and I want them to be 50/50 so I wanted to actually be sitting next to each other so what I'm gonna do is if we actually look I've already set the body and the HTML to be 100% of the viewport but we have route we have app and we have main here now now route and app are kind of collapsing in on themselves so I'm gonna come back over to my text editor I'm gonna come to default and where I set the height here I'm gonna move some of this CSS yeah and I want to add in we have an ID here of routes and we have I believe app and I want that all to have a height of 100 percent when I do that if I come back now you can see that I'm now free to use the full walk the full height of the viewport because otherwise these two div tags here would restrict that and if that doesn't make sense yet then just bear with me so what I want is I want this main and then ultimately this section to have the full the full height of of the of the browser so to do that I'm actually going to add main there as well but main is gonna be a little bit different what I want to do with main which is in-app write is I want main to be basically I'm gonna use a height of I'm gonna do a calc of a hundred percent take away the height of the header which is 6.5 REM come back over and you'll see that now we have main which is the same height the browser apart from the header height of the headers taken away from the height of the viewport so I can change the height of this will never get scrollbars vertically because the content is not expanded that far that's fantastic so let's come back over now to our directory component and you can see in here we have our we have section which is for our home page so we're gonna add a style sheet in here too which is Styles dot s CSS we're gonna add a class to our section here she's gonna be home page and let's just add a style in here that's gonna set the height of it to 100% or something like that so now I can come back to my directory component and what I can do is if I look in here I have we have wrap I don't think we actually need a wrap at the moment but for now I'm gonna target the item and we're gonna target item it's going to be a width of 50% and we're gonna load it left now when I do that I can also set the height here to be 100% and I want to set the background image position to be Center I'm going to set the background repeat' to no-repeat and I want the background size for now let's just set it to I set it to cover okay so let's now come back over to the browser and have a look okay so this is not quite what we expected let's just inspect what's going on here I think I know I think I might have made a mistake yep so on our directory component we've written our our styles but we have not actually imported the style sheet so we need to do that of course so import style.css I probably need to make sure that the class name for item is also on the the the div tag for the men's shopping to shop men's and also I'm guessing on I also need to include the stylesheet on the home page component and there we go so now we have this the way we want it cool so this is looking a lot more like what I want awesome alright so let's come back over and let's finish off styling these components so the first thing I want to do is I want to come back over to my text editor I'm gonna just close everything and I'm gonna open up again my directory index file and style sheet that goes with it and I'm going to create a pseudo element after and what I want to do is it's gonna be basically we're going to set this to be absolute top:0 left:0 we're going to set the background to be RGB a we're going to set it to black foot point 3 transparency with the Z index of 1 and we'll set this to be a width of 100 pixels and a height of 100 pixels so we're going to need to set item to be position:relative and that's just darken the image a little bit so that when we actually add some text over it which is actually going to be our link and that's just going to make the text a bit more readable so let's come back over and look at our our link here so let's come back to our text editor and as you can see we have a link inside of our item so let's target that next and we're just going to basically Center it and give it a white background so this is just going to be white and what we want to do is again we're gonna make this position:absolute with a Z index of 2 and we want to make this 50% from the top and 50% from the left we want to transform translate - 50 % - 50 % that's going to Center it vertically and horizontally and as I said we set that to be background white we'll set a font size of let's say 20 pixels so basically to REM with a line height of 1 and a fun weight of 400 but I'm gonna do a text transform to uppercase and let's just have a quick look of what that looks like yeah that's about what I'm going for but what I actually want to do is I want to add some padding so I'm gonna add padding let's say 8 pixels from the top and 10 pixels from the right and left but I also want to add a border of 1 pixel solid and black let's come back over and it looks a little something like that and what I want to do is also I want to make sure that the links I'm gonna come back over to default CSS again and I'm gonna target these links and I'm just gonna the cursor to pointer that's important cool so let's come back again to our browser and you can see this looks good okay so that's our directory component and that brings us to the end of this video tutorial I really wanted to focus on building the initial application getting that component architecture in place but we actually have managed to build our header component and and basically build our homepage which is going to set us up perfectly for the next tutorial where we look at using react router to add custom routing to our project again we are building a full ecommerce website from start to finish and I'm trying to cater for everybody in my audience from you know people that are just starting out with react and people that are actually have more of a grasp with react already but are interested in possibly building maybe a more challenging project you know something like an e-commerce website again we're gonna be looking at everything from you know the basics of react with you know CSS and and and as well but also we're looking at more advanced you know topics in this series things like using in a you know integrating with you know stripes payments API and and building a cart and and Redux in firebase and and all of these things so that there's going to be very many a lot of different parts of this series where we cover a vast variety of different topics since you know areas of modern-day web development with react and JavaScript in general but it I'm breaking this up into sections so that I can give you the best value for your time I can pack in as much knowledge but in general we can build the best real-world application that we possibly can over the course of this project and I think that's really useful as well because especially if you're somebody that's trying to get a job in the industry you know a lot of companies will ask you to send them links to projects that you that you've worked on and certainly something like this an e-commerce website it's definitely going to be something very impressive for your portfolio so I really look forward to the rest of this series this was just the first one where we just looked at you know building the basic you know application and and and configuration and and getting things really ready for as I said that the future tutorials to come but before we sign off let's go ahead let's come back over to our terminal I'm gonna just exit the application let's do a git status as usual let's commit our changes okay okay let's commit that and let's just say this is our initial come in right okay cool so I'm gonna be pushing this push and I'm gonna be pushing that over to my branch and the minute that I published this video I'm gonna be merging this branch into master I'm gonna post a link to the official github repository for this project you can find that here you're actually going to be able to find that in the description of this video but you could also find it by heading over to github com4 slash simpleton again once again I just want to thank you guys for following along on this tutorial but also look forward to catching you in the next one where we look at adding custom routing using react router to our project have a great day

Channel: SimpleTut

Views: 44,192

Keywords: ecommerce, react, react redux, GraphQL, React Context API, Node, Node JS, redux, online store, stripe, stripe api, shopping card, paypal, firebase

Id: 7gQay39krqY

Length: 46min 58sec (2818 seconds)

Published: Sun Apr 05 2020