MERN Stack Journey : Learning MERN Stack as a beginner

Hola mate, hope you are doing well, if you are a beginner to MERN stack, this blog shows my whole journey with the MERN stack. Let's start with my introduction, who am I? and what I have done yet?

So here is a bit of introduction, my name is Shubham, I am a computer engineer, graduating 2024 in Savitribai Phule Pune University. And now I am in final year, having more than 1 year of experience with learning and creating applications using MERN stack. Currently I am doing an internship in a Pune based startup (April - Current) and looking for more opportunities. Also working on a final year project named "Web Guard" which is basically a deep learning model that can detect an explicit content part in video or image and makes them blurred out. And preparing for exams to maintain SGPA 😅. Too much burden this days.

Long ago in my 2nd year of college, I was coding too less and looking for ways to make money where I wasted too much time and after an incident of a getting selected for finale of a national level hackathon I learned about Node.js, Express & MongoDB and there I started loving it.

You know doing DSA is a increasing temperature of human servers and I am avoiding it, genuinely I don't like to become competitive programmer but I solves minimal amount questions to improving my overall logic and problem solving. But I love development more than that so I am here.

Indeed above meme is much relatable to most of the MERN developers 😂. You can take a pause and laugh.

Anyways, Starting of the MERN

As I also told above, I started the journey with that hackathon opportunity. Usually I pick a project and a tech stack required to that, and starts learning and building things I documented. This is ideal way I wish I should have adopted to building projects. But I went wrong way and wasted lot of time.

As a full-stack developer if you are learning MERN you should decide whether you want to become master in Frontend or in Backend. On that way you can decide what to learn first, in my case I was not aware about this thing. But luckily I picked up backend while in hackathon phase and I learnt about the backend tech stack - Node.js, Express, and MongoDB. And now I am clear that I like Frontend and can move to a job as a full-stack React Developer.

So I started with basics of Nodejs, what it is? and everything about Nodejs basic modules like http, fs, crypto, etc. Then I learnt about Express js, creating server with it is much easier than the Node http itself. Then the part of MongoDB and integration of database with server comes where I learnt about mongoose and ORM. You can't imagine I learnt these basics in just 20 days and coded for non-stop 36 hours 😪. But genuinely I did it well in a dumb way 😅.

Here are some concepts must not skip while learning the MERN stack -

Prerequisite

• JavaScript Basics - variables, classes, functions, objects, arrays, array functions, loops, conditionals, constructer, etc.

• ES6 standards - arrow functions, module export/import statements, let & const keyword, spread operator, async await, destructuring assignment, etc.

• Document Object Model (DOM) & DOM manipulation

• HTML, CSS, JavaScript libraries - JQuery, Lodash, etc.

Node.js

• NPM, YARN (Package managers)

• Creating server with http module

• fs module, os module

• Package.json file & Scripts

Express Js

• Creating server with express js

• Environment variables & dotenv

• Router

• REST APIs - query, body, params, headers, cookies

• API versioning

• Middleware functions

• CORS

• JSON

• Authentication, Authorization, JWT

• Postman for API testing

MongoDB

• Installation of MongoDB database server, mongosh, & MongoDB Compass, creating cluster.

• Basic CRUD in operations - Find, Save, Update, Delete.

• Data modeling

• Mongoose ORM - Connection to Database, Creating Models, Defining Schema, doing CURD operations, data populating, etc.

React Js

• Start with Create React App or Vite.

• Learn about folder structure, components (functional components), jsx, etc.

• Prop drilling

• Hooks - useState, useEffect, useNavigate, useLocation, useCallback, etc.

• Creating custom hooks.

• API calling with fetch.

• Axios integration for API calling.

• Learn about Material UI, Tailwind CSS, Bootstrap, Next UI, Styled Components, Formik, etc. libraries.

• Redux state management.

• Redux toolkit - reducers and extra-reducers.

• Deployment of project with netlify or hosting service.

And one main thing is to not to skip learning Version Control, git & GitHub.

In a context if you are a full-stack developer you never work on both sides equal you must become master in one. As I picked learning React you can. I am still learning new things and diving much more deeper into concepts. And looking forward to learn about AWS, Deep Learning and many more.

Thank you for making a time to read this article.