spring-boot-react-mongodb-crud-example-feature-image

Spring Boot, React & MongoDB example: Build a CRUD Application

In this tutorial, we will learn how to build a full stack CRUD App example using Spring Boot, React and MongoDB. The back-end server uses Spring Boot with Spring Web MVC for REST APIs and Spring Data MongoDB. The front-end side will be made with React, React Router, Axios & Bootstrap.

Related Post:
Spring Boot + React: Login example with JWT Authentication & Spring Security
React Upload/Download Files to/from Spring Boot Rest Apis


Spring Boot, React, MongoDB example Overview

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

  • Each Tutorial has id, title, description, published status.
  • We can create, retrieve, update, delete Tutorials.
  • We can also find Tutorials by title.

– Create a Tutorial:

spring-boot-react-mongodb-crud-example-demo-create

– Retrieve all items:

spring-boot-react-mongodb-crud-example-demo-retrieve

– Click on Edit button to view a Tutorial:

spring-boot-react-mongodb-crud-example-demo-retrieve-one

On this Page, you can:

  • change status to Published using Publish button
  • remove the Tutorial from Database using Delete button
  • update the Tutorial details on Database with Update button

spring-boot-react-mongodb-crud-example-demo-update

– Search Tutorials by title:

spring-boot-react-mongodb-crud-example-demo-search

– Check MongoDB Database for all items:

spring-boot-react-mongodb-crud-example-demo-database

Spring Boot, React and MongoDB Architecture

We’re gonna build the system with following architecture:

spring-boot-react-mongodb-crud-example-architecture

– Spring Boot exports REST Apis using Spring Web MVC & interacts with MongoDB Database using Spring Data MongoDB
– React Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use React Router for navigating to pages.

Spring Boot Back-end

Overview

These are APIs that Spring Boot App will export:

MethodsUrlsActions
POST/api/tutorialscreate new Tutorial
GET/api/tutorialsretrieve all Tutorials
GET/api/tutorials/:idretrieve a Tutorial by :id
PUT/api/tutorials/:idupdate a Tutorial by :id
DELETE/api/tutorials/:iddelete a Tutorial by :id
DELETE/api/tutorialsdelete all Tutorials
GET/api/tutorials?title=[keyword]find all Tutorials which title contains keyword

We make CRUD operations & finder methods with Spring Data MongoDB’s MongoRepository.

Technology

  • Java 8
  • Spring Boot 2 (with Spring Web MVC, Spring Data MongoDB)
  • MongoDB
  • Maven 3.6.1

Project Structure

spring-boot-react-mongodb-example-server-project-structure

  • Tutorial data model class corresponds to entity and table tutorials.
  • TutorialRepository is an interface that extends MongoRepository for CRUD methods and custom finder methods. It will be autowired in TutorialController.
  • TutorialController is a RestController which has request mapping methods for RESTful requests such as: getAllTutorials, createTutorial, updateTutorial, deleteTutorial, findByPublished
  • Configuration for Spring Data MongoDB is in application.properties.
  • pom.xml contains dependencies for Spring Boot Web MVC and Spring Data MongoDB.

Implementation

You can find step by step to implement this Spring Boot Server Application in the post:
Spring Boot with MongoDB CRUD example using Spring Data

React.js Front-end

Overview

spring-boot-react-crud-example-react-components-diagram

– 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

spring-boot-react-crud-example-react-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

Further Reading

Conclusion

Now we have an overview of our Spring Boot React MongoDB CRUD example.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data MongoDB, as well as React 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!

2 thoughts to “Spring Boot, React & MongoDB example: Build a CRUD Application”

Leave a Reply

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