MERN Stack Day 1 – From React UI to MongoDB Database

kabine R — Thu, 07 May 2026 17:32:14 +0000

*# MERN Stack Development – Day 1 *

Today was our first Full Stack Development class and it was very useful and interesting. We started learning the basics of MERN Stack and understood how frontend, backend, and database work together to build real-world web applications.

At the beginning of the session, we created accounts on different platforms that are commonly used by developers. These included GitHub, Vercel, Render, MongoDB Atlas, DEV.to, LinkedIn, and GitHub Student Developer Pack. We learned the purpose of each platform and why they are important in modern web development.

GitHub is used for storing and managing source code.
Vercel is mainly used for frontend deployment.
Render is used for backend server deployment.
MongoDB Atlas is used for cloud database storage.
DEV.to is used for sharing technical blogs and learning experiences.

After setting up the accounts, we installed Node.js in our systems. We verified whether Node.js and npm were installed correctly using CMD commands.

```bash id="4q8xzp"
node -v
npm -v




Then we learned about the MERN Stack architecture:

* MongoDB → Database
* Express.js → Backend framework
* React.js → Frontend library
* Node.js → Runtime environment

This gave us a basic understanding of how full stack applications are developed using JavaScript technologies.

Next, we started learning React.js. We created our first React project using Vite and opened it in VS Code. We learned how to run the project using terminal commands.



```bash id="8m1qvr"
npm create vite@latest
npm install
npm run dev

We explored the project structure and edited the App.jsx file. We also learned basic CSS styling using App.css and index.css. We created simple components like tables, buttons, and text content. It was interesting to see the changes reflected instantly in the browser whenever we modified the code.

We also understood that React.js is mainly used for frontend development and user interface rendering.

After frontend basics, we moved to backend development using Node.js. We created a simple server.js file and learned how servers work. We understood concepts such as:

localhost
hostname
port number
server creation
request and response handling

We learned how to run Node.js files and display output in the browser.

Then we started learning Express.js. We created another project folder and installed Express using npm commands.

```bash id="1w6lpk"
npm install
npm install express




We learned about:

* API creation
* routing
* req and res
* backend communication

We also created simple routes and tested them in the browser.

One of the practical activities done today was creating a simple calculator example using Node.js. This helped us understand how backend execution works and how operations are processed using JavaScript.

Later, we learned about MongoDB Atlas and MongoDB Compass. We created a cluster in Atlas and connected it with Compass. We understood how databases are connected with applications and how data is stored online.

We also practiced CRUD operations:

* Create
* Read
* Update
* Delete

We learned simple MongoDB commands and understood how data can be inserted, viewed, edited, and deleted from collections.

After completing the practical session, we uploaded our projects to GitHub repositories using Git commands.



```bash id="3t5nwy"
git init
git add .
git commit -m "Day1 Work"
git branch -M main
git remote add origin
git push -u origin main

Today’s session was more practical than theoretical, which made it easier to understand the concepts. Seeing frontend, backend, APIs, and databases working together gave me a clear idea about full stack development workflow.

Some important things I learned today:

Creating React projects using Vite
Running projects using npm commands
Basic frontend design using React and CSS
Server creation using Node.js
API routing using Express.js
MongoDB database connection
CRUD operations
GitHub project management

Overall, Day 1 of MERN Stack Development was a great learning experience. The session helped me understand the basics of modern web development in a simple and practical way. I am excited to learn more about APIs, authentication, deployment, routing, and full project development in the upcoming classes.

mern #reactjs #nodejs #expressjs #mongodb #fullstackdevelopment #webdevelopment

DEV Community: kabine R

MERN Stack Day 1 – From React UI to MongoDB Database

mern #reactjs #nodejs #expressjs #mongodb #fullstackdevelopment #webdevelopment