Home Reactjs Spring boot with React MongoDB Full Stack

Spring boot with React MongoDB Full Stack

11 min read

This  tutorial will teach you how to do the full stack development application using Spring boot with React and mongoDB you how to do basic database functions that are CREATE RETIEVE, UPDATE and DELETE  using mongoDB Database.

Crud function how to perform the RESTful Web Service let discuss with following annotations.

@PostMapping:  annotation which used to create new record.
@GetMapping:   annotation which used to reads a record.
@RequestMapping: annotation which used to search the record.
@PutMapping:   annotation which used to update the existing record.
@DeleteMapping:  annotation which used to delete the record.

First Create the Controller


package com.example.SpringMongoProject.Controller;

import com.example.SpringMongoProject.Entity.Student;
import com.example.SpringMongoProject.Service.StudentServices;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@CrossOrigin(origins = "*")
public class StudentController {

    private StudentServices studentServices;

    @PostMapping(value = "/save")
    private String saveStudent(@RequestBody Student students) {

        return students.get_id();
    @GetMapping(value = "/getall")
    public Iterable<Student> getStudents() {
        return studentServices.listAll();

    @PutMapping(value = "/edit/{id}")
    private Student update(@RequestBody Student student, @PathVariable(name = "id") String _id) {
        return student;

    private void deleteStudent(@PathVariable("id") String _id) {

    private Student getStudents(@PathVariable(name = "id") String studentid) {
        return studentServices.getStudentByID(studentid);


Create the Entity


package com.example.SpringMongoProject.Entity;

import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;

@Document(collection ="students")
public class Student {

    private String _id;
    private String studentname;
    private String studentaddress;
    private String mobile;

    public Student(String _id, String studentname, String studentaddress, String mobile) {
        this._id = _id;
        this.studentname = studentname;
        this.studentaddress = studentaddress;
        this.mobile = mobile;

    public Student() {

    public String get_id() {
        return _id;

    public void set_id(String _id) {
        this._id = _id;

    public String getStudentname() {
        return studentname;

    public void setStudentname(String studentname) {
        this.studentname = studentname;

    public String getStudentaddress() {
        return studentaddress;

    public void setStudentaddress(String studentaddress) {
        this.studentaddress = studentaddress;

    public String getMobile() {
        return mobile;

    public void setMobile(String mobile) {
        this.mobile = mobile;

    public String toString() {
        return "Student{" +
                "_id='" + _id + '\'' +
                ", studentname='" + studentname + '\'' +
                ", studentaddress='" + studentaddress + '\'' +
                ", mobile='" + mobile + '\'' +

Create repository


package com.example.SpringMongoProject.Repo;

import com.example.SpringMongoProject.Entity.Student;
import org.springframework.data.mongodb.repository.MongoRepository;
import org.springframework.stereotype.Repository;

public interface StudentRepo extends MongoRepository<Student,String> {

Create Service


package com.example.SpringMongoProject.Service;

import com.example.SpringMongoProject.Entity.Student;
import com.example.SpringMongoProject.Repo.StudentRepo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

public class StudentServices {

    private StudentRepo repo;

    public void saveorUpdate(Student students) {


    public Iterable<Student> listAll() {

        return this.repo.findAll();

    public void deleteStudent(String id) {


    public Student getStudentByID(String studentid) {

        return repo.findById(studentid).get();


Installing React

npx create-react-app front-end
Load More Related Articles
Load More By admin
Load More In Reactjs

Leave a Reply

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

Check Also

Laravel 11 CRUD Application

In this tutorial will teach Laravel 11 CRUD Application step by step. Laravel  11 CRUD App…