MERN Stack Development – Day 1 🚀

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.