Arunabh Arjun
Posted on July 5, 2020
Do you want to learn how to develop a blogging platform?
(Develop a web application complete with backend and frontend with SSR / Develop a full-stack web application / Develop a MERN stack website)
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. āļø
So, let's first talk about the actual blogging platform that we are going to refer to in this blog: www.blogaroo.in
What is Blogaroo?
This is a blogging platform, free for all to use. I created this as a part of my personal projects using MERN stack along with Next.JS. Essentially, I planned it to be simply a blogging platform for my own use, but then I figured, while I am at it, why not let the people use it too. So here it is. A very simple and intuitive platform for you to share your story.
It was an amazing experience building this as I have learnt a lot during the development process and that is what I would like to share today with you all.
Technical Specs-
As the title says, I've built this using MERN stack, which means MONGO, EXPRESS, REACT & NODE
BACKEND
- Node Js with Express Js
- Mongo DB with Mongoose
FRONTEND
- 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.
To know more, visit ABOUT BLOGAROO
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. Feel free to go ahead and run a test for BLOGAROO.IN and see what you get.
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.
- Now you must have seen how the doors and windows in houses are useless without the mechanisms that drive them to have some functionality right? Well, that is exactly what JavaScript (JS) brings to the table for HTML & CSS. To get started with JS, again a great resource is W3SCHOOLS-JS. Note: Even though Java and JavaScript have common word Java in them, but that's where the similarities end, as they are completely different languages. Here I just cannot stress enough how much important JS is as rest of the whole thing is heavily dependent on JavaScript. If you didn't catch it yet, all the frameworks that I have talked about in the sections above have ".JS" after them, which means they are simply frameworks written on JS or just have to be interacted with JS. So, while W3SCHOOLS-JS is a great resource, you shouldn't limit yourself to that. Do feel free to go ahead and dig up as much as you can about JS.
- 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.
- OR
- 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.
So, why Node.JS?
For starters, it's a JavaScript runtime environment. And being JS, there was not one-second thought for me. It had to be Node.JS. Moreover, with Express.JS which as stated in their very own WEBSITE, is a Fast, unopinionated, minimalist web framework for Node.JS. And as the frontend is also written using a JS framework, it would be very easy to build the REST APIs while being in the same paradigm of language, i.e. JS. Having said that, now I'll answer the question to why I choose MongoDB.
Why MongoDB?
The reason is very similar to "why Node.JS?". MongoDB is a database that stores the data in the form of JSON (JavaScript Object Notation) like documents. And again, JS shines. As MongoDB stores data in an identical format to what we get as a response from REST APIs, it was like the backend, frontend and database, are not any different from each other at all. And so, the developing process becomes much painless. And this whole reason also answers the question why MERN stack, too. And while we are on this subject, Node + MongoDB + Mongoose is just a breeze. As their own WEBSITE quotes, Mongoose is an elegantĀ MongoDBĀ object modelling forĀ Node.JS. And voila! This is why MERN.
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, I'll recommend NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL).
- And that's it, my friend, by now you are ready to build your very own Blogging Platform just like BLOGAROO
With this, I will conclude my blog about Developing a blogging platform using MERN stack.
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.
P.S: All the resources that I have recommended here in this blog are completely of my own opinion. In no way I am related to them or have been sponsored by any. This blog is entirely based on my personal experience and the ways I went with when I was getting started.
BONUS
For those of you who are curious, here are the dependencies that went into developing BLOGAROO
(I have copied the list of dependencies directly from the package.json file for the following)
BACKEND
{
Ā //other stuff,
Ā "dependencies": {
Ā "@sendgrid/mail": "^7.1.1",
Ā "body-parser": "^1.19.0",
Ā "cookie-parser": "^1.4.5",
Ā "cors": "^2.8.5",
Ā "dotenv": "^8.2.0",
Ā "express": "^4.17.1",
Ā "express-jwt": "^5.3.3",
Ā "express-validator": "^6.4.1",
Ā "formidable": "^1.2.2",
Ā "google-auth-library": "^6.0.0",
Ā "jsonwebtoken": "^8.5.1",
Ā "lodash": "^4.17.15",
Ā "mongoose": "^5.9.12",
Ā "morgan": "^1.10.0",
Ā "shortid": "^2.2.15",
Ā "slugify": "^1.4.0",
Ā "string-strip-html": "^4.4.2",
Ā "swearjar-extended": "^0.2.0",
Ā "temporary-email-address-validator": "^1.0.3"
Ā }
}
FRONTEND
{
Ā //other stuff
Ā "dependencies": {
Ā "@material-ui/core": "^4.9.13",
Ā "@material-ui/lab": "^4.0.0-alpha.53",
Ā "babel-plugin-transform-remove-console": "^6.9.4",
Ā "bootstrap-material-design": "^4.1.1",
Ā "browser-image-compression": "^1.0.11",
Ā "isomorphic-fetch": "^2.2.1",
Ā "js-cookie": "^2.2.1",
Ā "jsonwebtoken": "^8.5.1",
Ā "moment": "^2.25.3",
Ā "next": "^9.3.6",
Ā "next-pwa": "^2.4.1",
Ā "password-validator": "^5.0.3",
Ā "prop-types": "^15.7.2",
Ā "query-string": "^6.12.1",
Ā "react": "16.13.1",
Ā "react-dom": "16.13.1",
Ā "react-google-login": "^5.1.20",
Ā "react-quill": "^1.3.5",
Ā "react-render-html": "^0.6.0",
Ā "react-sidebar": "^3.0.2",
Ā "react-web-share": "^1.0.5",
Ā "slugify": "^1.4.0"
Ā }
}
By Arunabh Arjun
www.arunabharjun.com
Posted on July 5, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related