(Develop a web application complete with backend and frontend Develop a fullstack web application / Develop a MERN stack website)[sc name=”yuvaaninarticle”]
I will talk for both advanced and beginner developers in this blog. So, if you are a beginner , don’t get confused with if you see anything that looks too advance for you. As soon as I am done with discussing the advanced stuff, I will also discuss a roadmap to how to reach that position. And if you are an advanced developer, well you know which part to skip.
As the title says, I’ve built this using MERN stack, which means MONGO, EXPRESS, REACT & NODE
- Node Js with Express Js
- Mongo DB with Mongoose
- NEXT JS (which is basically React JS with server-side rendering)
- It’s also a PWA so go ahead and install it as a standalone app in your devices.
So, why Next.JS?
By now, I had already developed some projects using React.JS and became quite comfortable with the framework. But the only problem with React.JS is that it is a framework that uses a virtual DOM to render the HTML and while doing so, everything gets rendered in the client-side thus when the website loads from the server, it only loads some bunch of JS which is not good for Search Engine Optimization (SEO). And for a blogging platform, it was mandatory to get good SEO. To get good SEO, server-side rendering was important. And that’s where Next.JS shines. While being pretty much React.JS under the hood, with some really easy to pick up changes, Next.JS was perfect for this. In the end, I managed to score a perfect 100 in SEO Audit by Lighthouse.[sc name=”yuvaaninarticle”]
So that was frontend part in a nutshell. But for those who are just getting started with web-dev and mainly frontend development, here is the roadmap to reach a position to build this exact website –
Road map to NEXT.JS : GETTING STARTED
- First off, what is at the core of any website? Its HTML. So, if you have not started with it already, it’s the best time to go ahead and get started with it. A great resource for that is W3SCHOOLS-HTML.
- And what Paint & Plaster is to a bricked wall is CSS to HTML. And a great resource for that too is again W3SCHOOLS-CSS.
- A bonus will be learning a CSS framework like BOOTSTRAP. And I know you guessed it, yet again a great resource to learn that is W3SCHOOLS-BOOTSTRAP.
- And once you have done all these, I would highly recommend you to just practice developing simple websites, maybe using Bootstrap to get the general idea of the structure of webpages and routing, etc.
Road map to NEXT.JS : THE NEXT LEVEL (pun was definitely intended )
- So, by now you are definitely a beginner frontend developer. What you need to do next is get started with React.JS. Trust me, the fun has just begun. While the getting started part was a handful, once you dive into learning a framework like React.JS, it’s all up and up and up. But this is only going to be true for those who did the getting started part with complete sincerity, as React.JS has JS in the core heart of it, having a not so strong background in JS might just be the deal breaker that takes all the fun away from it. But who is to say, there are many developers who just wing it and pick it up while learning the framework. So, if you are one of them, kudos, follow along. As I said earlier, the fun has just begun.
- So before you start learning React.JS, one wise thing would be to make yourself familiar with NODE.JS. While Node.JS is not required for building just the frontend, but it comes with a package manager knows as Node Package Manager (NPM) which you WILL be using extensively for the next few steps. We will be discussing Node.JS in more details in the coming sections.
- After doing that, what you want to do is get your hands dirty with APIs (Application Programming Interface). See! I told you that the fun has just begun. Now API on itself is a bigger term than we generally use it for, to get started with React.JS, what we need to do is understand REST APIs. Now, what is REST API? That is a whole different blog to discuss, so I will leave it up to you to google it. A heads up, you don’t actually need to learn how to develop REST APIs to get started with React.JS, JSON-PLACEHOLDER is a great resource to get REST APIs to simply practice while learning how to fetch data from REST APIs using React.JS.
Road map to NEXT.JS : LEARNING REACT.JS & NEXT.JS
- I know, I know, I sense the hype, and here is where the hype gets settled. Let’s start learning React.JS. To just get the initial flavour of React.js, you can definitely check out W3SCHOOLS-REACT.JS. But this is not going to be sufficient, though it is definitely going to be necessary to kick start the learning process. I highly recommend you to take up online tutorials from whichever platform you are comfortable with. I do like taking up courses from UDEMY. If I were to recommend a particular course, here is one – React – The Complete Guide (incl Hooks, React Router, Redux). But do not mistake my recommendation to be “THE ONE”. It is just a recommendation among the plethora of valid recommendations.
- Now if you have followed exactly what I told in the previous step, then you already are through both React.JS and Next.JS and you probably now see all the dots getting connected and probably have figured out how to build this exact blogging platform too. And if that’s you, kudos .
- And now my friend you can easily pick up Next.JS, and that’s it. A great resource is Next.JS’s very own DOCUMENTATION.
- Finally, go ahead and build your frontend for your very own Blogging Platform.
But wait! Are we not forgetting something?
Remember how I told you about using JSON-PLACEHOLDER while learning the frontend part. Well to get your website up and running, you will have to set up a backend which will serve you the dynamic data from your database to be consumed in your client app. So here you can make do with one of the following two routes –
- Either team up with a backend developer to simultaneously develop the backend while you develop the frontend of your website.
- Become the backend developer yourself.
Ok, so this might sound like too much work. But believe me, if you have come all this way, the next part is not that hard. So, if you have decided to go with the first route, then it’s time for you to get started with the development of your product. And I hope this blog helped you find the answers you were looking for. But for those of you who are going with the second route, which is becoming the backend developer yourself, then follow along. And a nice recipe of becoming a MERN full-stack developer is coming right up!
Now while there are a number of options to choose from while developing a backend, and one definitely cannot go wrong with any of the available options as of the date this blog is posted, but since I went with Node.JS (with Express.JS) along with MongoDB as the database, those two are what we are going to talk about in the coming sections.[sc name=”yuvaaninarticle”]
So, why Node.JS?
So, that was backend in a nutshell. But for those who are just getting started with web-dev and mainly backend development, here is the roadmap to reach a position to build the backend for this exact website –
Road map to REST APIs : LEARNING MongoDB
- The best place to start is by starting to learn and getting acquainted with a database. As whatever we are going to build, that is going to revolve around the structure of the database we choose to store and fetch out data form, one cannot go wrong starting off with learning the database.
- Since in our case we are talking about MongoDB, a great resource to get started with is TUTORIALSPOINT-MONGODB.
Road map to REST APIs : LEARNING Node.JS
- Now assuming that by now you are familiar with JS, (which if you are not, as I stated earlier can pick it up from W3SCHOOLS-JS), you can get started with Node.JS.
- While vanilla Node.JS is not exactly what we generally use while building REST APIs, it’s a good idea to know how Node.JS works without any other framework on top of it. A great resource to get started again will be W3SCHOOLS-NODE.JS.
Road map to REST APIs : LEARNING Express.JS with Mongoose for Node.JS with MongoDB
- Like I said earlier, we generally do not use vanilla Node.JS for building REST APIs, and this is where Express.JS and Mongoose comes.
- A great resource to get started with them is TUTORIALSPOINT-EXPRESS.JS
Road map to REST APIs : FOR PRODUCTION
- While the above-mentioned resources are great to get started with backend development, to develop a backend which is actually going to be production-ready, there is a lot more to learn and understand.
- And while building a backend, a very important and crucial aspect is making sure that the backend is scalable and can handle high traffic. So, it is my suggestion to take a professional course about “how to build production-ready & scalable backend”.
- There are a ton of options and ways how you can approach that, and probably one cannot go wrong with any of the options they opt for, but if I were to be asked to recommend a particular course to learn just that.
Feel free to drop a comment below and react to this blog. I really hope this blog helped you envision a roadmap to how you can build a web application, complete with frontend and backend just like this one. Feel free to reach me out at my public email id. Thanks for reading.