Full Stack Development Tutorial - THE FULL PROCESS!

[Music] what's up everybody gary simon here of design course and today we've got a huge one and also sort of a channel first because i'm actually doing a collab with somebody who's at the very tail end of this video and i'll get to that in a second but today this is a full stack development process video where i'm going to show you how to make this app right here which is a fictional app moon coins all right so this is currently on a local host the dev environment and basically it just allows a person to add different cryptocurrencies to track them to see you know what their prices are and all of that good stuff uh we could also see that you know it is responsive and we're going to be getting into a lot of considerations basically about getting this up and running so what is full stack development well it depends on who you ask i some sources say it's just being able to handle front end and back end development others say you need to know some graphic design you need to know some ui ux design maybe identity design and deployment for this video uh we're gonna assume that it means a lot of those things uh so first we're going to design the logo in adobe illustrator and then second we're gonna hop into adobe experience design uh to deal with the ui ux like mockup of the user interface and then we're going to put our front end development hats on and hop in to visual studio code with view so view 3 is what we're going to be using and by the way the stack is mevn which is mongodb express jes also vue 3 and node.js and then we'll hop into the back end i which will be with express node.js and mongodb because we're going to be allowing whatever you want to track it's going to be stored in a mongodb and then we're going to use the crypto compare api to pull all the latest data based on your your choices and then finally this is where sid from devops devops directive comes into play because he's going to handle the devops portion which is deployment of the app i am terrible at that stuff so i asked him to take you know the process or take on the challenge of taking my app and then using a vps from the sponsor of this video which is hostinger.com and making it reality from scratch in the command line so he's going to do a great job explaining how to do all that stuff from scratch all right so definitely check out his channel which is devops directive his name sid and i'll have a link here in the youtube description and the sponsor of this video is hostingjurt.com and a few months ago i did another video with them where we tackled shared web hosting for a very simple personal portfolio website and i'll link that uh video here in the description but for this one we're using their vps hosting and that's because we're building a more robust app with a node.js back end and so why would you choose hostinger well they have the best priced quality ratio on the market best support which is 24 7 365 and a 30 day money back guarantee and also ultra fast servers and also one thing to note when you check out for any of their hosting services make sure to use the link here in the description i and coupon code design course will be applied here to get 10 off all right so real quick before we get into the design side of things domains all right so usually after obviously i have the idea of the app or whatever um i want to get a name and so i always just go to a domain checker you can definitely use hostingers you can just uh click on one of the youtube links here at the top one of the top links to get their domain checker and then it's a determination you know of trying to come up with a name that's unique i try to keep it as short as possible and memorable and also relevant based on you know uh the purpose of the business and so for us the one that i decided to use by moon coins and when i searched for that the dot com was not available but the dot net was um and so i went ahead with that uh as an option so dot mooncoins.net do your searches and see what ends up coming back um obviously you can't use the same one um but yeah this is the one that we registered so um just wanted to to put that out there real quickly also there's a lot of concern about you know should i use a dotneta.com or one of the newer gtlds as they're called um really it's completely up to you they all still have the same ability to rank in search engines so um yeah that's completely a subjective preference we're going to use adobe illustrator you don't have to use adobe illustrator use anything that's uh you know vector capable essentially so um i just leave it here at 1024 by 1024. it doesn't really matter what you choose you can always just click on this little icon here the artboard tool and hold alt and you can drag this out to fit your whatever your resolution is of your monitor um and for this you know for me right here this is nice and filled out and works well now when it comes to most identity designers i can only speak personally i i personally like just hopping right into the computer instead of you know taking pencil or paper and you know and just drafting out ideas it's the same concept if you want to do it here on a computer first that's fine just know that a lot of people prefer you know sketching to hand because it's pretty quick but for me the type of logos i like to design they're usually very simple um and so working here on a computer i and plus if you're familiar with the tools and the shortcuts it makes it quite easy anyway so um the name is moon coins so the first thing i do is just get out the type tool and usually i do three variations i i'll do moon coins kind of like title case now let me go ahead and expand this shift alt and just left click and drag so i'll do moon coins and then in the same layer text layer here i'll do i moon coins and then also do moon coins that way i kind of have um a lot of iterations that i can look at when i'm just start to filter through the different type faces um you know just going up and down up and down but it really wouldn't be true design course scary simon fashion uh if i just chose some type of random font i go through font phases and for many of you know for a long time i was using montserrat but now i'm gonna i've been using poppins lately you just can't go wrong with poppins in my opinion right now it is so 2021. so i like poppins and we're gonna we're gonna fatten this thing up bold look at that now personally any three of these could work i mean you can clearly read the type or the word mark as it's called the word mark portion um and so really for a lot of this it comes down to subjectivity and personal opinion for me we're just going to stick with the title case it's it's bold it stands out that's making a statement because cryptocurrency is a serious business for people that live in their basements anyhow so moon coins what i i love i personally love word marks not i i really don't like to create it's not that i don't like to i think i just like word marks more than using what's called combination logos where you have a separate symbol and you then you have the name i like just a simple single element you know of course having a combination logo with its own unique symbolism has its advantages because you can use it uh in places where you don't have enough room perhaps for the actual word mark but for me i i what i usually like to do is i look at the letter forms first and the shapes that i have to work with in relation to the purpose of the business and the company and what you want to say in a visual manner i and think if i could come come up with a unique idea to work with the letters here um so moon coins at this point it's pretty a pretty good idea to come up with um kind of like a mood board of ideas and um and thoughts and and just objects perhaps or abstract thoughts and that you can convey visually in the logo through the letter forms so moon coin so right off the bat we have moon and then we have coins it's in the name wow i but there's so many other ideas um like a person using this is somebody who is interested in money they're interested in growth so that's that's that's a few more things so money coins kind of same thing but we have the moon we have growth uh we have profit the idea of profit we have colors that we can start to you know think about as well money green whatever you don't have to use that um so one of the things that i thinking of right away is the moon i the moon's very simple thing to portray uh it's a circle and sometimes it's a crescent right actually most of the time it's some sort of crescent it's not a perfect circle um and so we have three of those we have a a moon here possibly a moon here and then a moon here and looking at this my initial idea is well moon is moon is moon right that says moon already but the coins we have a single o in there that perhaps we can turn into a moon so that's my initial thought here right away so let's do that so we have moon coins here and i would like to ctrl c ctrl f just to create a copy over here put this up here in case i want to go back to it and we're going to convert this to outline so right now this is editable text if you double click into it well we don't want that because then we can't really play with it too much in terms of adjusting the anchor points and all that so ctrl shift o turns it to outline so no longer can you click and change the type however you can take your direct selection tool and now we can move stuff around and play with it and blah blah blah blah all right so because we want a perfect circle for our moon we're not going to rely on this o right here because it might not be a perfect circle it looks like it is now when it comes to illustrator you can find the center with these little helpful areas these guidelines and you can see it's not a perfect circle from that o so hold shift alt and just drag that up with the ellipse tool now we have to get rid of the o that's behind it now when you convert a piece of text a type later to outlines it adds them all into a group so there's a couple ways you can go about removing that o we can expand this and we can see the o right here we can delete it which is what we're going to do you can also by the way i'll undelete it by hitting ctrl z we can select everything right click in ungroup and then we can hide this and now we can just delete that o so you have options and if you wanted to make them a group again ctrl g by selecting all or after selecting all so now we have moon coins guess what people this could completely work as a logo extremely simple i mean think about all of the logo the top businesses that you know of do they have crazy logos that are you know just the tons of lines and whatever yes some of them do like starbucks you know with that person angel thing i don't really i don't know what she's referred to as i don't really eat at starbucks but you know what i mean most of the time businesses rely on simple logos that make a strong unique statement in some like i said unique way moon coins people immediately are going to think of the moon i think and or a coin just by this really filled out perfect circle but this wouldn't be that much of a logo tutorial if i just ended there but just know that this could completely work all right so let's work in the idea of a crescent what i will do at this point because this is a concept we'll copy this i'm going to put this up here too all right i'm just going to stick these over here you could put them up outside as well which i think maybe we'll do there we go so we can always come back to this one present it to a client if you're working with a client or whatever or present it to a focus group of whatever so let's take this a little bit one step further let's go ahead and try to create like a crescent all right how would we do that well ctrl c ctrl f so now we have a duplicate we'll use the background all right so let's uh hold shift or we'll just move it so we can just use our up and down arrow keys we want to keep this on a 45 degree angle so we'll just go up right up right up right up right or bar or right a few times all right so now we have a crescent right that looks pretty cool all right so let's go ahead and we're going to get a pathfinder window and pathfinder so the pathfinder allows you to create certain um operations with multiple paths selected all right so if we select both of these paths i don't want this part overhanging i only want the perfect circle but with this thing being intersected so here's what i mean we select both of them and we're going to choose under pathfinder we're going to choose divide it doesn't seem like anything happened but now we can take a direct selection tool and just delete this part right here and now we have a white portion that's part of that perfect circle and then this black portion now you could delete this as well if you decided you completely you know i don't want that there or we can bring it back and maybe play with it further with some other ideas for moon coins let's say for instance i we like this i mean this could work as well so if we bring back this one over here you can see we have just a different play on the shape of the moon but people can still see and would still understand that this says this is a representative of an o because c-o-i-n-s so that could work as well so this is kind of like the full moon right all right so we can consider this a concept and let's go ahead right off the bat and give this color so let's take just this right here with the direct selection tool and i think we're just going to use like a purplish color now if that ends up happening and turns it gray just go to window colors and then come down here on this little menu and choose rgb all right so now let's go back here hmm is it not changing the color the way that i want it to i said rgb did i not we are at rgb huh all right yeah something similar to that will work all right so that works you could also possibly do the same thing here or create a second version of this where you're using hit the i the same you're just simply changing the color of just the circle so it's all obviously up to you so here's another logo that we can use so this is a concept that could completely be used now you would definitely want to delete this for this logo because there's no purpose in having that there the white part portion all right so let's continue on what else could we do with this logo well one idea that i had and it was an idea that came from an accident really is this o right here earlier it was kind of like by accident it was up into this area a little bit earlier in the video i noticed that um so what if we try to do something different where we kind of if i show the in the negative space or the empty space in o between the c and the i let me tell you what i'm talking about because there might be losing some of you let's get a perfect circle here starting right there okay so that's not perfect actually you know what we can do instead of that let's just take this ctrl c ctrl f all right and then just make it white okay and now what we'll do is we're going to take the ins we're going to move it in a little bit we're going to take uh the moon and c move that in a little bit and let's go all the way to like right there okay all right so now we have something possibly interesting of course i i kind of all you should always make sure that you're at this point maybe it's not worth it to to worry too much about color so just making them black again might help situations until and then and then after you have the actual concept you can worry about uh color i mean ultimately it's up to you so that looks pretty cool this is another concept so all these concepts and of course we want to clean this up and get this you know situated correctly i because obviously it's not transparent as you can see here but we don't have to worry about that right now too much just put it right here and then what other things could we do well let's delete this one um and perhaps you know what does a moon like look like well how is a moon sometimes representative in a simple fashion sometimes it looks like swiss cheese right so let's try doing just a few perfect circles shift alt and drag out with the ellipse tool make these black maybe make two more that are smaller let me move these around all right so take this one this one and this one maybe just position them up a little bit differently um so that right there i kind of like as well as a potential concept all right so now we have all of these concepts that we can now you know put in their own art boards put them next to each other just give as many looks as possible um to see what people think all right and ultimately it then becomes you know a situation where you can um ultimately determine which one you're going to go with so for me out of all of these i mean i'll bring them all back let's see here we'll bring this over here bring these over here oops make sure i select all these and for me i really like this one it's really simple um it's unique and that's the one we're going to go with so what we'll do at this point is i'm going to get out just a new document so i'm copying all those i control c selected copy we're going to hit ctrl n to create and we're just going to paste this here and now we need to do some cleanup work because this is not a transparent logo um so i know that the interface i want to design is going to be dark by default so let's just get this out here and then just let's just choose some darker color or something so we see this right now and that just does not look good at all so what we want to do is take all of this well actually just to make life easier i'll take those and then this we're just taking all the black type right here make sure this is not selected as well and we're going to make it white because that's that will be the actual colors afterwards and then what we'll do is we need to take this this circular shape and we need to be able to cut this out of this this area so first what we'll do because it's a compound path here we want to choose unite so that just makes it into single path that is a perfect circle now what we want to do is i'm going to create a couple copies of this just ctrl c ctrl f and i'm going to take the top one and then just in relation to the c we're going to minus front all right we're going to bring back the other one take this one and the i and then we'll do the same thing minus front and there we go now that is a complete empty area we can make this white and there's our logo look at that alright so now what i want to do is because we're going to be using this as an svg asset when we get into the front end development process we'll scale this up to match it here which is our artboard tool and we'll get this all aligned there we go now we don't want this so now it's just completely empty because it's white on white although this has no background it's just white by default and now we'll be able to use this as we wish so we could probably group those up too all right we have two more paths what are these paths oh okay there for some reason it's it says the it's showing these up as black um we could probably take everything else and just group them up and there we go that is our logo so now we want to go ahead and actually save this so i'm going to save this and i'm going to go to my code folder all right users streaming code and we're going to create a new folder for our project actually no we're not going to create a folder yet we're going to save this uh elsewhere and i think i'll just save it on my desktop um so what we'll do is i'm just going to call this for now you would obviously want to say the ai the ai version of it um we'll just call this moon coins right here and then we'll also save as an svg moon coins.svg and then when uh the reason i didn't create the folders because we're going to use the view uh cli to create it for us um so there's that okay so that is it for the logo let's go ahead and focus on now the front end development process all right so here's adobe xd you can use sigma for this we're not actually going to get into hardly any prototyping just the design so you can use any design application this is going to be very simple so we're going to create a web 1920 for this and for me when i design i like to start off with desktop first that way i basically i can design for the full experience of it right away um and if it's really simple sometimes i won't even i won't even bother with doing a mobile variation i'm not sure if we're going to do that here but just for now let's start with the actual uh desktop version here a full web 1920. so one of the first things i like to consider obviously at this point is the background color um this is the only thing that we have to work with really at this point so it could be all white i you know you can determine if you want to go you know white or or light or dark or obviously give them the option to have a dark mode or whatever for me i just kind of want to make this darker by default all right so what i'll do is get our hue first up here i don't like going all the way full black now sometimes you can go you know dark like real dark like that i and you can completely desaturate it in which case you know which point your your the hue that you're using doesn't really matter but we can just give it a little bit of color maybe maybe right around there so the color code for that is 2 6 2 9 2c we can add it here to the color palette and there we go now let's go ahead and import or drag in our svg look how cool that looks love it very simple moon coins shift alt scale that sucker down now 99 of the apps you create will probably have a navigation of some sort because you'll have multiple pages for us this is a single page app i don't even care about having navigation in that case we're just going to center it up here at the top with good white space from the top i otherwise the standard convention is to stick it over here on the left but for us we don't have anything going to the right because we don't have a nav so we're just going to stick with it in this context moon coins okay so now i what comes next so think you know how what is it that we want to achieve we want to allow people to track coins very easily so we're going to have a single call to action and that call to action is going to be a form the form is just going to be the abbreviation of the coin that they want to add with a button to add it that's it so we're going to make it look good i and make it easy to use as much as possible so we're going to take the rectangle tool and i'm just going to come in the center and hold alt and again we only want like a three letter four letter acronym at most or it doesn't have to be an acronym but just an abbreviation rather so we don't have we don't have to have something that's real wide that would not make sense and it would be annoying so some are i would say no larger than this maybe even a little bit smaller and then we're going to take these little uh border radius handles and just drag them in a little bit you don't have to do that but i like to have a little bit of a border here so let's go ahead and get rid of that border and what i mean is i like to have a little bit of that border radius the rounded edges um and then so then we can have a button over here so ctrl d let's move these back to the center and we have a button so our button should be our primary color all right so whatever we've determined to be our primary color um we will use so i already have a color that's picked out and it's on my other monitor there we go so i've got the hex code and i'm just going to paste it in it's 9100ff if you're following along wait a second there we go it's this color right here it's a nice sort of purple slash blue and it's just kind of right in the middle of those two and let's go ahead and get our type here for the button text and we're just going to make it nice simple easy i we're going to make it white and we're going to center it and then we're going to make it bold all right add let's use poppins and get this with our keyboard arrow keys centered up perfectly vertically and uh horizontally now we could just leave it like this with the space but what i want to do is take both of these put them like this and then what we'll do is get rid of the eye the corners on the right top right and bottom right of this and then the top left and bottom left of this button so to do that we click over here so i i believe it will be this one that goes to zero and then this one goes to zero so now we only have two sides that are like that we'll take this one and the same concept so this nope there we go those two so now we can just join them and it makes it feel like it's you know it's a little bit more of a unified form right here now we can also put in i always advise putting in a label so we're going to put crypto and it's worth it to have more white space between these two elements otherwise you get too close and it just gets a little bit cluttered looking so crypto um i think that size is pretty good um we could probably go 18. all right and we can even have a placeholder value where we can design for one at least we'll put all caps btc for bitcoin i don't want to make this bold so we'll just do regular and we'll make this bigger because we have the space maybe we'll make this light let's see here light there we go and maybe just come down a little bit lighter here all right and then we can also have a little bit of a helper um a little note underneath use oops that's the uh spongebob i was about i was about to type uh use abbreviations dude if i could type that okay use abbreviations now what's the problem here lack of visual hierarchy because use abbreviations is styled exactly same as the label so we need to the the label is much more important than this little note down here so we need to emphasize that visually so we're going to make this smaller maybe like 14 not bold maybe like regular and then we can decrease the contrast as well so we're changing three different things about it what i like to do in these cases is take the same background color and then just come up here a little bit now you want to make sure i'm going to use my stark contrast color checker to make sure i'm using at least the minimum contrast so what we can do is click start uh check contrast and it's not good enough it's 3.14 and then they also have a dedicated panel so if we go over here to plugins we go back and we do stark all right so now we have this up here and we can come up a little bit more and you'll see it's it's rising 4.16 oh nope we need to go a little bit more there's 4.6 i think that's pretty good right around there all right so right around there is pretty good for our form make sure everything is like centered up here all right so now underneath we're going to go ahead and actually design for our each little panel and we're going to do this in cards so bitcoin would be here you know ethereum could be here iota here you know whatever um so let's do that so we're going to just take we're going to start somewhere anywhere and just drag out an area like that keep your corners radiuses if you have any consistent we're at seven here so let's do seven here as well and if these were all white those cards were i mean that's a lot of high contrast area i personally in these situations get rid of that border i i like to do that trick where we take the background color and just come up real slightly like something like that maybe maybe right around there so that color code here is seven three 32373c and now what we'll do and for this initial one let's just put it in the center well is that like the exact same size did i use the same exact width is that insane or what that is crazy it's almost oh there's like one pixel over here all right things that amuse me okay so we're just gonna say we're just we're only interested in a price in the acronym name that's it and the ability to delete it um so let's come out here left click we'll center this and we'll say i don't know what it is right now i think it was like 47 488 and 85 cents now that's actually what it is um or at least a few minutes ago so we're gonna make this nice big and beefy and bold right so we'll make it white maybe we'll make it light wait that's not that light i thought that was like way lighter maybe i'm trying to go extra light yeah that's fine with me alright so that's good right around there is good and then we're gonna duplicate it and i guess underneath it is where we can put the name of the cryptocurrency so we're gonna make it bold but we're gonna make it smaller and maybe it will even uh make it the same color and then do that little trick where we come up in the same hue yeah that's looking pretty good to me maybe make this one slightly larger all right i like that now you could just do this and be done with it um but let's do something a little bit different let's take let's duplicate that and take both of these put them up this will have to come down all right so we're going to make this slightly darker like right around i'm getting a little bit closer just to see let me get the same color again i mean i'm talking very subtle i like that so that color code if you're following along is 292 d30 all right so now we'll take these corner rates i don't want them right here in the top left or right so 0 there and 0 there then we can take this up take this one up to just well this can go up anywhere as long as it's underneath it and then a little trash icon perhaps so that we can delete it all right so there's another i think it's called icons for design delete all right and we can just choose this one we click on it and then we have an icon ready to go so we have to design it from scratch all right so we'll make this white and maybe we'll just stick it right here now i didn't think of too much about this design there could be probably a better way to to do this um but you know it's good it's good for me so now we can take this repeat grid let's put this over here drag this down and then who knows you have however many different coins this particular person is tracking many different coins obviously and each one of these would be a different coin so to implement this we really have to i you know think now we have to put it on the front end developer hat and the rule and and think about how we're actually going to do this um so that's going to be the next section so at this point there are many different ways and different paths that you can choose in order to make you know our design that we created here in adobe xd an actual functioning product in the browser and on different devices there's like i said there's many we're going to use a javascript framework and really there's three or four big ones um really there's the big three there's view there's react and there's angular react is the most popular i personally i use it a few times that's all i didn't like it it was very the templating was weird to me i really like view and i liked angular as well but really lately i just use view whenever i do a project and you could just use neither of them not use any framework and really for a simple project like this it would probably be advisable but i did want to just use a framework that way you can kind of get more of the full experience especially with a larger project you would probably benefit from using something like react review or angular or sevalt or whatever and so we're going to use the view cli and this is a tool that just allows us to get a view project up and running real quickly all right so i you're going to need mpm or yarn installed just to show you make this a little bit larger because we need to in order to install the view cli you have to be able to run these npm or the yarn command all right so that's the first thing you want to do we're going to open up let me move this out of the way and use visual studio code as the code editor there's a lot of different code editors you can use but for us we're going to use this now it's also free it's from microsoft you can download it and install it so we're going to go to terminal and new terminal and this is where we're going to install view so first make sure that you have yarn or nodejs installed js.org and so now we can go to downloads and you can install it here restart your terminal or your visual studio code and you'll be able to install it when you install it make sure that you install the node package manager as well i think that's enabled by the default um which is npm and that's the command that we want so then you can just do node hyphen v npm hyphen v and there you go all right so as long as those show up and it doesn't say like unrecognized command then you're ready to rock all right cls will clear out the console and we're going to go ahead and install it here so make sure you run this command and it will install it and then after because i've already installed it you can run this right here so view create and then the name of your project first make sure you go into wherever you store your projects i have a folder called code in my users folder so i i can cd into that if you don't have a code folder and you want to store it there just go type in make dur mkdur and then code hit enter so cd code and then we're going to run that command view create moon coins now it's going to give us a prompt with a few different questions all right so we're going to use uh the view 3 preview now of course these might change uh these options here based on what you're doing based on when you're watching the tutorial but this doesn't take too long and it will just install you know a ton of different files that makes view view you like that explanation oh my god it's been a while since i've done a coding tutorial um but anyhow i guess at this point i'm not going to keep on talking and i'll just forward fast forward the situation all right it's done and now we can type in cd moon coins all right hopefully you can see that and if i make this a little bit bigger there we go it's stating that to run this we can run yarn serve you'd have to have yarn installed we can do that anyhow yarn serve and it's going to start a development server and in a second right now it's compiling and now we can just hit control and then left click and this is our vue.js app it's ready to go so hopefully you're able to get to this point if if you have so far then you're ready to rock all right so let's go ahead and um let's close that out and let's focus on just the templating or the html and css just to get us to a point where we have some dummy you know template data that will ultimately look like this so let's go ahead and um close this out we're going to click over here and what we want to do is open folder and we want to go to our code folder moon coins and then select that folder all right so this is our project all right so we can get rid of this welcome and everything you you're mainly going to be working here in in source source app this is where that welcome to your vue.js app was and it's pulling a component from here called hello world um we're just going to be working in a single uh the app dot view right here just to make things ultra simple in a rural app you would want to be compartmentalizing things into different components uh as much as possible uh for us we're just gonna because it's so simple we're just gonna do every all of our logic and all the templating and all the css within the single app.view right here so let's go ahead and write out uh the html so obviously before you can do the css you need to focus on the html um and so for that that's a process where i like to go back and forth between our mockup uh in our case it happens to be adobe xd um in the html i make that a little bit larger so if i refer back to this we have to ask yourself what is the first thing that shows up from left right top bottom it is this right here this logo what's that mean we have to i export this although it is already exported i as svg right here so i'm just going to copy that and we're going to put this in the assets folder so we're going to right click reveal in file explorer explorer double click into it and then just do moon coins um i guess we could just delete this logo and then just use make that logo there we go so now that becomes our logo now of course if we did this svg and we looked at a browser we won't see it oh oh that's the reason this isn't working i believe is because we open this up and the new terminal was i so we just do yarn serve and we'll be back up and running here in just a second there we go so it's it's we don't see it because it's white on white so going back here we have our app dot view now when we close that little terminal window it's still running so you can you can just bring it back as you wish so view terminal and there we go you can see it's still running but we want to save space here so now what we can do is just uh delete that stuff and we're gonna have a div here that's let's see here looking at my reference code real quickly yeah so you always have to have an opening div tag when it comes to view and then everything else can go inside of it so we're going to have a div of container right here oops not contain container all right and so i always just like to do that and so um going back here the container is just going to be something that holds all this stuff right here it's just going to be strictly for the purpose of keeping everything confined into an area and so most of my designs have you know or layouts rather have just an opening container div um and it's the next thing that will show up is the actual logo so inside of dig div class container is going to be in a link that's not going to go anywhere although really it should it should go to your home page so in our case it's going to be https i moon lists no no mooncoins.net all right and then we're going to have an image and i'm using abbreviation so sometimes you'll see me type in this and then hit enter it just makes your life easier instead of having to type all this out by hand so then inside of here i we're going to put in at forward slash assets and then the name of logo.svg and our alt tag which is a required attribute for the image element um we're just going to say logo all right so that looks good right there so now at this point uh oh did i forget to do something let's see fail to compile oh it's registered but not used all right so what that means is we've imported this but it's not being used because i deleted it up there so if we go back to this now we have this blank screen that we cannot see anything so let's get the uh the actual background color so we can start seeing what we're doing and so we'll do this in the style section so when it comes to view in their components you have three different areas you have the template which is like the html you have the script which is the logic done with javascript or typescript and then we have right here the style the styling which styles the html elements up there for us we're going to delete that and we're going to simply i focus on just a couple rule sets the first one before i forget i do this on every single one of my css files is just choose all you can also use a pseudosec selector before and after i believe and we're going to do box sizing border box and basically that's this asterisk of all basically means apply this property the css property and value to every element and it just happens it has to do with your margins and your padding it can throw off the layout when they're set at 100 and you have margin or padding um so i just add that anyhow not important to really understand right now and we're going to give ourselves a background though just that way we can see what we're doing so the background color that we're using is right here 2 4 2 62a and now at this point when we save it there it is look how massive that is don't worry that will be fixed but now at least we have something working so let's continue on um what comes after if we refer back to our template it is this it is this form right here so we need to account for that now um so what we'll do is looking at my reference we're going to create a form so this is going to be just underneath our logo so the form action we're not going to use the action attribute we're going to put at submit prevent handle submit form all right so this is right here this is going to be a method that we that we i call in order to essentially handle the form data which is going to be the the cryptocurrency that the person wants to add inside of here we're going to have a label for is going to be in reference to the actual input element so 4 is going to be i will just say crypto and then this label is going to be crypto and then we're going to have i actually you know i've screwed up we need to have a form group up here period form group that's m abbreviation will it'll create that div for us yeah because i believe we do style this in css anyhow so we want to we want to add that for sure and then also a form group inner and you'll see when you get to the css you'll you'll understand why i'm adding these various div elements for now we just need to get it out um input type is going to be text the class here is going to be crypto and then we're going to use the v model crypto.name placeholder is going to be let's just say bitcoin which is what we designed for and then we're going to make this required and then inside of here we're going to have a button with a class of add and then a label of add and that's all we need for that and then finally we have over here if we go back we have this use abbreviations so we're going to have a paragraph and the class is going to be info use abbreviations wait nope there we go type gary type all right so the reason i have this form group enter right here just to give a quick extra exclamation is so that we can just i be able to float them right basically left of each i don't got to float but you know what i mean they're going to be situated side by side all right so then we finally have this area right here so we're just going to create the html markup for just one of these cards and then we'll iterate through those with logic later on so now after the form the closing form tag we're going to go ahead and create a new element a div element with a class of crypto container all right inside of there we're going to have a div class called crips and this is what this is going to be the element um that so the crypto container is basically going to be kind of like our container div but it's going to be a container that just contains all this stuff so one big square that contains all that then crips is going to be the actual card that gets repeated if that makes sense probably doesn't so inside of there we're going to have a paragraph of class price so p price the abbreviation and so we're just going to put in a fake price for now i'm going to hard code it in like forty eight thousand zero zero and then we also have um we we're gonna have if you look at our cards we have this little box down here and we'll say the price is inside of that box so if i double click this initially it might look like this but then we'll use css to push it up in the middle and it also has this delete so we have to create a parent container for those and so it's going to we're just going to call it lower and inside of lower we'll have a paragraph of class crypto label all right and that'll be like btc for bitcoin again this is going to be you know that's all hardcoded in right now we'll make it dynamic soon and then also a button for our delete button our delete icon so i click prevent so that means it's gonna prevent the form from submitting and refreshing the browser because you don't want that and it's going to send it to a method that we're going to create called delete crypto we're going to pass in the name to it now at this point it's probably going to fail if we try to run this so at this point i'm just going to remove that instead we're just going to give it a class of delete hyphen btn and then we're going to put an actual image inside of here which is our delete icon now i already have that icon exported um you can export it from xd or figma or whatever you're using whatever you need to but i'm going to go ahead and just grab the delete icon here we're going to go to code into moon coins source assets and paste in delete.png so now we can reference our this is going to be an image inside of the button element and this is at ford assets and delete.png ideally that would be svg um but for some reason it was a png that that thing that i'm icon plugin use but no big deal so we'll just put delete crypto for the alt and there we go that my friends is all of the logic uh or not the logic the the html template templating if we go look at the browser right now it's going to be well absent apparently and that's because we have an issue up that's why right here v model we're going to add that in later and now we can see there's no more errors and this is what our design looks like so whenever you're doing the html it always looks like garbage until you get to the css but you need the html markup before you can get to the css unless you're doing like a little bit of html and then you're switching to css i mean you could do it that way but i prefer just to get all the html markup done and then switch to css so ultimately it's all up to you so what i'm going to do um to make our process here of the css portion part of the full stack development process easier is just to take a browser and kind of simulate like a phone width or a device with like this because we want to do mobile first css so what that means is we want to make sure the design looks good when we're writing our css by default on the smallest device possible the reason we do this is because you're not working with any media queries yet which you'll see what that is in a bit and it really just simplifies your initial css if that makes sense um so let's go ahead and then i'm going to take this there we go so now we have two side by side and we have the hot reloading so that we can every time we save a change here it's going to refresh this our goal is to get this to look not like this because i did not do a mobile version i but something that you know this has the ability to you know become in a very simple manner and all this is going to be this stuff's going to stay the same because look how the width is it's very small all right but this what this will become is if i just delete these like on a real small device it might just look like that so then we could take this in and emulate you know what it would look like on a small and on a phone so that's our goal right here all right i'm gonna go back though and undo that so let's go and start focusing on your css so now i we have some work to do in our body so we're going to take all the colors just make them white as you can see everything gets updated we're going to set a margin to zero because there's the default a little bit of margin here around um the viewport that the browsers automatically add so i'm just setting this to zero so i can add my own work my own white space in height 100 viewport height i always like to do this but i don't need to do this all right for this context font family we're going to do pop-ins so i when you're just practicing and you're using you're like if this is your own little project no one's going to see it you don't have to if you have the font already installed on your machine locally you don't have to import it but because it's going to be something that's on the web we're going to go ahead and import it so how do you do that so it is a web font from google that we can use available on google fonts.google.com and we type in poppins poppins mary poppins all right and so i'm an idiot i'll be quiet um we want a few different font weights um i think we want extra light we're going to select that and then we want light and then we want bold 700. so we have three different styles we're going to import it copy this right here and then get out of there and then just import right there now people don't need to have it installed this will download it for those who don't have it installed all right so now i that's it for the body element let's focus on the logo obviously the logo is way too big so um we need to fix that so what we'll do is uh let's see here now initially when i was creating this project or my reference code it i didn't have the logo i was just using text instead of an image inside of the anchor link so i'm going to have to do this off the cuff so to speak so how do we want to do this we could hard code the actual width of the logo i like using absolute values or just m values um so we could do something like width i don't know what is 5 m units going to look like oh no it is not working all right let's let's figure this out oh there's no class here so the image we can just do class equals logo now that's way too small that's too big yeah let's just say 10 m i mean you can yeah that'll be good the the advantage to using like a relative unit like m or whatever is for responsive design um m units based on the font size uh that's on the body element now browsers automatically add a font size of 16 pixels um if we change the font size on the body element for instance to like 25 pixels or something big watch what happens to the logo it gets big as well as everything else and that's helpful for responsive design when you get to media queries and you just want to enlarge everything or most of the things this will help when you're using like m and rem units um because otherwise if this was like 100 pixels and we remove this notice it's going to stay the same exact size no matter what that font that font size is so hopefully that makes sense to everybody um let me go back here 10m units we'll leave that off and that looks good all right so what we want now is we want some white space so we're going to get back to the logo in a second but we want to reference our container so remember our container element is like the first div element after this that element right there and so the container is what i like to give and define the white space of everything um the white space is not going to be too important at this point in time because what we can do is text the line center everything and that's going to give us white space on the right left for the most part so if i do text align center now we have good white space on the sides obviously but not the top so we're also going to do margin 0 and 1 m unit so oh wait that's that's not right i don't want to screw up my code because the fact that i didn't use this up here initially is screwing things up so we will give the white space by adding the margin on the actual logo itself up top so i'll just say 3m units and 0 so top and bottom will be three m units that'll be good enough for now right here okay so um after that we're gonna have uh let's see here we have a form group element right here that's really the next element you you you don't really target the form itself uh most of the time we're just going to use form group right here so for form group we're going to text align left because it's currently centered based on its parent being text align center and we're going to do width of just we're going to hard code 300 pixels in here and then we're also going to do margin 7m units on the top and bottom and then auto on the right and left which will center it okay um i'm probably going to take our logo and put 0 on the bottom there we go because that was pushing it out way too far so next up let's focus on our label right here so we'll do label and the label will be font weight bold margin bottom will be 0.7 m units and then we'll display block here that way the margin will work all right so looking good so far we're getting there next up is going to be the input itself all right so with our input we need to beef that thing up with white space inside of it so margins outside of an element padding is on the inside to increase white space so padding is going to be 1m unit all around top right bottom left there we go and then outline is going to be nine i like if you select in this you see this little outline kinda so if we save that that doesn't happen anymore the border is going to be nine and then we're gonna do border top left radius is point three m units we will shift alt down to replicate that and then this is going to be bottom left so now it's it's rounded out the bottom top and left and then we're going to choose font size 1.3 m units just to beef that up a little bit more now everything seems real large because i've zoomed it up so let me just get back to 100 in the browser then we have form group inner which is the apparent element of this and this button this ugly button right here these two elements so what we can do is display grid nothing changes there except it just expands everything out and then we're going to do create template columns 100 pixels and there we go so now we have our thing here and our it's pretty big it's bigger than in here but i kind of just like this anyhow so that'll work now our button so it has an add class so we'll just do add or button.add sometimes it's nice to specify the the element as well so we'll do font size 1m unit just to get it bigger font weight is going to be bold uh our color is going to be white and our background color is 9100ff or border we need none outline none padding will be 1m unit on the top and bottom and 3m units on the right and left and then we have our border top right radius which is going to be 0.3 and this is going to be tau bottom right yeah there we go all right so we're coming along it is looking pretty good at this point all right so now we're going to do a paragraph uh the info because it wasn't white we used a different color which is right there copy that color code and we're just going to do font size is oh no no no font size for this i was looking in the wrong area oops put a double hash sign there all right and then there's our color awesome so this part's i now we can start focusing on the actual crypto container which is the next element right here so crypto container we're going to make a grid a css grid and there's a really cool thing that you can do which i can't demonstrate right now because we only have one of these elements but the cards it'll automatically make it responsive with one line uh with essentially a couple just a couple lines of css a couple properties um and you'll see how that works in a second it's going to be confusing though when i do this next property grid template columns the value is what's kind of confusing here repeat autofit min max 340 pixels and one fractional unit now i did a whole entire video explaining what this does and i'll try to remember it if i don't remember to put in the description go to my channel click on search um and type in uh one css property responsive and then you'll get a better understanding of exactly what's happening here because i did do a whole video on this because it's so cool grid gap is going to be 1 m unit all right so obviously nothing changed obviously because we we only have one of these elements in here um but you'll see what this does it's it's it's very cool so now what we'll do is we're going to do crips which is the actual individual card and that's the part that's going to get repeated and we're going to use a background color here actually i should use the one from the one i created let's see here copy that all right there's that and then we have our price inside of it so the price is going to be a font size of 3m units font weight of 200 and padding of 0 1 m units so top and bottom 0 right and left 1m unit there we go then we have the lower right here so lower has its own background as well in which we will revert right here and copy that color code so that's going to be background now you can see that slight difference and then we're going to have a padding 1m unit we're going to have a position relative and a height of 100 pixels all right and then crypto label is going to be text transform so again this is targeting this area right here is going to be uppercase and what am i doing there i didn't spell it right so just to make sure it's it's up uppercase by default and then we're going to do a font size and beef it up to 1.5 m units we're going to font weight bold it and then we're going to do a margin top of negative 1.5 m units that gets it there in the center of course i was experimenting with these values when i first created the project by the way for those of you are wondering why don't i just create this from scratch without having reference code some people feel like it's not real if i do that trust me we fumble a lot and it's just live coders do that but people understand it usually it makes the process a lot longer so many people the top youtubers like in this niche we we all it's always just makes sense to have the reference code because we're trying to sit here teach at the same time all right so margin top negative i'm gonna have to give it its color too because it had its own color and that will be right here copy that and there's the color all right so now we just have to do that delete button which is a class of i delete btn background is going to be none and border will be 9. position is going to be absolute right is going to be one m unit and bottom will be one m unit cursor is going to be pointer because we don't get one with a that way with button and then outline will be none and that's it so that's all it is for our market we don't actually have any media queries for this design so what we're going to do now i probably should put a max width on this but that's no big deal at this point i think also i didn't put a border radius on these but that's okay you guys can do that too um let's go ahead now and focus on actually making this work i with the logic portion which means we're going to be working a lot here within the script section all right so we need um access to an api that will allow us to grab all of that uh the data um associated with the current prices and other information with uh the cryptocurrencies that a person wants to track or add um and so cryptocompare.com offers a great api um they offer a free one as well i'm already you know a member i've already created an account and i already have access to my api keys so basically get your free api key click that button so you have that all ready to go when the time comes now in order to communicate with this api you need a um an http client library of some sort that allows you to communicate from your app back you know to basically say the the app will our app will say it's going to send a request um designating different uh cryptocurrencies sorry i'm being slow um like btc or um eth or whatever uh or multiple and and then this will send us back the information uh so that we can display it in our template so we're going to use a popular one called axios all right so in order to do that we're going to go to terminal which is the viewer terminal right now and we're going to click this plus to get a second terminal open and they're both listed here now and we want to install with npm axos axios not axos so we're going to run npm i axios and so that's going to install axios with our current project and once that's done um we're not really going to be communicating with it i'm just trying to get some initial setup work going here anyhow what we need also to to consider is the fact that we need somewhere to store which cryptocurrencies a person has added all right so this is an area where you have multiple options as well you could store them in a database that you control you can use uh something called firebase which is offered by google and that's kind of like a database in the cloud where they they store it in that case it would simplify your app greatly because then you don't have to create uh or use um express or anything as it's called um but we're going to use what's called all right it's a database that we can use and works well with node.js applications there's something in my eyeball and so we need to create a folder and we have to install a couple things in order for that to run all right so uh is that thing still running geez what is happening let's get out of third console while we wait and we're going to make dur back end we're going to cd into it back end all right and then we're going to in npm and knit to initialize a package json file i should have put hyphen y because i'm just going to hit enter on all these and then we have to install a few things now these few things that don't be i guess you say don't don't be too intimidated by them pretty much every everyone who creates a like a back-end these are the packages as packages that you install in order for it to work so npm i we're going to do body hyphen parser we're going to do coors we're going to do express and we're going to do mongoose which is for mongodb itself so we're going to install all those and that went really fast all right so this installed axios as well so we're good to go there all right and at that point we're going to create a database.js file here in our backend folder right here all right so we'll create that database dot js all right and we're going to put in module.exports equals an object with a property of db for database and we're going to put mongodb forward slash localhost 27017 and then we'll just name this here i the name moon coins like that all right so we're going to save that and then back in our back end we're going to oh by the way in order for this to to work as well um you actually have to have mongodb set up on our development uh your environment on your computer um so let me get that out real quick oh quick oh quick oh mongodb installation all right so i'm on windows obviously they'll have um if you go to install mongodb there's obviously a lot of you know there's mac os all right so you're going to have to install this first and you have to also make sure that you have access to um the commands via the command line also i didn't realize how dark i was it's got dark outside so i just increased my light brightness anyhow after that we're going to create also a inside of the back end folder we're going to create what's called a models a models folder and inside of that we're going to create one called crypto so uh when you when you add information to a database um you want to create a series of what are called models uh and so i'm gonna create one just called crypto ours is such a very simple purpose i and we're only storing one thing literally the name of the crypto so it's going to be as simple as it could possibly be so we're going to create a consonant of mongoose because we have to import that so require mong goose because we installed that earlier and also the schema we import that as well and that is mongoose dot schema and then we say let crypto schema new schema inside of here ah there we go we're going to put a name and that's going to be a type of string all right so you define basically all of the information that's going to be submitted as a part of this form for us it's just one property called the name and then right here we're going to put in collection is going to be called cryptos then one final line we have to export this mar module exports with mongoose dot model we export it as crypto and we pass in crypto schema which is defined above that's it for that part so next up after that we're going to go ahead and create another folder in our back-end folder called routes so inside of routes we're going to have crypto.route.js all right so inside of here we are going to have this is where the main backend area of our coding ends up going um this is where we import express which is our server and we're going to require express right here and then we're going to const crypto route will be express dot router and now we'll go ahead and reference the crypto model that we can uh import it rather that we created in the previous step so we're going to let crypto model require and then we reference the path of it which is models crypto right here and then we say crypto route which we've imported above we specify the route here it's just going here to i this is where it's submitted um it's not to a specific url and then we put in the get method we pass in the request and response and here we say crypto model and we put find all right so we're going to put an error and data all right and then inside of here we're going to say if there's an error return next error so else if it's successful we return the response like this which we'll catch um at this point we can then just go ahead and so this this right here all this code is responsible for just basically getting the data that's already been submitted let's take this and copy it and paste it so right here this is going to be add crypto all right so it's going to look pretty much the same for the for the most part except in here we're going to instead of using the find method we're going to use the create method all right so let's update this stuff here as well so let's delete this this is going to be the request body and pass in error and data here and if there's an error where did next tick come from that's funny i didn't type that out all right so this is going to be the same thing if error returned next error and then else response json all right so this is saying i request a body oh we have to put host as well because when this url is accessed from the express backend it's expecting this payload information all right and that is just going to be the crypto name and then once it has that information it's going to post to it i it's going to create that entry into the database essentially and then this is just error handling here so the request.body is the information that's going to be posted and then finally we're going to do a one more of these routes which is going to be delete instead of just there's so many things i have to update i'm going to do this from scratch so model.route this is going to be delete crypto but we need to know which uh crypto id that needs to be deleted so we put a forward slash id right here and then we're gonna run delete and request response next open that up then we say crypto model dot find by id and remove right there and this one and what what is it so the first parameter is the request parameters as params.id and then error data and inside of here it's all the same stuff essentially for the most part for the error at least so let's do if i error inside of here we say return next error just like we did above but then this time we do else response we're going to do status 200 json and we can put in message and data so this is i going to be passing in returning uh otherwise uh a success excess successful basically uh query if you want to call it um and you can see that we have data right here which is passed in right here so let's go ahead and save that and then one final line for all this to work is right there so module exports crypto route all right i want to make sure oh that's wrong crypto i thought something looked funny crypto route okay there we go so we have three different things now in a true crud app where you're doing create read update delete you would have a couple more of these uh we're not doing the ability to update although you could definitely work that in with like a little pen icon next to each of those cards um but yeah just to keep this a little bit quicker we're just doing something very you know quite simple and even something quite simple if you've never worked with this before is very complex at this point all right now finally the last step is we have to actually create a app.js file for express that's going to kind of tie everything together that we just did here in the back-end folder so we're gonna do app.js and honestly express i don't have a lot of experience in um there's quite a bit of code here i'm just gonna paste this in and we'll go over it uh in a pretty quick fashion so um looking at this let me expand this out here um we're importing several different things pretty much all the stuff that we installed uh several steps ago in the command line so we have express that we're including cores mongoose are we're importing the database here one one thing that i wanted to make a note of is in the database.js when you first install it you don't have to it doesn't force authentication it's a very good practice obviously to move all this stuff into the connection string into in an environment variable inside a dot emv file and sid is going to take care of doing that being that i already created it um so that's just something to note uh then also this body parser so first you connect to the database right here and i'm not going to go over all this stuff i basically when you create an express server a lot of the stuff is boilerplate template stuff that you just worry about after we have to specify our endpoint here back i i did yeah inside the routes file right here um we're creating uh the endpoint as being api this is the ports of this stuff i'll be honest when i when i initially typed this up i got this from a tutorial anyways um and i just pasted it in so a lot of this has set it and forget it um it's just boilerplate and i'm good when it comes to full stack development this is one of my weak areas i will completely be honest with but it does work so now that we've done all that we can now actually run our express server with our backend and hopefully it all will connect up which it probably won't so we're going to go to terminal new terminal we'll get into our back end here and we're going to write node app.js all right so we got an error cannot find module db uh that's because i named it database all right so database save that come back hit the up arrow key hit enter database couldn't be connected to invalid connection string or connection string is in database and i forgot a colon all right ctrl c to stop that up arrow key enter connected to port 4000 database connected yay we are now good to go so now at this point let's hop back into the logic section of our app.js so let's close this out we're going to go to our app view and now we're going to get in here into the script part and we're going to import axios right here at the top and it's going to be axios from axios package that we installed export default our data we're going to return a few things our base api url which is going to be http localhost 4000 forward slash api we're going to define a couple properties here so the first one is going to be name because that's one of the things that we're going to be uh getting from the database here we're also going to have kryptos as an array and then also kryptos list as an object and you'll see how these things come into play as we develop further here so we have different life cycle hooks that we can tie into and the first one is created and that oops i did not put that in the right spot all right we're going to put that right here i believe it goes so created me basically means when this uh the app loads up it's going to run this stuff and so we're going to reference a function that we're going to create so this dot get cryptos all right and then after this we can define our methods this is where most of our code is going to go so i will do get kryptos first all right so get kryptos and inside of here is where we use axios so we're going to say axios.get this dot base api url which we already defined then we take the response and we say this dot kryptos which we already created equals the response data all right so at this point it's probably worth doing a console log i of our uh this decryptos so let's see what ends up happening here so if i save that control shift i we see it says proxy array zero that's because there's nothing in our database because we haven't submitted anything yet so we know that's working that's great um at this point we're just going to leave this here because let's go ahead and try to make it work to add the data that we want to add so it's going to be handle form submit and so that goes right after here now why are we using that well if you remember during the html process above in our form handle submit form i i made that wrong handle for submit no it's handle submit form there we go and inside of here we say axios post this dot base api url and we're going to add add crypto so that's one of the end points in the routes that defined in the backend folder uh and so we pass in this crypto so this dot crypto is in reference to the form element the text input field and then we're going to say then got arrow function then we say console.log this.crypto just to make sure it's all working but then we do this start up we're not pushing anything though and then we say i this dot crypto equals name we basically reset it to back to empty and then we're going to call this.getcryptos our function up here after we've added it all right and then we also want to catch any errors console.log error so let's see if this actually works i'll be surprised if it does that's how much confidence i have all right btc let's try adding bitcoin as the very first on oh this needs cursor pointer by the way all right let's see what happens all right so what happened here array1 name is empty so we got at least it did store something it did store something and we have an id but the name is empty so let's figure that out so i did let's see here so we're saying this dot crypto all right and let me make sure that i have this all matched up oh that's why remember i had to take this out it was erroring v model crypto.name let's try that again we're going to refresh and well this time we'll do eth there we go now it works names eth there we go all right great so now we have two of these let's go ahead and work with the template now to get them actually pulling uh this data um actually before we do that we actually have to communicate with the crypto compare api and we do that in get crypto so basically at this point we have to do a couple things so this right here this response data or this kryptos is an array of objects and in order to communicate with crypto compare api and by the way now would be a good time to get the api documentation up um why did it take me here let's see oh documentation so this is where it lets you know like uh all the stuff that you can essentially do this is the get url that we're gonna that we're going to use um you can get multiple symbols full price um we don't want a single symbol we want multiple symbols pricing you can also get full data which would honestly in this case of the app would make sense to get full data so that you can just display more information on each of those cards and maybe you can try that yourself but i think we just used this one right here so what we need is this we need to be able to turn that object into a comma separated string that we pass into this variable or the the connection string so to do that what we do is a little and this has nothing to do with view it's just straight up javascript so we're gonna say let names equals array.prototype.map and oops.call and we're going to say this.cryptos s dot name and then to string all right so now if i console.log the names we should now see that let's refresh we have that empty one and then comma eth so that's how you do that um let's get rid of the console log so now we use axios we use a get request and this is where we send it we're gonna use backticks to that url so that url started with this fsims this is where we put in our names variable that we just created in a couple lines above and then we do uh the currency and we're also going to have to put in an api key so let me paste this in right here the anti sims right here usd and then api key which you can find in your crypto compare account so i'm just going to paste mine in and i'm going to do it off screen oh and then i don't worry this isn't the full one don't even try it don't even try it we have to i write the following code then response so we get the response and we come out and we take our cryptos list let's get this over here all right this decrypted list equals the response data and then we can go ahead and catch in any errors and console log the error normally you want to put this like in a variable that then you can show in the temp the actual html template so the user can see but that should be good to go right here now let's console.log uh this dot cryptos list all right so let's see what's going on there all right so notice it only has one it doesn't because the other one that submitted was just blank a blank name that'll get emitted automatically and so we'll have our information here inside of that eth property all right so now at this point we can start working with this and iterate over it to actually show all the data that we need so what we'll do is encrypts we iterate over them with v4 so that'll equal items name in crypto's list which is which the kryptos list property holds all of our the response data from crypto compares api and then inside of that we say key and this is one of those things that's required by view otherwise it'll screw up so we have name so now for our price we put the number symbol and then we put format price and this is a function that doesn't yet exist which we're going to create right now so format price is just a quick function i found on the internet to format this price that's returned from them and i'm going to paste that right at the very end here think it's right here after this one there we go format price i'm not even going to bother explaining that it's just something i found that seems to work all right so after that i then we need to specify the name so we just put here name this should work now all right so ethereum look at that 1488.65 let's add bitcoin btc now there it goes and it's been added oh look at that awesome awesome stuff and notice this is how it's automatically responsive so let's keep on adding more uh we need a way to delete this stuff so that doesn't work so let's make that work so uh on our button we're going to put after this at click.prevent delete crypto we pass in the name and then we define our delete crypto method put it right here we pass in the name which is retrieved from the template and in delete crypto we have to do a little a bit of javascript and working around um the uh the array of um the actual where is it at crypto's right here so when the components start and it's loaded we call this like get cryptos which is defined right here it returns all of our data from the mongodb and we store it in this dot cryptos all right um and so we're going to use the name which is defined here like btc or eth to find the correct road to delete if that makes sense so in order to do that we're going to say let we're going to say found object equals this dot cryptos dot find and we're going to say x is x dot name equals name all right so basically just saying look at this i this array here and find the uh name that's equal to this right here so if i if i type in bitcoin or btc rather then it's going to look through all of the entries in the database with btc and it's going to define it in found opt right there okay so we also have to get the uh the index of that as well uh because when it comes to mongodb it automatically assigns an id to each of the entries all right so we're going to say let index of array item equals this dot cryptos oops dot find index this time i is i underscore id and then found object dot underscore id then we say axios.delete backtix this dot base the api url delete crypto all right so we're communicating with the back end and then we put in found object underscore id all right and then we say then there we go and we'll say this dot cryptos splice index of array item one all right so what that's doing is it's it's taking i our kryptos right here and which is the object that's created up here and we or the ray rather and we get rid of this item that was found through name if that makes sense all right so then we call this uh get kryptos to refresh it uh on the page and then finally we do the catch error thing which is we're just going to do that right here and we'll see if it works probably won't work all right i have a lot of confidence so we'll refresh that no errors that's good let's try to delete ethereum here oh it worked look at that so that we can add it back add that how about i think iota is a four letter one there's iota um what are some other ones is doge does d-o-j-e yeah it is oh that's messed up didn't anticipate on that i'll leave that for you guys though but that's basically it and as you can see it is uh it's responsive it works well i would probably want to put a max width on these so they're not flying off like going real crazy like that so we're not done just yet we have to add uh we have to get github um and get this added as a repository so we're gonna go to github.com we're going to click here new repo we're going to call this moon coins all right and we're going to make this private we're going to create the repository all right so we can run through this right here in order to get this set up so let's go over here i like a million terminals open already um so here in the root folder of the project we're going to run git init and by the way you're going to need to have git installed so that's another tutorial you'll have to check out and then git add all and then we'll be commit get commit hyphen m first commit all right and then we're gonna do git branch main i'm just running through all the steps get and then this part i'm just going to copy and paste because i don't feel like typing all that out all right and then get push u origin master or main rather all right so this is going to push it and when i come back here and refresh this we're going to see all of our files that are ready to rock so now i at hosting juror and definitely use hostinger for this as the sponsor of this video and i definitely recommend them for hosting i because we're running a node.js app we're going to have to use a vps or virtual private server hosting all right so obviously it could be dirt cheap if you buy in bulk in terms of the months that you're going to need and just this one with i i believe yeah i all these specs here which is you know more than enough to get started is what you would want to choose so you would select this and get going i especially using the code here in the youtube description all right so this is what i've created i've already set this server up um and then sid is now going to take this uh and also make sure to remember at hosts and jurors is where you're going to register your domain name hostingjour.com let me log in with my information real quickly um we'll log in here because i haven't actually registered that dot net yet so i'm going to register that let me get this off screen here i don't want it showing all my stuff uh i'm going to click on domains all right so mooncoins.net it better be available sometimes like you check something and then later on it's like in like five minutes it's not available there we go we're going to add that to the cart so this is one of those steps that if you're you know really interested in following this you should definitely do so we're going to continue to cart all right and then you're going to want to register it by you know exactly how you want so check out i'm just going to do paypal and get it into my account and so at this point i'm going to now headed off uh hand it off to sid from devops directive and he's going to make this work within the vps that we purchased all right i'll see you at the end hello as gary mentioned my name is sid and i run a youtube channel called devops directive where it's my goal to help engineers level up their devops and cloud infrastructure skills today i'm super excited to help take that app that gary just designed and built and get it ready to deploy onto a virtual private server within hostinger then we're going to connect a custom domain so we'll be able to access that site at mooncoins.net there's five main things that i'm going to do in this process first i'm going to make a few minor modifications to the code that gary wrote to make it ready for deployment next i'll make some configurations within the gui on hostinger.com to set up the vps so that i'll be able to connect to it and then configure dns to point our domain to the ip address i'll install and configure mongodb on the server i'll install cadi server which is going to serve the front end files and proxy to the backend api and then i'll also install node.js a node.js package called pm2 which is a process manager that we'll use to manage our backend service with that let's get into it gary just pushed the latest version of his code to github so i'm going to go ahead and clone that to my local system i'll just copy this url here then do git clone paste that in now i can change directory into that directory moon coins and then i'll open up my code editor as i said there's a couple of minor changes that i want to make here the first of which is to modify some hard-coded strings to make them more generic so that they'll work for both our local environment as well as the production deployed environment within this app.view file we've got a hard-coded localhost 4000 here on line 38. i'm going to change that to use a environment variable with process dot and then it has to have this prefix of view app then we can name it whatever we want so i'll do base base api url and it has to have this prefix because that'll get picked up when we actually run our yarn build process now i'll store the values that will get substituted in there in two different files the first file is going to be dot n dot development and this will get used when we run our yarn start command yarn serve command excuse me so we need to define that same environment variable name which is view app base apa url view app base api url and then we'll set it equal to that value so now when we run this locally it'll behave as expected next we'll create another file dot m.production and this file will get used when we run yarn build we'll paste in that same string but instead of setting it to that local host value we'll set it to mooncoins.net we can remove the port number this way when it's deployed into hostinger and we make an api request it'll request this url rather than localhost which is important so that we have the request coming from the same origin as the front end and the back end that handles the changes for the front end there is an additional change on the back end that we'll need to make within this database.js file we've got a connection string hard coded here so again i'm going to remove that and set it equal to this process dot end and i'll call it connection uri great now in order for this to keep running locally i'm going to add to our package.json file start here and that start command is going to set that environment variable before it runs node and then app.js so we'll do connection string connection uri excuse me equals set it equal to that value and then we'll run node app.js so now if we were to run yarn start it would execute this and set that environment variable which would get picked up by this process environment here when we deploy it onto the onto the hostinger virtual server we'll set this to a different value with some actual authentication for our mongodb database that's all i need to do to change the code now i'm going to jump into the hostinger interface and make a few setting changes there the first thing i'll do is create a dns record pointing this mooncoins.net to the ip address of our server so i've already copied the value of that ip address i'll just go in here under manage dns name servers and then i'll add an a type record with the at symbol the add symbol just denotes that it's the root url so this will point mooncoins.net to this ip address we'll add that record and then we see it shown up here at the bottom there's lots of these other records that i think hosting are added automatically those are less important as long as we have this one we should be good to go now i'll go back to the server interface and i need to configure a way to connect to this server there's a few different options i could set the root password here and then log in with that it's easier and more secure to use an ssh key i already have one set up if you need to learn how to do it they have a tutorial here linked but i'm just going to cap my public key out and then copy it into this input box so it'll be cat and then my home directory dot ssh id dot pub so this is the public key that i can paste in there to verify my private key on that server so i'll paste this in click add looks like it's being added it could take a minute to connect but now i should be able to just run this ssh root command and get connected to that server i'll add the fingerprint to my known hosts and now we're connected awesome the next step as i mentioned is going to be to install mongodb onto this server i'm just going to follow this community edition on ubuntu tutorial for 20.04 which is the version of ubuntu that i'm running the first thing that we're going to do is to grab the gpg key from the mongodb servers so that we can verify that it has the correct signature when we download the package looks like that worked now we need to create a list file so that it can look up the sources for where it's going to download this from we'll run an apt-get update and while these have sudo associated with them i'm logged in as a root user so you don't actually need to have sudo here if you do it this way now i can install using app get install mongodb org this is the community edition now while that's installing i'll point out this next session if we didn't do anything else the next time we did an apt-get update or upgrade it would actually upgrade the version of mongodb which could be an issue if they were breaking changes instead we can run these commands and that will pin the version to the current version that's being installed so that we don't run into that issue down the road so now that that has finished installing i'll go ahead and run that okay good and now we're going to use systemctl to actually control mongodb and this way we can set it up so that it will run if it crashes it will restart and when we restart the server we can configure mongodb to start up automatically so i'll run system ctl start we can then check the status of it with this command and we can see that it's running awesome finally i'll run system control enable and this will set it up so that when the system starts up will start along with it great so now we have mango to be installed but it's important to note that by default mongodb doesn't actually have any access control and any user can do anything so we'll want to add some user accounts with more limited access so that we can control which data users can actually see within the database this is a good tutorial on the official mongodb documentation on how to do that the first thing that we're going to do is just connect into the database with the command this will bring up a command prompt running inside the database we're going to use the admin database so we'll switch to db admin and then we're going to create a user so the first user that i'm going to create will be called my user admin it's going to have this role user admin any database so this user will be able to do pretty much anything finally it's going to also have read write any database so it can read and write from not just the admin but any database across the whole install it then prompts me to input a password so i'll do that great so it looks like that added successfully while we could use this user i'm actually going to create another user with less permissions to use for the actual application so again it'll be db create user this one i'm going to name non-admin user so here the name of the user is not an admin user and it only has this read write role specifically for the moon coins database and that's the database that we're going to store the data for the application again i input a password it looks like it was created successfully finally before i exit out i'm going to use use moon coins and this will switch to the moon coins database or if it hasn't been created it will create that database and then switch to it so that's all i need to do right now within the database itself so i can exit however i do need to now restart mongodb to pick up those changes so first i'll stop it with systemctl stop on go d and now i'm going to modify the configuration file that mongodb uses upon load using this command so i'll open it in vi etsy db conf we want to update the security section it's going to be security and then we want to specify authorization enabled authorization enabled we'll just save that and then we can just restart mongodb check that it's running and it looks like we're good to go so we now should have those two users that we created one admin user one non-admin user with passwords and we're going to be able to use that within our application configuration to connect to the database next up i want to actually copy our application code onto the server there's a few ways we could get the code onto the server i could copy it from my local machine onto it which is the method i'm going to use i could also pull it from github if i wanted to if we were going to automate this likely we would have some ci continuous integration tool that would push changes with each uh commit to the master branch or the main branch onto our server and then we'd be able to build from there but for now i'm just going to manually copy it from the local system so i'll exit off of this ssh session and then i'm going to r sync the code from my local directory onto the remote directory so the command for that would be rsync dash r for recursive i don't want to copy in the node modules folder because they could be slightly different from my mac onto this linux machine and so i'll exclude exclude and i'll use the asterisk as a wild card so it'll catch both the front end and the back end npm modules folders and now we want to copy from my current working directory present working directory where the source code is onto this vm at the ip address and then on that machine i'm just going to use the standard convention of user source app okay looks like that worked so now i'll ssh back into that machine and just verify that that code is actually there so i'll change directory into this folder if i list the files now all of the code is onto the server perfect with that done i'm going to go ahead and start to install the different dependencies for these by default yarn is not installed in ubuntu so i'm going to have to go ahead and install yarn it's similar to installing we're going to add a gpg key okay then we're gonna add the sources list file i will appt update and then with that complete we'll just act install yarn awesome looks like it's done so now i can just do yarn install i'm inside of this top level directory and so if i do yarn install it'll stall install all the dependencies in that package.json file and install great with our dependencies installed we can now build the application with yarn build as i mentioned earlier using yarn build we'll set it into production mode so we'll use that dot f dot production file and pick up the correct base api route so that when we deploy it it will have the same origin as the front end it looks like it was successful if i list the files in dist i can see all the files that were built including the index.html as well as some javascript now i need to install cadi which is the web server that we're going to use to serve the front end as well as proxy to the back end when i first tried to set this up it wouldn't start and i couldn't figure out why but then i looked at what was already running and i noticed that there was an instance of apache running so if i do top i can see all the processes running on the system and i see apache 2 here running it was taking it was binding to port 80 and so i actually need to stop that before i can spin up caddy in order to do that i'll just run the command slash etsy init d apache 2 stop this way port 80 will be free and we can install and run caddy on it again installing cadi is similar to installing these other packages we start by setting up the gpg key we then add the lists file we'll run apt update and finally we can install cadi now by default ubuntu will only serve files within the slash var www.html directory so we're going to need to move our built frontend into that directory the way that we can do that is with the cp or copy command we'll copy recursively with dash r and then we'll copy from user source app dist which is where those built files are stored into var html sorry www.html we'll also want to configure the firewall so that inbound traffic can access our files via cadi in order to do that i'm going to install ufw ubuntu firewall i'll then configure a few rules we can do ufw allow http this will allow inbound traffic on port 80. we'll also do https which will allow inbound traffic on port 443 and finally we'll set allow ssh so that we'll still be able to connect via ssh at this point we need to enable the firewall so we do ufw enable yes now the firewall is active with those rules applied to configure cadi we use a caddy file located in slash etsy caddy caddy file so i'll edit that file now here's the default we're going to make a few modifications to it the first thing that we need to do is replace this port 80 with our domain name so in this case it will be mooncoins.net we then need to specify the email address associated with that domain in order for the authentication challenge to generate the certificate to succeed this is contact at coursetro.com we need to set the root directory equal to where the website files are stored so i just copied them there it's that var www.html directory then we're going to add one more directive here the reverse proxy directive and so what this is going to do is allow us to catch any requests to mooncoins.net api by doing this slash api star so this will catch any requests that is mooncoins.net api and then any trailing characters and then we're actually going to redirect that request to localhost 4000 which is where we're going to serve the backend service file server is correct and so now we'll just exit out of this and we want to actually restart cadi to pick up these changes so i'll use system ctl restart caddy so that should pick up the changes and then i'll also do system ctl enable caddy so that it would be run upon startup for the virtual server at this point we should be able to access the front end on our domain if i go to mooncoins.net i can see that it loads properly however we don't have the back end running yet so if i try to add one btc add nothing happens that's expected because our back end's not actually running so that takes us to the final portion of this we need to actually activate that back end and as i mentioned we're going to use a tool called pm2 which is an npm package that manages processes so that we could have multiple instances of our app with the load balancer in front if if the process dies it will restart it automatically so it's much better than just running it with node uh and then app.js so in order to install this i'm going to install it globally with npm install pm2 dash g oh i don't have npm yarn yarn global add pm2 i'll cd into my backend directory now like the front end we need to install the dependencies for the back end so we'll do yarn install and we'll grab all those dependencies from package.json and install them great one additional consideration is that if i just ran it as is it would run as the root user preferably we don't want our processes running as root and so instead i'm going to create a dedicated node user that will run to use this in order to do that i'll do the add user and then name it node it's going to ask me for a new password which i'll give it again none of these values matter and so now we have a new user named named node in order to set pm2 up to be able to handle modifying the startup scripts i do need to allow node to elevate itself to user with the proper password so to do that i'll run user mod dash a capital g sudo node so this adds the node user to the sudo user group so that it can elevate its privileges as necessary in order to use this node user i'll now use su which will permanently grant allow me to start a session as that user and then not node three just node so now we have a session running as that node user and we can use this to spin up our process as i mentioned we want to set up pm2 so that it will start our process upon startup so i'll set pm2 startup and here it notes because i'm not running as you as root it gives me this specific command that i can execute to set up the startup script appropriately it asks for my password to elevate the privileges and now it should be configured in system d to run upon startup at this point we're ready to actually spawn the back end app similar to when i ran it locally with yarn serve i need to specify that environment variable connection uri and that's going to be equal to mongodb colon slash and then it's going to be the username so that's non-admin user colon and then the password at localhost 27017 is the port slash moon coins is the database and then we need to specify the auth source equals admin so this remember when we created that user we created it within that admin database so by setting auth source equals admin it will know to use the admin database to look up our user and figure out which roles it should have now we'll specify pm2 start and then the path to our app.js file so the user source app backend app.js that's going to spawn our process and now we can see it running finally i'll do pm2 save which will take the current set of applications running and pm2 save which will take the current set of applications running and store them into that startup configuration so if i go back to here and i try to add this new coin btc and hit return it adds it to our list and that gets stored in the database awesome let's add another one eth litecoin we can try deleting one adding it back okay it seems like things are working let me refresh the page we see that the data is still stored also because i set up that reverse proxy if i go to mooncoins.net api we can hit the api directly and see the response returned to json and that's it we have our application running on the virtual private server connected to the custom domain to recap we had to make a few modifications to the source code to changing out some hard-coded strings for environment variables so that they would be compatible with both the local deployment as well as a remote deployment onto our hosting or vps we then configured the vps with our ssh key so that we could connect and set up a dns a record pointing our custom domain to the ip address of that server on the server we installed mongodb and configured it with authentication with a user that had limited scope and was only able to access the specific data that we wanted we installed cadi server to serve our front end as well as proxy to the backend api and then we installed pm2 and launched our backend service using that to manage it hopefully this video was helpful in learning about all the different steps that go into designing building and deploying an application if you want to learn more about the latter half of that process especially around devops and cloud infrastructure feel free to come check out my channel at devops directive but with that i'll hand it back to gary to close us out all right thank you very much for that sid hopefully you all found that useful it did probably a million times better job than what i could have done during that process so i of course i think it would be a great uh exercise for a lot of you i if you follow along during the development of this app to extend it you know make user logins so that you know multiple people you know they can track their own coins and all that stuff i'd love to see what you end up doing if anything so as always make sure to subscribe if i can talk and i'll see you soon goodbye [Music] so [Music]

Channel: DesignCourse

Views: 23,552

Rating: 4.9762139 out of 5

Keywords: full stack development, full stack development tutorial, what is full stack development, full stack developer, gary simon, designcourse, by example, sid, devops, deployment, html, css, javascript, vue3, mevn, mevn tutorial, mongodb

Id: ek50iuo5zkE

Length: 141min 28sec (8488 seconds)

Published: Fri Mar 05 2021