react-node-express-mongodb-mern-stack-feature-image

React.js + Node.js + Express + MongoDB example: MERN stack CRUD App

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

Related Post: React JWT Authentication (without Redux) example


React.js + Node.js + Express + MongoDB 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.

– Add an item:

react-node-express-mongodb-mern-stack-example-create

– Show all items:

react-node-express-mongodb-mern-stack-example-retrieve

– Click on Edit button to view details of an item:

react-node-express-mongodb-mern-stack-example-retrieve-one

On this Page, you can:

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

react-node-express-mongodb-mern-stack-example-update

– Search items by field ‘title’:

react-node-express-mongodb-mern-stack-example-search

– Check MongoDB Database:

react-node-express-mongodb-mern-stack-example-database

MERN stack Architecture

Our React.js + Node.js + Express + MongoDB application will follow this architecture:

react-node-express-mongodb-mern-stack-example-architecture

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

Video

This is brief instruction on React Node.js Express application running with MongoDB database.

Node.js Express MongoDB Back-end

Overview

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

MethodsUrlsActions
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

react-node-express-mongodb-mern-stack-example-server-project-structure

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

Implementation

You can find step by step to implement this Node.js Express App in the post:
Node.js, Express & MongoDb: Build a CRUD Rest Api example

React.js Front-end

Overview

react-node-express-mongodb-mern-stack-example-react-components-overview

– 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.

Technology

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

Project Structure

react-node-express-mongodb-mern-stack-example-client-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.

Implementation

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

Conclusion

Today we have an overview of MERN stack example (React.js + Node.js Express + MongoDB) when building CRUD Application.

We also take a look at client-server architecture for REST API using Express & Mongoose ODM, 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):
Back-end
– Front-end:

Happy learning, see you again!

Further Reading

4 thoughts to “React.js + Node.js + Express + MongoDB example: MERN stack CRUD App”

  1. Hi,

    your tutorial is really helpful ! I am wondering if it is possible to combine this with the login application ? If yes, how I should do it ?

    Thank you in advance for your time.

Leave a Reply

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