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
Learned:
- GitHub integration
- Automatic deployment
- React application hosting
- Production build process
- Backend Deployment
Backend server was hosted using:
Render
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
Excellent platform for learning:
- MERN Stack
- JavaScript
- APIs
- Full Stack Development
- Database concepts
5. Anthropic
An AI company focused on building safe and advanced AI systems.
Top comments (0)