Developing a blogging platform using MERN stack — Blogaroo.in

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)

What is Blogaroo?

www.blogaroo.in
  • Mongo DB with Mongoose
  • 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 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.

  1. And what Paint & Plaster is to a bricked wall is CSS to HTML. And a great resource for that too is again W3SCHOOLS-CSS.
  2. 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 interact 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.
  3. 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.
  4. 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.
  1. 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.
  2. 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 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.
  1. 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 🥳.
  2. 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.
  3. 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 -

  • OR
  • Become the backend developer yourself. 😅

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 of 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 of why MERN stack, too. And while we are on this subject, Node + MongoDB + Mongoose is just a breeze. As their WEBSITE quotes, Mongoose is an elegant MongoDB object modelling for Node.JS. And voila! This is why MERN.

  1. Since in our case we are talking about MongoDB, a great resource to get started with is TUTORIALSPOINT-MONGODB.
  1. 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.
  1. A great resource to get started with them is TUTORIALSPOINT-EXPRESS.JS
  1. 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”.
  2. 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).
  3. And that’s it, my friend, by now you are ready to build your very own Blogging Platform just like BLOGAROO
{
//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"
}
}
{
//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"
}
}

A product manager and a skilled full-stack developer. Know more @ www.arunabharjun.com