React.js + Node.js + MongoDB CRUD example - MERN stack Application
Tags: react, node, mongodb, webdev
Published: 2021-01-02 12:09:30

In this tutorial, we're gonna build a MERN stack: React.js + Node.js + MongoDB CRUD Application with Express example. The back-end server uses Node.js + Express for REST APIs, front-end side is a React client with React Router, Axios & Bootstrap.

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

<h2>React.js + Node.js + MongoDB CRUD example Overview</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>

\- Add an item:

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

\- Show all items:

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

– Click on <strong>Edit</strong> button to view details of an item:

![react-node-js-mongodb-example-crud-mern-stack--retrieve](https://dev-to-uploads.s3.amazonaws.com/i/027idmd313soswyrrxqf.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 MongoDB 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-mongodb-example-crud-mern-stack-update](https://dev-to-uploads.s3.amazonaws.com/i/z9ftt59979dnm83sjbk9.png)

\- Search items by field 'title':

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

- Check MongoDB Database:

![react-node-js-mongodb-example-crud-mern-stack-database](https://dev-to-uploads.s3.amazonaws.com/i/wzw3liu1bl0knc1tapgi.png)

<h2>MERN stack Architecture</h2>
Our React.js + Node.js + MongoDB CRUD application will follow this architecture:

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

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

<h2>Video</h2>
This is brief instruction on React Node.js Express application running with MongoDB database.

{% youtube 3um2lqj7FqM %}

<h2>Node.js Express MongoDB 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-mongodb-example-crud-mern-stack-client-overview](https://dev-to-uploads.s3.amazonaws.com/i/zvocsrzwif9acscsh9tu.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-mongodb-mern-stack/](https://bezkoder.com/react-node-express-mongodb-mern-stack/)

## 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>
- <a href="https://bezkoder.com/node-js-mongodb-pagination/">Server side Pagination in Node.js, MongoDB | Mongoose Paginate v2</a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zxnd1ekc9kt6q9clpar8.png)

Security: <a href="https://bezkoder.com/react-node-mongodb-auth/">MERN stack Authentication & Authorization</a>

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>

Dockerize: [Docker Compose React + Node.js Express + MongoDB example](https://www.bezkoder.com/docker-mern/)