React + Node.js + Express + PostgreSQL example: Build a CRUD App

In this tutorial, I will show you how to build full-stack React + Node.js + Express + PostgreSQL example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is a React.js client with React Router, Axios & Bootstrap.

Related Post: React JWT Authentication (without Redux) example

React + Node.js + Express + PostgreSQL example Overview

We will build a full-stack Tutorial Application in that:

  • Tutorial has id, title, description, published status.
  • User can create, retrieve, update, delete Tutorials.
  • There is a search box for finding Tutorials by title.

Here are screenshots of the example.

– Add a Tutorial:


– Show all objects:


– Click on Edit button to access an object:


On this Page, you can:

  • change status to Published/Pending using Publish/UnPublished button
  • remove the object from PostgreSQL Database using Delete button
  • update this object’s details on Database with Update button


– Search objects by field ‘title’:


– Check PostgreSQL database:

testdb=# select * from tutorials;
 id |               title                |          description          | published |         createdAt          |         updatedAt
  5 | PostgreSQL Tut#1                   | Tut#1 Description             | f         | 2020-03-11 09:14:01.773+07 | 2020-03-11 09:14:01.773+07
  6 | React.js Tut#2                     | Tut#2 Description             | f         | 2020-03-11 09:15:05.629+07 | 2020-03-11 09:15:05.629+07
  8 | React Hooks Tut#4                  | Tut#4 Description             | f         | 2020-03-11 09:24:33.295+07 | 2020-03-11 09:24:33.295+07
  9 | React Express PostgreSQL Tut#5     | Tut#5 Description             | f         | 2020-03-11 09:24:53.463+07 | 2020-03-11 09:24:53.463+07
  7 | Node. Express PostgreSQL (updated) | This is Description for Tut#3 | t         | 2020-03-11 09:22:53.635+07 | 2020-03-11 09:28:45.568+07
(5 rows)

React, Node.js Express, PostgreSQL Architecture

This is architecture of our system:


– Node.js Express exports REST APIs & interacts with PostgreSQL Database using Sequelize ORM.
– React Client sends HTTP Requests and retrieves HTTP Responses using Axios, consume data on the components. React Router is used for navigating to pages.

Node.js Express Back-end


These are APIs that Node.js Express App will export:

GETapi/tutorialsget all Tutorials
GETapi/tutorials/:idget Tutorial by id
POSTapi/tutorialsadd new Tutorial
PUTapi/tutorials/:idupdate Tutorial by id
DELETEapi/tutorials/:idremove Tutorial by id
DELETEapi/tutorialsremove all Tutorials
GETapi/tutorials?title=[kw]find all Tutorials which title contains 'kw'

Project Structure


db.config.js exports configuring parameters for PostgreSQL connection & Sequelize.
Express web server in server.js where we configure CORS, initialize & run Express REST APIs.
– Next, we add configuration for PostgreSQL database in models/index.js, create Sequelize data model in models/tutorial.model.js.
– Tutorial controller in controllers.
– Routes for handling all CRUD operations (including custom finder) in tutorial.routes.js.


You can find step by step to implement this Node.js Express App in the post:
Node.js Express & PostgreSQL: CRUD Rest APIs example with Sequelize

React.js Front-end



– The App component is a container with React Router. It has navbar that links to routes paths.

TutorialsList component gets and displays Tutorials.
Tutorial component has form for editing Tutorial’s details based on :id.
AddTutorial component has form for submission new Tutorial.

– These Components call TutorialDataService methods which use axios to make HTTP requests and receive responses.


  • React 16
  • react-router-dom 5.1.2
  • axios 0.19.2
  • bootstrap 4.4.1

Project Structure


package.json contains 4 main modules: react, react-router-dom, axios & bootstrap.
App is the container that has Router & navbar.
– There are 3 components: TutorialsList, Tutorial, AddTutorial.
http-common.js initializes axios with HTTP base Url and headers.
TutorialDataService has methods for sending HTTP requests to the Apis.
.env configures port for this React CRUD App.


You can find step by step to implement this React App in the post:
React.js CRUD example to consume Web API
– or React Hooks CRUD example to consume Web API


Today we have an overview of React.js + Node.js Express + PostgreSQL example when building a full-stack CRUD App.

We also take a look at client-server architecture for REST API using Express & Sequelize ORM, as well as React.js project structure for building a front-end app to make HTTP requests and consume responses.

Next tutorials show you more details about how to implement the system (including source code):
– Front-end:

With Pagination:
React Pagination with API using Material-UI


Or Serverless with Firebase:
React Firebase CRUD with Realtime Database
React Firestore CRUD App example | Firebase Cloud Firestore

Happy learning, see you again!

Further Reading

3 thoughts to “React + Node.js + Express + PostgreSQL example: Build a CRUD App”

  1. These tutorials are fantastic! I am curious though, how do we connect the frontend and the backend in one repo? Is it bad engineering practice to combine the two/have you made the front end and backend separate repos for a reason?

    1. I also have the same question! @bezkoder could you please advise on how to combine numerous projects(?) to create a fullstack app complete with User Login/Signup/Delete, UI, APIs, and Backend?

  2. To handle these types of applications, what skills you should have or a beginner and connoisseur of information technologies can have the use of these applications, thanks for your response, especially how you can be self-taught when learning about them.

Leave a Reply

Your email address will not be published. Required fields are marked *