Blogaramaa - Developing a blogging platform using MERN stack

Vikaramjit Singh

3 years ago

Do you want to learn how to develop a blogging platform?


(Develop a web application complete with backend and frontend  / 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: https://www.blogaramaa.com


What is Blogaramaa?


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


  • REACT JS


Road map to REACT.JS : GETTING STARTED


  1. 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.
  2. And what Paint & Plaster is to a bricked wall is CSS to HTML. And a great resource for that too is again W3SCHOOLS-CSS.
  3. 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.
  4. 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.
  5. 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 REACT.JS : THE NEXT LEVEL


  1. 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 😎.
  2. 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.
  3. 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.


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 -


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


  1. 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.
  2. 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


  1. 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.
  2. 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


  1. 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.
  2. A great resource to get started with them is TUTORIALSPOINT-EXPRESS.JS


Road map to REST APIs : FOR PRODUCTION


  1. 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.
  2. 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".
  3. 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).
  4. And that's it, my friend, by now you are ready to build your very own Blogging Platform just like BLOGARAMAA


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.


BONUS


For those of you who are curious, here are the dependencies that went into developing BLOGARAMAA


(I have copied the list of dependencies directly from the package.json file for the following)


BACKEND

"dependencies": {

"@sendgrid/mail": "^7.4.4",

"cors": "^2.8.5",

"dotenv": "^10.0.0",

"express": "^4.17.1",

"express-jwt": "^6.0.0",

"formidable": "^1.2.2",

"jsonwebtoken": "^8.5.1",

"mongoose": "^5.12.12",

"nodemailer": "^6.6.1",

"nodemon": "^2.0.7"

}


FRONTEND

"dependencies": {
    "@chakra-ui/icons": "^1.1.7",
    "@chakra-ui/react": "^1.8.8",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.33",
    "@types/react": "^18.0.8",
    "@types/react-dom": "^18.0.3",
    "axios": "^0.27.2",
    "framer-motion": "^6.3.3",
    "github-calendar": "^2.2.9",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-github-calendar": "^3.3.1",
    "react-lazy-load-image-component": "^1.5.4",
    "react-pdf": "^5.7.2",
    "react-query": "^3.38.1",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-scroll": "^1.8.7",
    "react-web-share": "^1.1.6",
    "typescript": "^4.6.4"
}