Day 1 of Full Stack Development Journey - React.js, Node.js, Express.js & MongoDB

Today was an exciting start to my Full Stack Development journey.
We explored the complete MERN Stack basics including:

• Created and explored accounts in Vercel, Render, LinkedIn, GitHub, and Dev.to
• Explored and applied for GitHub Student Developer Pack benefit
• Learned the basics of Frontend development using React.js
• Created a React project using Vite
• Learned Backend development basics using Node.js and Express.js
• Explored MongoDB as a NoSQL database
• Connected MongoDB Atlas with MongoDB Compass
• Performed CRUD operations in MongoDB
• Learned basic Git and GitHub commands

Morning Session

1.Installing Node.js & Checking Versions:

2.Creating Our First React App Using Vite:

• Created a React application using Vite.

• Then installed dependencies and started the development server.

• Edited the App.jsx

Opened the project in VS Code and edited App.jsx and created a simple student details table using:

Name
Register Number
Favourite Color

We also learned basic styling using:
App.css
index.css
This helped us understand component styling in React.

3.Node.js:
We created a simple calculator and server application using Node.js and tested it on another port.
This helped us understand:

• Server creation
• Port handling
• Backend execution

Afternoon Session

1.Introduction to Express.js:

• Learned the basics of Express.js and installed it using npm.

• Created Simple Routes Created an Express server using app.js

2.MongoDB Atlas Setup:

• Created a MongoDB Atlas cluster and configured:
• Database Access
• Network Access
• Connection Security
• Then copied the connection string.

3.MongoDB Compass Connection:

• Connected MongoDB Atlas with MongoDB Compass using the connection string.

4.CRUD Operations in MongoDB:
Learned basic CRUD operations:

• Create
• Read
• Update
• Delete insertOne

insertMany

find

updateOne

updateMany

deleteOne

5.Git & GitHub Commands

• Finally, we pushed the entire project to GitHub using Command Prompt.

Day 1 was filled with new technologies, practical learning, and hands-on experience in Full Stack Development 💻