DEV Community: Monika B R

Day 2 of MERN Stack Journey 🚀

Monika B R — Fri, 08 May 2026 13:47:57 +0000

One important realization from today was:

Every big application we use daily once started with a simple server, a database connection, and a few lines of code.

Today’s MERN Stack session was highly interactive, practical, and fun to learn. Instead of focusing only on theory, we started developing a real-world Employee Management System using the MERN Stack. This session helped us understand how frontend, backend, database, APIs, and deployment work together in a complete full stack application.

We followed the official MongoDB MERN tutorial as a reference guide:

MongoDB MERN Stack Tutorial
https://www.mongodb.com/resources/languages/mern-stack-tutorial

🌟 What is MERN Stack?

MERN is a popular full stack web development technology stack.

Technology	Purpose
MongoDB	Database
Express.js	Backend Framework
React.js	Frontend Library
Node.js	Runtime Environment

✨ One of the biggest advantages of MERN Stack is that the entire application uses JavaScript from frontend to backend.

💻 Project Started — Employee Management System

Today we started building an Employee Management System where:

Employee data can be managed
Frontend and backend communicate using APIs
Data is stored in MongoDB Atlas
Application is deployed online

This gave us real-world exposure to full stack development.

⚙️ Backend Setup

We first worked on backend configuration and server setup.

✅ Tasks Completed

Created MERN and SERVER folders
Initialized Node.js project using:
npm init -y
Installed required packages:
Express.js
MongoDB
CORS

Updated package.json with:
"type": "module"
Created server.js for backend server setup

🧠 Quick Recap — Why Express.js?

Express.js helps us:

Create backend servers
Build APIs
Handle requests and responses
Connect frontend with database

☁️ MongoDB Atlas Setup

We learned how to connect our application with a cloud database using MongoDB Atlas.

✅ Tasks Performed

Created MongoDB Atlas cluster
Generated MongoDB connection string
Added IP address in Network Access

Created:
config.env
connection.js
Successfully connected MongoDB with backend server 🎉
🔥 Interesting Concept Learned

MongoDB stores data in:

Collections
Documents

Unlike SQL databases that use rows and tables, MongoDB stores flexible JSON-like documents.

🔗 API Development

We learned how APIs connect frontend and backend applications.

✅ Tasks Completed

Created routes folder
Created records.js
Connected backend with MongoDB
Tested API routes successfully

This helped us understand backend routing and API communication.

⚡ CRUD Operations Recap

CRUD is one of the most important concepts in full stack development.

CRUD Meaning
Create Add Data
Read View Data
Update Edit Existing Data
Delete Remove Data

🎨 Frontend Setup using React + Vite

Frontend development was done using React and Vite.

✅ Tasks Completed

Created React project using Vite
Installed Tailwind CSS
Installed React Router DOM
Connected frontend and backend using localhost

🚀 Why Vite?

Compared to traditional React setup:

Faster development server
Faster builds
Better performance
Improved developer experience

🎯 Tailwind CSS Learning

We used Tailwind CSS for styling the frontend.

Advantages of Tailwind CSS

✅ Faster UI development
✅ Utility-first styling
✅ Responsive design support
✅ Cleaner CSS workflow

🌐 Deployment Process

One of the most exciting parts of today’s session was deployment.

Frontend Deployment

Frontend was hosted using:

Vercel

https://vercel.com/

Learned:

GitHub integration
Automatic deployment
React application hosting
Production build process
Backend Deployment

Backend server was hosted using:

Render

https://render.com/

Learned:

Node.js backend hosting
Environment variable configuration
Cloud deployment work flow

🔐 Environment Variables

We learned how to securely store sensitive information using .env files.

Example:

MONGO_URI=your_database_url
PORT=5050

This helps improve security and configuration management.

📚 Learning Resources Shared During Session

1. AI Engineering From Scratch

https://github.com/rohitg00/ai-engineering-from-scratch

A great repository to learn AI engineering practically from basics.

2. Understand Anything

https://github.com/Lum1104/Understand-Anything

Helpful for simplifying and understanding technical concepts easily.

3. DeepTutor

https://github.com/HKUDS/DeepTutor

An AI-powered educational learning project.

4. FreeCodeCamp

https://www.freecodecamp.org/

Excellent platform for learning:

MERN Stack
JavaScript
APIs
Full Stack Development
Database concepts

5. Anthropic

https://www.anthropic.com/

An AI company focused on building safe and advanced AI systems.

MERN Stack Development – Day 1 🚀

Monika B R — Thu, 07 May 2026 17:09:42 +0000

Today was my first practical session in MERN Stack Development. It was an exciting learning experience where I explored both theoretical and practical concepts used in real-world web development.

Step 1 – Creating Developer Accounts

In today’s session, we created accounts on platforms commonly used by full stack developers.

GitHub

GitHub is used to store, manage, and share source code online.

Vercel

Vercel is used for deploying frontend applications like React projects.

Render

Render helps in deploying backend applications such as Node.js and Express servers.

MongoDB Atlas

MongoDB Atlas is a cloud-based database service used to store application data online.

DEV Community

DEV Community is a platform where developers share technical blogs and learning experiences.

Step 2 – Introduction to MERN Stack

We learned the meaning of MERN Stack:

MongoDB – Database
Express.js – Backend Framework
React.js – Frontend Library
Node.js – Runtime Environment

This helped me understand how frontend, backend, and database technologies work together in full stack development.

1. React (The Face)

React is a Frontend Library. Its only job is to handle what the user sees on their screen.

Analogy: It is like the menu and the table in a restaurant.

Use:You use it to build buttons, forms, and the layout of your website.

2. Node.js (The Engine)

Node.js is a Runtime Environment. It allows JavaScript to run on your computer/server instead of just inside a web browser.

Analogy:It is the electricity and kitchen equipment that allows the restaurant to function.

Use:It provides the environment where your backend code lives.

3. Express.js (The Waiter)

Express is a Backend Framework that runs on top of Node.js. It handles "Requests" and "Responses."

Analogy:It is the waiter. When a user clicks a button (Order), Express takes that request to the kitchen (Server/Database) and brings the data back to the user.

Use:You use it to create APIs (routes like /login or /get-data).

4. MongoDB Atlas (The Warehouse)

Atlas is a Cloud Database. It is a place on the internet where your data is stored permanently.

Analogy: It is the storage room where all the ingredients (data) are kept.

Use: It stores user profiles, passwords, and project details so they don't disappear when you refresh the page.

5. MongoDB Compass (The Window)

Compass is a GUI (Graphical User Interface). It is a tool installed on your laptop that lets you "look into" your database without writing code.

Analogy:It is like an X-ray or a window into the storage room.

Use:You use it to manually check if your data was saved correctly, or to delete/edit a piece of data quickly using your mouse.

How they work together:

User clicks a button in React.
Express (running on Node) hears the click and asks MongoDB Atlas for data.
Atlas sends the data back to Express.
Express gives it to React to show on the screen.
You use Compass to make sure the data in Atlas looks correct. Here is the simplest code example for each part of the stack. This follows the structure you need for your project.

1. React (The Frontend)

In your App.jsx, this code creates a simple heading and a button.

`import './App.css'

export default function App() {
return (

Hello from React!

This is my first MERN project.

alert('Button Clicked!')}>Click Me

)
}`

2. Express & Node (The Backend Server)

Create a file named express.js. This code creates a server that sends a message when you visit it in your browser.

`const express = require('express');
const app = express();
const port = 3000;

// This is a "Route"
app.get('/', (req, res) => {
res.send('Welcome Learners');
});

app.listen(port, () => {
console.log(Server is live at http://localhost:${port});
});`

3. Node

Create a file named server.js.

`const { createServer } = require('node:http');

const hostname = '127.0.0.1';
const port = 3000;

const server = createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello Monika 23AI040');
});

server.listen(port, hostname, () => {
console.log(Server running at http://${hostname}:${port}/);
});`

4. MongoDB Atlas & Compass

These do not use "code" in the traditional sense, but here is what you do with them:

MongoDB Atlas: You go to the website, click Connect, and copy the Connection String (like the dbURI shown above).

MongoDB Compass: Open the app on your computer and paste that same dbURI string into the box to see your data tables.

CRUD operations are the basic functions used in databases to manage data. CRUD stands for Create, Read, Update, and Delete.
Create is used to add new data into the database, Read is used to view or retrieve existing data, Update is used to modify the existing data, and Delete is used to remove data from the database.
In MongoDB, CRUD operations are performed using commands like insertOne(), find(), updateOne(), and deleteOne().
These operations help users efficiently store and manage information in a NoSQL database system.

5. Git Commands (Saving your work)

Run these in your terminal to save all the code above to your GitHub.

git init
git add .
git commit -m "FSD"
git branch -M main
git remote add origin
git push -u origin main

Day 1 of MERN Stack Development was very informative and practical. Learning how frontend, backend, database, and deployment platforms work together was exciting.

As a student programmer, this session motivated me to build more projects and improve my full stack development skills step by step.

Looking forward to learning APIs, routing, authentication, and full deployment in upcoming sessions.