MERN Stack Application: Build and Deploy a Modern Real Estate Website (Vite.js, Tailwind CSS)

since it's a new year I decided to make a brand new series on M Stack so M you already recognize from a lot of my videos on my channel this is another M application that we're going to be making but this one is going to be completely built from scratch we are going to B make it Bare Bones um the back end the front end we're going to try to integrate it we're going to use a lot of tools throughout this entire application and we're going to also deploy it on some service provider and you know you're going to see all these parts connected to each other so it's a fast-paced series you're going to love it you're going to enjoy it for those who are absolute beginners it's amazing video to get started but I would just recommend having a prior experience in a little bit of HTML CSS and some sort of knowledge of JavaScript and then uh you know you could dive into this react video of course you could check out all my other react application videos that I've created in the past but this one is a brand new one and this is a full featured one so um for those who are experts or um those who have knowledge of react this is a really good video for you know brushing up your Concepts and also maybe learning something new some good Pro uh programming practices and all that so let's get started um I'm right now currently in the react. deev page and you can see that react the library for web and Native user interfaces So currently what I'm going to do is I'm going to build a real estate website and you can see right now I have this folder which is state I'm going to quickly go into CMD I'm going to go to code and Dot and make sure you have Visual Studio code opened up here we're going to go to this part and what I'm going to do is I'm going to have vit installed V is going to be uh that part which is going to be a framework that is going to be used to build my react application so the command for V is npm create and then we have V at latest and then we're going to have client and if I do this I'm going to name that you know folder client this is going to be my front end side so I'm just going to press enter over here you're going to see the magic starting so it's going to ask which framework and we're going to say react here so uh essentially V you know is all build on top of react U just quick uh fix that it's not a framework but you know now V is used to build react so you could see you could use react framework for this let's now select a variant so we're going to use JavaScript plus W S swc which is a little faster and easier to load it it loads much faster so we're going to have that and then you can see it's all done well now we have to do is we just go to CD client and over here we have to go into code and Dot you'll just explore the uh directory structure here you can see that you could cross that out and right now you have the public folder which contains you know some of the initial things at source which contains your application. jsx which is your you know brain and then after that you have the app.css index.css and you know the other uh traditional things but to have the react application running you already know how to install it so normally U if I want to install any of the node modules I do npmi but if I just want to run it because right now it's just a brand new one so I could just to npm run Dev and if I do this you could see right now you could see beat is not recognized as an internal or external command operable patch or uh so what we're going to do is we're going to go in here and let's see what's the fix so I'm going to go back here there's a lot of other things that are open up so I'm just going to cross all that stuff out and you can see this is the only thing that's opened up you could open up this uh terminal here and you know the client is opened up here essentially I don't have the node module so the correction for me is I need the node module so I do npmi and this is going to install my node modules uh for me and then it should be existing up on in this folder so you're going to see it uh after some time it's going to load and do it so um other than that we're going to have to you know wait until this is done and you'll see all of that stuff out of course I made another video uh in the past so right on the uh time that you know this is loading you could go here and I actually made a complete video that uh explains how to get uh V and Tailwind CSS up and running so this video which is responsive website using uh Tailwind CSS explains the whole process that I'm going to go through again um but you know um you could actually go in this part and you could have the installing V and installing Tailwind CSS part from there uh but other than that you know you could go in this uh just to U make a products application pretty basic you create read update delete credit functionality but right now uh we're going to make that so um because you know it wasn't the node modules weren't installed that's why it wasn't recognized in V but now you can see that 94 packages are looking for funding and you can see um that you know there's no vulnerabilities and now I shouldn't have that problem and you can see that the no module folder is now appearing over here perfect now we could just simply have npm run Dev traditional and this should run our application using V because now V is recognized you can see this port is 5173 if I control click it you can see that this V application is there and the counter is working perfect now this is your you know boiler plate and we're going to have to move on from there now the next thing that uh once we have the V installed we have to actually integrate Tailwind CSS within our application um so what we're going I'm going to normally go is I'm going to go to Tailwind CSS tailwind css.com and you could go here you'll see the Tailwind CSS website just like that and go to the docs and in here you have to go to the framework guides and you could see over here that there's V right and inside the V you could see you create your project and we just did this part where we downloaded our project right we installed our project we went to the project directory but now we have to install Tailwind CSS this says the Tailwind CSS and its peer dependencies so install tailin CSS and its PE dependencies so this is um you know the command to install that so npm install hyphen de Tailwind CSS post CSS and auto prefixer just go here and paste it right there inside the client folder and this should install you know the Tailwind CSS and its U dependencies so right now you're going to see after some time it's going to be installed but you're not going to see any change uh with any file but I mean you're not going to see a new file being placed right now you'll see all the files are same but the thing that's going to change the thing is the next command which is npx Tailwind CSS in it hyen P and this allows you to uh then generate your Tailwind Doc config.js and post css. config.js files using this command so when I do this command uh let me just go back to the vs code and right click you'll see now um uh npx Tailwind CSS init hyphen P now it just created these two files for me remember and I told you that you could see them over here this one and this one so perfect so this one is there and this one is there we're going to have to modify this one right now let's go back and let's see the next step the configure template paths add the pths to all your template files in your taable so add the pths to all of your template files in your Tailwind doc config.js file so what basically saying is that um these are the paths on you got to just uh you know configure it either you could just copy this part because it just highlighted it or you could just you know do the easy way around and just copy the entire thing and you know just remove this and just paste this entire thing perfect and now after that this actually means that Tailwind CSS will be applied to the index.html you could see that this is the remember the uh common file around your entire uh react application so Tailwind will be applied there but it also says that it's going to go in the source folder within the source you'll see that there's JS uh any any kind of files which have the extension JavaScript typescript or jsx or TSX which are also JavaScript typescript files uh the Tailwind classes will be applied upon them as well so um you know all of that is accepted I would uh you know we go next to the add the Tailwind directives to your CSS and now you have to go to add the tail add Tailwind directives for each of the Tailwinds layers to your source index.css file just copy this and now you have to go to index.css it's pretty simple all you got to do is you got to go to the source and you can see over here we have index.css just remove the existing stuff and just paste this stuff so you can see add Tailwind base add Tailwind components and add Tailwind utilities again if you want to know some Basics about Tailwind CSS you could check that Tailwind video out that I made earlier um and yeah so now after that we have start your build process now you're just going to have to run and everything should be working so perfect let's go back here um and I don't need to open it up here because I'm going to use the you know integrated terminal and I'm going to go here and just going to say npm run Dev this is going to you know run the whole thing again but the thing is the app.jsx uh still contains uh you know some junk and I want to remove all of this because it's already existing and you saw this before you know those spinners and everything so just remove all of this and say WRA C if this doesn't work for you and and I I press rap C and then you know enter this is basically an extension that I'm using and U you know i' I've repeated this overall throughout my other videos and if uh you don't have this extension I would recommend checking it out go to the extensions and just type in es7 um and this is one of the most powerful extensions called es7 plus react Redux um just install this you know all you'll get this um you know filler and then also the other thing is um you know uh the other extension that I really like is you know um Auto uh rename tag okay so Auto rename tag it should be this one no not some Auto rename tag I think it's this one because yeah the most popular one 16 million one um and just install this and this is used to you know I'll I'll show you the demonstration for this extension as well um other than that if you have a Tailwind I remember uh I have the whole guidelines for Tailwind CSS but if you want Tailwind CSS intellisense install this extension as well all right so this is going to give you some hints about classes and all that so all that stuff is out of the way now you go here and just type in something like let's suppose head one and then say hello now the thing is the thing is that this is now there you it's going to be reflected um and the you know the auto rename tag does this now since I have this extension on now I could I could change this to a paragraph and I just typed in the first one and change the other one by itself so this is just pretty helpful right um so now let's go and open up the application open application is up here you can see that it says hello and I'm just going to what I'm going to do is I'm going to put it on the side like this and this on this side now of course we want to check the Tailwind CSS as well so what we could do is we could say class name and then inside the class name we normally put something so you know if I say uh something like color now you can see I'm getting these suggestions um but a lot of them are you know some default ones so there's a there's a cheat sheet um you can just type in Tailwind CSS Tailwind CSS and then say cheat sheet there's one really famous one and it's this one and it gives you you know the color schemes like if you want like red color or something color um so background color and then we have text color and then you can see all these colors that you'll have just click on any color like suppose this one and just copies it to your clipboard um you go back here and just paste it right here so I'm just going to paste it um and you can see it reflected so there you go um and my my code was highlighted that's why but yeah uh anything you want red you know blue um and you know Tailwind is applied successfully and you know if this stuff doesn't work then I recommend re-watching this to see the the proper configuration for this perfect uh this is great um and one other thing that I want to do before I make a GitHub repo for all of this is that I want to remove some um you know unwanted files uh within my project so the first file that I might not need U is go to the source and you would see this is app.css this is like default CSS so um it's recommended to just remove it so let me just go and maximize this and go go to apps. CSS and just right click and delete it like that now after that uh just go to the um public folder and over here you see the v. SV SVG default stuff remove it doesn't matter and then the last thing that I would to recommend is go to the assets so this is basically in the source assets and then there's this react. SVG just delete this as well all right so all of that stuff is done now you could go and uh normally you could open up a you know you could see that this is the client and uh this is the mer application so essentially on here um this is your rout directory and just make a gith up repo for this so I'm just going to go here essentially you just to CMD over here and now let's go to github.com and create a repo for this so it's pretty simple all you go to go is github.com um you know go to your profile so essentially I'm going to my uh personal GitHub there's another one which is coding cleverly you can follow this one as well so create a new one and create a repository um and over here we're going to create one which is going to be called M uh I'm going to say m and then we're going to say estate okay and this is going to be you know what I'm talking about which is a mod application with the table one CSS uh now public and we're going to create this so after that we just follow these in instructions um we go here it's all simple stuff uh let's go here and uh over here okay so since I'm over here I normally use my GitHub here um what I'm going to do is I'm going to first uh you know initialize something initialize a GitHub re we using get in it and then after that we have to you know add the things that are there so just get add and then we have get commit the good commit hyp and M and then just say first commit like that come on and then we have get um Branch you want to make it into the main branch so this is normally the you know the original branch and uh you have to connect your uh add origin essentially um you have to make it within the right path so this is my path uh yours is going to be something else just paste there the reason why I'm putting it on GitHub repo is that uh for you guys to see the source code and also when I'm going to deploy this application online it's going to need to get up repo so just doing it right now so that we could save time so let's go and push this hyphen new origin and Main and after this you know this whole thing should be pushed refresh the page and you'll see that the code is not yeah existing here so over here we have this entire code and we have the you know all of that St

Channel: Coding Cleverly

Views: 3,640

Keywords:

Id: HMYX8w6fT8Q

Length: 14min 59sec (899 seconds)

Published: Mon Jan 01 2024