Complete MERN Stack Developer Roadmap For Beginners (2023)

hi everyone today I wanted to talk you through a complete roadmap for the moon stack if you want to know what it is why it is used where it is used how you can start learning it more specifically how you can start learning it better than everyone else let's get right into the video also please ignore this if it's fixed very soon let me start with the disclaimer the disclaimer is that roadmaps like these are extremely useless the reason for that is you know what to do but like you don't really do that so I would strongly suggest after this video ends please try to go through these three videos in which I'm actually teaching the month stack from the basics and we've already had three parts now and I'll be adding more parts to this so that you actually start coding actually start building projects actually start making assignments that's the only way to learn the monster this video will give you a run back but unless you execute on it you won't really learn anything so full stack development is generally divided into two parts it's the front end and the back end front end is what you see content is what it reaches the user inside their browser and back end is where a lot of magic happens but you don't really see it as an end user so what is fronted on charging beauty.com it's basically all of this these two buttons this input box this button right here all of this is what's called front-end code and one very high level thing you need to know is this front-end code even though it's written by developers like us it's always run or it's always executed inside a browser so you can effectively you basically give this code out to the end user they can actually see this code because this code needs to run on the browser that's the only way for you to render a screen like this the backend code however the backend code basically is all the functionality of the website which is basically what happens when I click on this button what happens when I ask tag GPT a question how is it able to decode things and how is it able to give me an answer all of that does not run on your browser it runs on a device somewhere else out in the world it usually runs in like data centers like these and that is code you never see that is code I can never get access to whatever happens in the back end whatever converts this from into an actual answer I don't have access to as an end user but this website's code how this button looks like the CSS for it I can see as an end user if I do a little bit of magic tool front end code back-end code content runs inside your browser and backend runs on some data center out there so let's start with front end how do you write frontend code how do you write the code for a website that looks something like this in the pre-react days which means for a very long time until 2010 the only way to write something like this was using raw HTML CSS and JavaScript so these are three languages you need to understand what they do and how they work you also need to get a little comfortable with their syntax I would spend at least a day or two on HTML and CSS at least like three to four days on JavaScript just to understand its syntax and how you can do basic websites using just this tag nothing too complicated HTML CSS and JavaScript is enough to build any website that's out there but there are better ways to do it now which is why react was introduced but up until 2012 when a lot of front ends were built by some really smart people they were done in a raw exchange with ssngs there were some other Frameworks but the app came into the picture and sort of killed everyone else and the ACT is the primary framework now but up until this point for the first iteration of a front-end website of yours just use HTML CSS in JavaScript and try to build a website the important thing here is Javascript JavaScript was a language that was introduced because people realized we want to build a website it needs to have some functionality you're a chat GPT a button click should have a non-click Handler uh by click on this button if I click on this button something should happen that changes what this screen looks like to do all of this you need a scripting language that your browser can understand and in 1990s they realized that okay we'll put out browser as a primitive out there anyone can build a browser as long as your browser can understand these three languages the most important one here being JavaScript because JavaScript lets you do a bunch of things HTML and CSS just lets you visualize a website which is also important but the core functionality is determine JavaScript JavaScript which was originally introduced just to be done inside a browser eventually people realize it's a scripting language it can be used for backend stuff as well what is back-end stuff basically code that runs here and people sort of extracted the engine that understands JavaScript and put it out into a new framework which is called nodes yes not really a framework it's What's called the runtime but effectively whatever used to run JavaScript inside Chrome whatever that engine was people went into the source code of Chrome extracted just that part out and said hey JavaScript does a bunch of things inside the browser which is cool but now we have that engine you can do a bunch of other things with JavaScript as well out through this runtime called node.js so the one stack and in the month stack stands for node.js which is a runtime that lets you run JavaScript in the back end why is this new and why is it exciting this is exciting because For the Longest Time JavaScript was only meant to be run inside the browser which means it was only meant to be run on the end user machine which is your machine my machine not the developer's machine these data centers that we talked about JavaScript was never really meant to be run here but people realize that it's a very powerful language sort of slow because it was originally implemented for browsers but people thought but people thought hey a lot of JavaScript developers exist why just restrict them to the front end let's make them do backend stuff as well node.js was introduced again you can't run HTML or css in the backend only node.js more specifically JavaScript okay so what is backend in the non-stack it's basically you need to understand node.js and it looks very similar to JavaScript which is why it's like not very difficult to understand it but there's like a mild shift when you're moving from browser JavaScript to node.js in the back end because the backend node.js does not have a lot of browser constructs which your front end trade we'll come to that later on effectively it's a very easy sort of path to move from JavaScript in the browser to node.js in the backend once you've done that once you can run a few basic scripts in node.js comes the most important part it'll be HTTP servers and more specifically Express Express is what the E stands for in the month stack and this is what lets this machine that's out there in the world talk to my browser my browser that exists on my machine here in India can talk to a chat GPT server in the US because of this protocol called the HTTP protocol and the way to implement that protocol is building HTTP servers which in case of the month stack is using Express so what is Express press is an HTTP framework and if you want to understand this better go through the first part of the roadmap but Express is a framework that is written in node.js that lets you create an HTTP server which is used by browsers to talk to your backend machine so if you have a data center out there if you have a machine out there and you want to access it from any place in the world HTTP is one way to do it and most websites that are built out there that backend is usually an HTTP server that's how your browser talks to it and interacts with the tool the second important thing that a backend like this needs to do is store data when I go to chat dot openai.com I have this section on the left which looks something like this where all my existing chats are stored it also knows who I am based on when I have signed up and all of this data basically my first name my last name all my existing chats need to be stored somewhere and databases are one way to do it you could do it anyway you could like basically open a file on a backend server and store all your data there but databases make it easier which is why they were introduced as a construct a place where you store all your data and there are multiple types of database all for various use cases so there are two broad categories you can break a database into SQL and nosql from the very high level SQL databases are slightly more structured used in more proficient applications applications that need your data to be very strict but if you're just starting out you want to build a hackathon project nosql databases are slightly easier to understand and it doesn't take as long for you to understand them more specifically in the month Stack n stands for mongodb mongodb is a nosql database so if you want to specifically learn the month stack you have to go with nosql cool next part we know HTML CSS in JavaScript and we know HTTP servers now we can build a basic website both front and backend but this is like not the right way to build websites because it's like very hard to build a complex website using just HTML CSS and JavaScript which is why you need a Content framework these Frameworks were introduced because HTML CSS and JavaScript to Warrant enough and in the end what these Frameworks spit out are also HTML CSS and JS files but they make it very easy for developers to build these which is why these have become so popular like react developer in itself is like a job title because you no longer want to write raw HTML CSS and JavaScript you want to use the framework like this to make the life of a developer easy more specifically if you want to build a complex Frameworks the only way it can happen in a big company with multiple people writing code is through a framework like this there are other Frameworks as well but react is the most famous one so here is where people get stuck a lot here is where people sort of aren't able to move from raw HTML cases JS to a react project this is probably the most difficult part you can see this in my series as well the first part the assignment was done by more than 300 people the second assignment which is the react assignment was done by less than 50 people because in order to understand react it's much easier to understand HTML Cs and JavaScript and basic nodes cool so spend addition chunk of time here and react or general front-end Frameworks are usually broken into two parts components and state components are right uh without getting too deep into it um react sort of introduce this concept of components which is what makes lives of content developers easier basically a chunk of code that can be reused across places for example if you go to instagram.com all the posts that you see there are a component um the sign up button is the component all of these are small components that are built independently and can be used yet what makes that easier the second important thing is state which is basically more specifically what your website looks like so components are what a generic image post looks like state is okay for hakira what are the 10 image force that should appear in a simple array it does not have to be HTML CSS JavaScript so in the complete state of your application in a simple data structure is what state provides you and components basically a way to render everything based on your street so two parts components and states spend like a decent chunk here so you understand content development in react once you've done that foreign thing is connecting front-end and back in um it's easy to build HTML Cs and JavaScript contents it's easy to build Express back in it's easy to understand well sort of easy to understand and build a content in react but eventually I have to connect these two you go to chat.openia.com when I click on the button at the bottom end the requests it goes to a background backend returns something and then I render something new on the screen all of this process it's like a day or two worth of work where you understand hey this is how a browser application interacts with the backend once you've done that you need to deployed on the Internet it's easy to do these things locally but eventually if you want people to use it and most recently you'll have like a lot of dopamine hit if you deploy these things on the internet which is you host them on chat.openei.com or your own domain name like buy a domain name on godaddy.com buy a server deploy a code there and then make sure your code is available on the internet for everyone to run that's like a decent lift understanding that once you do you should understand containerization without getting too deep into it uh it's basically the way apps are deployed and most specifically back-end apps need to be deployed um once you understand containerization you need to understand Auto scaling one server is not enough you need a very big data center and the number of machines that are running your backend code need to go up and down only then will your app actually scale to millions of users else it will be running on a single server which well if no one is using your app it's great but effectively your goal is to build websites that people use and when people use websites load increases the load increases which means you need more servers which means during the peak time of IPL increase the number of video servers as IPL goes away decrease the number of video servers you need this to be cost efficient at the same time you need to make sure you can handle lower than spikes that's what a lot of scaling teaches you once you understand that you need to understand things that are more than HTTP uh most websites I have a strong feeling that this will happen eventually businesses will have some mood they currently do as well if you go to any of these websites uh they have some more more to being uh something that they have which is more than your client interacting with a backend and you're back and doing some basic stuff lead code lets you run any code of any language on the backend servers this is not something that HTTP will teach you or like the months that will teach you this is slightly more than building your sites YouTube has a very strong video pipeline transcoding videos going live sending live videos to millions of users all of these are something that are usually not part of HTTP or more specifically one stack but this is how you differentiate yourself from other people eventually when you understand the months tag and you can build simple websites you'll have to go into businesses let businesses will have some more and building the website is easy building these modes are hard we need to get into more complicated back-end Technologies Wiki for example has like a map feature or a tracking feature where in real time you can drag the driver a lot of these are outsourced to Google Maps but you want to build this in-house like a pretty decent mode for a business GitHub lets you store your code on the cloud and basically share it with everyone it's a very nice UI for your version control and hence also a decent mode that they have which is more than HTTP trailing application I don't even have to explain it not easy building an application like this and hence these are things you need to get into eventually but until you get there first you need to understand how you build basic websites basic patterns basic contents and databases so that one stack is great the only way to run it I think is doing projects and contributing to open source there are a thousand tutorials out there on the month stack I have created them myself but unless you do the assignments in my roadmaps you won't get anywhere unless you create your own projects you won't get anywhere best way to do that is either do your own projects do assignments code post them on GitHub or contribute to open source basically find projects that are already out there that are built by real developers that have a bunch of issues fix those issues only then you know that you actually understand them one step when you can contribute to other people's code when you're joining a company you're probably not bootstrapping the application from the basics there is an application out there you're solving bugs there so the only way you know you understand the one stack and you're comfortable with it is if you can contribute to open source projects or like build projects of your own so strong session here find open source projects in the months type contribute to them cool that's the end of the video that's a decent roadmap again go to full stack roadmap part one two three try to solve them if you want more specific guidance join my live course that is starting from 9th of June where I'll be teaching all of these things from scratch from night with a lot of assignments Saturdays and Sundays will be grinding it out and understanding these Concepts from the basics again you can have given the roadmap this is what I'm teaching you can do it yourself as well no hard feelings you want to learn it with a community with me by me during the course there'll be a lot of assignments there will be sort of very hardcore the second part of the course is going to be understanding open source projects so that you don't have a very high level surface level knowledge of the month stack you have enough knowledge to go into code basis and solve issues there and maybe get hired so that's the gift of my course if you want to join grade if not this is the roadmap follow it and I hope you become a master it is a top five percent in the month stack as I send the video I'll see you the next one bye

Channel: Harkirat Singh

Views: 175,596

Keywords:

Id: fKJVxItLiUw

Length: 14min 54sec (894 seconds)

Published: Sat Jun 03 2023