Introduction
CRUD operations—Create, Read, Update, Delete—are the backbone of any full-stack application. In a MERN Stack project, Express.js handles API routes, while MongoDB manages the database, making it essential for developers to master these operations for real-world apps.
At CuriosityTech.in, learners practice building robust MERN applications by implementing CRUD operations, connecting frontend forms in React to backend APIs, and storing structured data in MongoDB.
Connecting MongoDB with Express.js
Before performing CRUD operations, we need to establish a connection between Express.js and MongoDB:
const express = require(‘express’);
const mongoose = require(‘mongoose’);
const app = express();
app.use(express.json());
// MongoDB connection
mongoose.connect(‘mongodb://localhost:27017/mernapp’, {
useNewUrlParser: true,
useUnifiedTopology: true
}).then(() => console.log(‘MongoDB connected’))
.catch(err => console.error(‘Connection error:’, err));
Curiosity Tech emphasizes using Mongoose for schema modeling, validations, and managing data consistency.
Defining a MongoDB Schema
const { Schema, model } = require(‘mongoose’);
const UserSchema = new Schema({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
age: Number,
});
const User = model(‘User’, UserSchema);
Schemas ensure structured data and make CRUD operations predictable and safe.
CRUD Operations Explained
1. Create (POST)
Add new documents to MongoDB via Express API:
app.post(‘/users’, async (req, res) => {
try {
const user = new User(req.body);
await user.save();
res.status(201).json(user);
} catch (err) {
res.status(400).json({ error: err.message });
}
});
Use Case: Adding a new user from a registration form in React.
2. Read (GET)
Retrieve data from MongoDB:
// Get all users
app.get(‘/users’, async (req, res) => {
const users = await User.find();
res.json(users);
});
// Get single user by ID
app.get(‘/users/:id’, async (req, res) => {
const user = await User.findById(req.params.id);
res.json(user);
});
Best Practice: Use .find() for multiple documents and .findById() for single records.
3. Update (PUT/PATCH)
Modify existing records:
app.put(‘/users/:id’, async (req, res) => {
try {
const user = await User.findByIdAndUpdate(req.params.id, req.body, { new: true });
res.json(user);
} catch (err) {
res.status(400).json({ error: err.message });
}
});
Explanation: The { new: true } option returns the updated document. Use PATCH for partial updates.
4. Delete (DELETE)
Remove documents from the database:
app.delete(‘/users/:id’, async (req, res) => {
try {
await User.findByIdAndDelete(req.params.id);
res.json({ message: ‘User deleted successfully’ });
} catch (err) {
res.status(400).json({ error: err.message });
}
});
Table – CRUD Operations Summary:
Connecting React Frontend to CRUD APIs
- Create: Use forms with fetch or axios.post
- Read: Display data with axios.get
- Update: Forms pre-filled with data, axios.put or axios.patch
- Delete: Button triggers axios.delete
This is the core workflow of MERN applications, creating a seamless connection between frontend UI and backend database.
How to Become an Expert in CRUD Operations
Curiosity Tech guides learners through end-to-end MERN projects, ensuring they implement CRUD functionality with best practices and scalability in mind.
Infographic Suggestion
Conclusion
CRUD operations form the foundation of any MERN application. By mastering these operations and connecting them to React frontend, developers can build fully functional applications like user management systems, blogs, or e-commerce platforms. Consistent practice and guided projects, like those at Curiosity Tech, ensure proficiency in implementing efficient, scalable, and production-ready CRUD systems.