Building a Full-Stack CRUD Application with Node.js, Express, MongoDB, and Redux Toolkit

Creating a CRUD (Create, Read, Update, Delete) application is a great way to understand how the backend and frontend interact in modern web development. In this blog, we’ll build a complete CRUD application using Node.js, Express, MongoDB, and Redux Toolkit. The app will manage user data, including fields for firstName, lastName, email, and password.

What You’ll Learn

Set up a RESTful API with Express and MongoDB.
Connect a React frontend to the backend using Redux Toolkit for state management.
Implement Create, Read, Update, and Delete operations on user data.

Why These Technologies?

Node.js: Handles server-side JavaScript for building scalable web applications.
Express: Simplifies creating APIs and routing.
MongoDB: A NoSQL database for flexible data storage.
Redux Toolkit: Eases complex state management in React applications.

This project covers the entire development process, from backend setup to integrating frontend actions for creating, updating, and deleting users. Whether you’re a beginner or looking to enhance your skills, this guide will help you connect all the pieces into a cohesive CRUD app.

Backend: Building the REST API

Start by setting up the server to manage user data using Node.js, Express, and MongoDB.

Install Dependencies

Run the following command in your backend project folder:

Create `server.js` File

Here’s how the backend is structured:

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const PORT = 5000;

app.use(cors());
app.use(bodyParser.json());

// MongoDB connection
mongoose.connect('mongodb://127.0.0.1:27017/usercrud', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.error(err));

// Define User Schema and Model
const userSchema = new mongoose.Schema({
  firstName: String,
  lastName: String,
  email: String,
  password: String,
});

const User = mongoose.model('User', userSchema);

// Routes
app.get('/users', async (req, res) => {
  try {
    const users = await User.find();
    res.json(users);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

app.post('/users', async (req, res) => {
  const { firstName, lastName, email, password } = req.body;
  try {
    const user = new User({ firstName, lastName, email, password });
    await user.save();
    res.status(201).json(user);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

app.put('/users/:id', async (req, res) => {
  const { id } = req.params;
  const { firstName, lastName, email, password } = req.body;
  try {
    const updatedUser = await User.findByIdAndUpdate(id, { firstName, lastName, email, password }, { new: true });
    res.json(updatedUser);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

app.delete('/users/:id', async (req, res) => {
  const { id } = req.params;
  try {
    await User.findByIdAndDelete(id);
    res.json({ message: 'User deleted successfully' });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// Start Server
app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));

Frontend: React with Redux Toolkit

Install Frontend Dependencies

Run the following command in your React project:

Configure Redux Store

Create store.js to manage your application’s state:

Create User Slice

Handle CRUD operations and state management in userSlice.js:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

const API_URL = 'http://localhost:5000/users';

export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  const response = await axios.get(API_URL);
  return response.data;
});

export const addUser = createAsyncThunk('users/addUser', async (user) => {
  const response = await axios.post(API_URL, user);
  return response.data;
});

export const updateUser = createAsyncThunk('users/updateUser', async ({ id, user }) => {
  const response = await axios.put(`${API_URL}/${id}`, user);
  return response.data;
});

export const deleteUser = createAsyncThunk('users/deleteUser', async (id) => {
  await axios.delete(`${API_URL}/${id}`);
  return id;
});

const userSlice = createSlice({
  name: 'users',
  initialState: {
    users: [],
    status: 'idle',
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.users = action.payload;
        state.status = 'succeeded';
      })
      .addCase(addUser.fulfilled, (state, action) => {
        state.users.push(action.payload);
      })
      .addCase(updateUser.fulfilled, (state, action) => {
        const index = state.users.findIndex(user => user._id === action.payload._id);
        state.users[index] = action.payload;
      })
      .addCase(deleteUser.fulfilled, (state, action) => {
        state.users = state.users.filter(user => user._id !== action.payload);
      });
  },
});

export default userSlice.reducer;

1. File Structure

Here’s how your React components should be structured:

2. Add User Form

Create `AddUserForm.js`

This component will handle adding a new user.

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addUser } from '../userSlice';

const AddUserForm = () => {
  const dispatch = useDispatch();
  const [form, setForm] = useState({ firstName: '', lastName: '', email: '', password: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(addUser(form));
    setForm({ firstName: '', lastName: '', email: '', password: '' });
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Add User</h2>
      <input
        type="text"
        placeholder="First Name"
        value={form.firstName}
        onChange={(e) => setForm({ ...form, firstName: e.target.value })}
        required
      />
      <input
        type="text"
        placeholder="Last Name"
        value={form.lastName}
        onChange={(e) => setForm({ ...form, lastName: e.target.value })}
        required
      />
      <input
        type="email"
        placeholder="Email"
        value={form.email}
        onChange={(e) => setForm({ ...form, email: e.target.value })}
        required
      />
      <input
        type="password"
        placeholder="Password"
        value={form.password}
        onChange={(e) => setForm({ ...form, password: e.target.value })}
        required
      />
      <button type="submit">Add User</button>
    </form>
  );
};

export default AddUserForm;

3. Edit User Form

Create `EditUserForm.js`

This component will handle editing an existing user. It requires editingUser to be passed as a prop.

import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { updateUser } from '../userSlice';

const EditUserForm = ({ editingUser, onCancel }) => {
  const dispatch = useDispatch();
  const [form, setForm] = useState(editingUser);

  useEffect(() => {
    setForm(editingUser);
  }, [editingUser]);

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(updateUser({ id: editingUser._id, user: form }));
    onCancel(); // Reset the editing mode
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Edit User</h2>
      <input
        type="text"
        placeholder="First Name"
        value={form.firstName}
        onChange={(e) => setForm({ ...form, firstName: e.target.value })}
        required
      />
      <input
        type="text"
        placeholder="Last Name"
        value={form.lastName}
        onChange={(e) => setForm({ ...form, lastName: e.target.value })}
        required
      />
      <input
        type="email"
        placeholder="Email"
        value={form.email}
        onChange={(e) => setForm({ ...form, email: e.target.value })}
        required
      />
      <input
        type="password"
        placeholder="Password"
        value={form.password}
        onChange={(e) => setForm({ ...form, password: e.target.value })}
        required
      />
      <button type="submit">Save Changes</button>
      <button type="button" onClick={onCancel}>Cancel</button>
    </form>
  );
};

export default EditUserForm;

4. User List

Create `UserList.js`

This component will display the list of users and provide buttons to edit or delete users.

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { deleteUser } from '../userSlice';

const UserList = ({ onEdit }) => {
  const dispatch = useDispatch();
  const users = useSelector((state) => state.users.users);

  const handleDelete = (id) => {
    dispatch(deleteUser(id));
  };

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map((user) => (
          <li key={user._id}>
            {user.firstName} {user.lastName} - {user.email}
            <button onClick={() => onEdit(user)}>Edit</button>
            <button onClick={() => handleDelete(user._id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

5. Main Component

Update `App.js`

Integrate all components into App.js.

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { fetchUsers } from './userSlice';
import AddUserForm from './components/AddUserForm';
import EditUserForm from './components/EditUserForm';
import UserList from './components/UserList';

const App = () => {
  const dispatch = useDispatch();
  const [editingUser, setEditingUser] = useState(null);

  React.useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  const handleEdit = (user) => {
    setEditingUser(user);
  };

  const handleCancelEdit = () => {
    setEditingUser(null);
  };

  return (
    <div>
      <h1>User Management</h1>
      {!editingUser ? (
        <>
          <AddUserForm />
          <UserList onEdit={handleEdit} />
        </>
      ) : (
        <EditUserForm editingUser={editingUser} onCancel={handleCancelEdit} />
      )}
    </div>
  );
};

export default App;

How It Works

Add User Form: Handles creating a new user. After submission, the user is added to the database and Redux store.
Edit User Form: Displays an editable form for the selected user. Changes are saved to the database and Redux store.
User List: Shows all users with Edit and Delete buttons. The Edit button opens the EditUserForm, while Delete removes the user.

Benefits of This Approach

Modularity: Separate forms for adding and editing keep the code clean and reusable.
Scalability: Adding new features is simpler when each component has a focused responsibility.
Enhanced User Experience: Clear distinction between adding and editing improves usability.

Feel free to customize the forms and styles further to suit your requirements!

Our dedicated and industry-experienced trainers are here to teach you the core concepts of each subject. After mastering these fundamentals, you'll work on real-world projects to gain practical experience. We place special emphasis on these projects, ensuring that when you secure a placement, you'll be ready to seamlessly integrate and contribute to your new team.

About Us

Categories

100 React JS questions

Angular 20

Animations

ASP.NET

Block Pattern

Our Location

Building a Full-Stack CRUD Application with Node.js, Express, MongoDB, and Redux Toolkit

What You’ll Learn

Why These Technologies?

Backend: Building the REST API

Install Dependencies

Create `server.js` File

Frontend: React with Redux Toolkit

Install Frontend Dependencies

Configure Redux Store

Create User Slice

1. File Structure

src/
components/
AddUserForm.js
EditUserForm.js
UserList.js
App.js
userSlice.js
store.js

2. Add User Form

Create `AddUserForm.js`

3. Edit User Form

Create `EditUserForm.js`

4. User List

Create `UserList.js`

5. Main Component

Update `App.js`

How It Works

Benefits of This Approach

Leave a Reply Cancel reply

Our Courses

Recent Post

Flutter Main Main Axis vs Cross Axis in Flutter (Row & Column Explained with Examples)

Flutter Row and Column Widget Examples with Source Code

Corporate Office

About Us

Categories

100 React JS questions

Angular 20

Animations

ASP.NET

Block Pattern

Our Location

Social

Building a Full-Stack CRUD Application with Node.js, Express, MongoDB, and Redux Toolkit

What You’ll Learn

Why These Technologies?

Backend: Building the REST API

Install Dependencies

Create server.js File

Frontend: React with Redux Toolkit

Install Frontend Dependencies

Configure Redux Store

Create User Slice

1. File Structure

src/ components/ AddUserForm.js EditUserForm.js UserList.js App.js userSlice.js store.js

2. Add User Form

Create AddUserForm.js

3. Edit User Form

Create EditUserForm.js

4. User List

Create UserList.js

5. Main Component

Update App.js

How It Works

Benefits of This Approach

Leave a Reply Cancel reply

Related Post

Create `server.js` File

src/
components/
AddUserForm.js
EditUserForm.js
UserList.js
App.js
userSlice.js
store.js

Create `AddUserForm.js`

Create `EditUserForm.js`

Create `UserList.js`

Update `App.js`