How To Build a Basic CRUD App With Node and React ?

In this article, we will explore how to build a simple CRUD (Create, Read, Update, Delete) application using Node.js for the backend and React for the frontend. Additionally, we will integrate MongoDB as the database to store our data.

Preview of final output:

App functionality

• Create a new student (CREATE)
• Update an existing student (UPDATE)
• Show all students list (READ)
• Delete a student (DELETE)

Prerequisites

• Node.js and npm: You need Node.js installed. You can check if you have it installed by running node -v and npm -v in the terminal.
• MongoDB: A MongoDB instance is required for the backend. You can either use a local MongoDB instance or use MongoDB Atlas (a cloud database service).
• React: You’ll need basic knowledge of React and how to set up React applications.

REST API in this project

Building a basic CRUD app with Node and React is a perfect way to learn full-stack development.

Now, first of all, we will work on the frontend part of our application using React.js.

Steps to Create React Application and Installing modules

Step 1: Initialize React App for Front End

Let’s start building the Front-end part with React. To create a new React App, enter the following code into terminal and hit enter. 

npx create-react-app mern-stack-crud

Step 2: Switch to Project Directory

Move into the React project folder.

cd mern-stack-crud

Step 3: Run The Frontend

To run the React App, run the following command:

npm start

This command opens the React App to the browser on the following URL:

Step 4:  Install Required Modules

To build the React App we need to install some external modules. 

To install, run the following code on the terminal. 

npm install react-bootstrap bootstrap react-router-dom axios formik yup

Step 5: Creating Simple React Components

In this step we will create some React Components to manage student data.

Head over to src folder, make a folder and name it Components and within that directory create the following components.

• StudentForm.js - Reusable Student form
• create-student.component.js - Responsible for create new student 
• edit-student.component.js - Responsible for update student data
• student-list.component.js - Responsible for display all student
• StudentTableRow.js  - Responsible for display a single student 

Frontend Project Structure:

Dependencies

 "dependencies": { 
 "@testing-library/dom": "^10.4.0", 
 "@testing-library/jest-dom": "^6.6.3", 
 "@testing-library/react": "^16.3.0", 
 "@testing-library/user-event": "^13.5.0", 
 "axios": "^1.2.1", 
 "bootstrap": "^5.2.0", 
 "formik": "^2.2.9", 
 "react": "^19.1.0", 
 "react-bootstrap": "^2.7.0", 
 "react-dom": "^19.1.0", 
 "react-router-dom": "^6.6.1", 
 "react-scripts": "5.0.1", 
 "web-vitals": "^2.1.4", 
 "yup": "^0.32.11" 
 },

Approach

For the Frontend of this Student database App

• We will build a reusable student form with Formik and React-Bootstrap. This form has all the necessary fields to enter student details. We have also made client-side form validation with Yup. In the future, we will use this component for creating and update a student. Go to src/Components/StudentForm.js.
• We will create a component to add a new student.  We have already created a StudentForm component to enter student details. Now, it's time to use this component. Go to src/Components/create-student.component.js.
• We will create a component to update details. We have reusable StudentForm component, let's use it again. We will fetch student details to reinitialise form. Go to src/Components/edit-student.component.js.
• We will build a component to display the student details in a table.  We will fetch student's data and iterate over it to create table row for every student. Go to src/Components/student-list.component.js.
• We will return table row which is responsible to display student data. Go to src/Components/StudentTableRow.js.
• Finally, include the menu to make routing in our MERN Stack CRUD app. Go to src/App.js and write the following code.

Example: This example creates frontend for Student database app including a student form and table to display data.

Now, we have successfully created the frontend for our mern-stack-app. Let's build the backend part. Before, jumping to next section take a look how the frontend part working without backend.

Step to Run the application: Open the terminal and type the following command.

npm start

Output

Steps to Setup the Backend

Step 1: Create Backend Directory

Run command to create backend folder for server and get inside of it.

mkdir backend
cd backend

Step 2: Initialize Backend Project

Create package.json - Next, we need to create a separate package.json file for managing the server of our mern-stack-crud  app.

npm init -y

Step 3: Install Node Dependencies

Install the following Node dependencies. 

To install the above dependencies, run the following code on the terminal. 

npm install express cors mongoose dotenv
npm install --save-dev nodemon

Backend Project Structure:

Dependencies

"dependencies": { 
 "express": "^4.18.2", 
 "mongoose": "^7.2.2", 
 "cors": "^2.8.5", 
 "dotenv": "^10.0.0" 
 }, 
 "devDependencies": { 
 "nodemon": "^2.0.22" 
 }

Approach

For backend of Student database app

• We will set up a MongoDB database for our app. Before, starting make sure you have latest version of MongoDB is installed on your system. Create folder inside the backend  folder and name it database. Create a file by the name of db.js inside the database folder. Go to  backend/database/db.js. We have declared the MongoDB database and name it reactdb. 
• Now, create MongoDB schema for interacting with MongoDB database. Create a folder called models inside backend folder to keep schema related files and create a file Student.js inside of it to define MongoDB schema. Go to  backend/models/Student.js.
• We are set up some routes (REST APIs) for CREATE, READ, UPDATE and DELETE using Express and Node.js. These routes will help us to manage the data in our mern-stack-crud app.
• We have almost created everything for our mern-stack-crud app. Now, create the server.js file in the root of the backend folder. Go to backend/server.js and write the following code.

Example: This example uses mongo and node, express to setup the backend.

Now, we have successfully created the backend for our mern-stack-app.  

Open a terminal and run the following command to start the Nodemon server by staying in the backend folder.

nodemon server.js

Output:

Summary

This article creates a Student database application using MERN (Mongo, Express, React, Node) to show the Basic CRUD Operations in a MERN App. It uses the api endpoints for HTTP requests like GET, POST, PUT, DELETE to create, read, update and detele the student data in the mongo database.