React + Node.js + PostgreSQL: CRUD example
Tags: react, node, postgres, webdev
Published: 2021-01-04 09:33:07

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

Full Article: [https://bezkoder.com/react-node-express-postgresql/](https://bezkoder.com/react-node-express-postgresql/)

<h2>React + Node.js + PostgreSQL CRUD example</h2>
We will build a full-stack Tutorial Application in that:
<ul>
	<li>Tutorial has id, title, description, published status.</li>
	<li>User can create, retrieve, update, delete Tutorials.</li>
	<li>There is a search box for finding Tutorials by title.</li>
</ul>

Here are screenshots of the example.

- Add a Tutorial:

![react-node-js-postgresql-crud-example-create](https://dev-to-uploads.s3.amazonaws.com/i/rw3bnxmith6b1cfy9s62.png)

– Show all objects:

![react-node-js-postgresql-crud-example-retrieve-all](https://dev-to-uploads.s3.amazonaws.com/i/ed6stbekrnhasbxccuan.png)

– Click on <strong>Edit</strong> button to access an object:

![react-node-js-postgresql-crud-example-retrieve-one](https://dev-to-uploads.s3.amazonaws.com/i/wriw2hxpvos2a5qsmj4f.png)

On this Page, you can:
<ul>
	<li>change status to <strong>Published</strong>/<strong>Pending</strong> using <strong>Publish</strong>/<strong>UnPublished</strong> button</li>
	<li>remove the object from PostgreSQL Database using <strong>Delete</strong> button</li>
	<li>update this object's details on Database with <strong>Update</strong> button</li>
</ul>

![react-node-js-postgresql-crud-example-update](https://dev-to-uploads.s3.amazonaws.com/i/pxp6bb7j9mlgq6tiqien.png)

- Search objects by field 'title':

![react-node-js-postgresql-crud-example-search](https://dev-to-uploads.s3.amazonaws.com/i/mszj3o843wfeky8derbz.png)

- Check PostgreSQL database:

<pre><code class="language-bash">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)
</code></pre>

<h2>React, Node.js, PostgreSQL CRUD Architecture</h2>
This is architecture of our system:

![react-node-js-postgresql-crud-example-architecture](https://dev-to-uploads.s3.amazonaws.com/i/kell5z2ncx3pg3jq3o71.png)

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

<h2>Video</h2>
This is our React Node.js PostgreSQL CRUD application with Express & Sequelize demo:

{% youtube qrVu03v87uQ %}

<h2>Node.js Express Back-end</h2>

These are APIs that Node.js Express App will export:
<div class="table-responsive">
<table class="table table-hover  table table-hover" width="100%">
<thead>
<tr>
<th>Methods</th>
<th>Urls</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>GET</td>
<td>api/tutorials</td>
<td>get all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>api/tutorials/:id</td>
<td>get Tutorial by <code>id</code></td>
</tr>
<tr>
<td>POST</td>
<td>api/tutorials</td>
<td>add new Tutorial</td>
</tr>
<tr>
<td>PUT</td>
<td>api/tutorials/:id</td>
<td>update Tutorial by <code>id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>api/tutorials/:id</td>
<td>remove Tutorial by <code>id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>api/tutorials</td>
<td>remove all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>api/tutorials?title=[kw]</td>
<td>find all Tutorials which title contains <code>'kw'</code></td>
</tr>
</tbody>
</table>
</div>

<h2>React.js Front-end</h2>

![react-node-js-postgresql-crud-example-client-components](https://dev-to-uploads.s3.amazonaws.com/i/nm5sv4lxlg0j6h04mi0f.png)

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

– <code>TutorialsList</code> component gets and displays Tutorials.
– <code>Tutorial</code> component has form for editing Tutorial's details based on <code>:id</code>.
– <code>AddTutorial</code> component has form for submission new Tutorial.

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

For more details, implementation and Github, please visit:
[https://bezkoder.com/react-node-express-postgresql/](https://bezkoder.com/react-node-express-postgresql/)

## Further Reading
Run both projects in one place:
<a href="https://bezkoder.com/integrate-react-express-same-server-port/">How to Integrate React with Node.js Express on same Server/Port</a>

With Pagination:
<a href="https://bezkoder.com/react-pagination-material-ui/">React Pagination with API using Material-UI</a>

![react-node-js-postgresql-crud-example-pagination-client](https://dev-to-uploads.s3.amazonaws.com/i/6qtkz5jgtgf2ycfbh8h3.png)

Or Serverless with Firebase:
- <a href="https://bezkoder.com/react-firebase-crud/">React Firebase CRUD with Realtime Database</a>
- <a href="https://bezkoder.com/react-firestore-crud/">React Firestore CRUD App example | Firebase Cloud Firestore</a>

Happy learning, see you again!