Hey Learners, In this post we will learn Spring Boot React Crud full tutorials with video. This tutorials will be helpful for you Crud Operation Using Spring boot and React full stack Mini Project.
Guys first watch this video after used this code you will be easily understand. In this tutorials i used backend spring boot for rest API Develop and frontend React library .
Spring Boot React Crud Example Technologies
Backend : Spring Boot ,Rest Api
Frontend – React (React Hook, React Router 6.0 )
Tools : STS, Vscode
Database: Mysql
Server : Apache Tomcat Server
Spring Boot React Mini Project Example Video
Spring boot React Crud Example Source Code
Product Management System Backend Source Code

ProductManagementBackendApplication.java
package com.becoder;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class ProductManagementBackendApplication {
public static void main(String[] args) {
SpringApplication.run(ProductManagementBackendApplication.class, args);
}
}
ProductController.java
package com.becoder.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import com.becoder.model.Product;
import com.becoder.service.ProductService;
@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class ProductController {
@Autowired
private ProductService productService;
@PostMapping("/saveProduct")
public ResponseEntity<?> saveProduct(@RequestBody Product product) {
return new ResponseEntity<>(productService.saveProduct(product), HttpStatus.CREATED);
}
@GetMapping("/")
public ResponseEntity<?> getAllProduct() {
return new ResponseEntity<>(productService.getAllProduct(), HttpStatus.OK);
}
@GetMapping("/{id}")
public ResponseEntity<?> getProductById(@PathVariable Integer id) {
return new ResponseEntity<>(productService.getProductById(id), HttpStatus.OK);
}
@GetMapping("/deleteProduct/{id}")
public ResponseEntity<?> deleteProduct(@PathVariable Integer id) {
return new ResponseEntity<>(productService.deleteProduct(id), HttpStatus.OK);
}
@PostMapping("/editProduct/{id}")
public ResponseEntity<?> editProduct(@RequestBody Product product, @PathVariable Integer id) {
return new ResponseEntity<>(productService.editProduct(product, id), HttpStatus.CREATED);
}
}
Product.java
package com.becoder.model;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class Product {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String productName;
private String description;
private Double price;
private String status;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getProductName() {
return productName;
}
public void setProductName(String productName) {
this.productName = productName;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public Double getPrice() {
return price;
}
public void setPrice(Double price) {
this.price = price;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
}
ProductRepository.java
package com.becoder.repository;
import org.springframework.data.jpa.repository.JpaRepository;
import com.becoder.model.Product;
public interface ProductRepository extends JpaRepository<Product, Integer> {
}
ProductService.java
package com.becoder.service;
import java.util.List;
import com.becoder.model.Product;
public interface ProductService {
public Product saveProduct(Product product);
public List<Product> getAllProduct();
public Product getProductById(Integer id);
public String deleteProduct(Integer id);
public Product editProduct(Product product,Integer id);
}
ProductServiceImpl.java
package com.becoder.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.becoder.model.Product;
import com.becoder.repository.ProductRepository;
@Service
public class ProductServiceImpl implements ProductService {
@Autowired
private ProductRepository productRepo;
@Override
public Product saveProduct(Product product) {
return productRepo.save(product);
}
@Override
public List<Product> getAllProduct() {
return productRepo.findAll();
}
@Override
public Product getProductById(Integer id) {
return productRepo.findById(id).get();
}
@Override
public String deleteProduct(Integer id) {
Product product = productRepo.findById(id).get();
if (product != null) {
productRepo.delete(product);
return "Product Delete Sucessfully";
}
return "Something wrong on server";
}
@Override
public Product editProduct(Product p, Integer id) {
Product oldProduct = productRepo.findById(id).get();
oldProduct.setProductName(p.getProductName());
oldProduct.setDescription(p.getDescription());
oldProduct.setPrice(p.getPrice());
oldProduct.setStatus(p.getStatus());
return productRepo.save(oldProduct);
}
}
application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/product_db
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=password
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect
spring.jpa.hibernate.ddl-auto=update
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.5</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.becoder</groupId>
<artifactId>Product_Management_Backend</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>Product_Management_Backend</name>
<description>Product_Management_Backend</description>
<properties>
<java.version>11</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
Product Management System Frontend Source Code

AddProduct.jsx
import React, { useState } from "react";
import productService from "../service/product.service";
const AddProduct = () => {
const [product, setProduct] = useState({
productName: "",
description: "",
price: "",
status: "",
});
const [msg, setMsg] = useState("");
const handleChange = (e) => {
const value = e.target.value;
setProduct({ ...product, [e.target.name]: value });
};
const ProductRegsiter = (e) => {
e.preventDefault();
productService
.saveProduct(product)
.then((res) => {
console.log("Product Added Sucessfully");
setMsg("Product Added Sucessfully");
setProduct({
productName: "",
description: "",
price: "",
status: "",
});
})
.catch((error) => {
console.log(error);
});
};
return (
<>
<div className="container mt-3">
<div className="row">
<div className="col-md-6 offset-md-3">
<div className="card">
<div className="card-header fs-3 text-center">Add Product</div>
{msg && <p className="fs-4 text-center text-success">{msg}</p>}
<div className="card-body">
<form onSubmit={(e) => ProductRegsiter(e)}>
<div className="mb-3">
<label>Enter Product Name</label>
<input
type="text"
name="productName"
className="form-control"
onChange={(e) => handleChange(e)}
value={product.productName}
/>
</div>
<div className="mb-3">
<label>Enter Description</label>
<input
type="text"
name="description"
className="form-control"
onChange={(e) => handleChange(e)}
value={product.description}
/>
</div>
<div className="mb-3">
<label>Enter Price</label>
<input
type="text"
name="price"
className="form-control"
onChange={(e) => handleChange(e)}
value={product.price}
/>
</div>
<div className="mb-3">
<label>Enter Status</label>
<input
type="text"
name="status"
className="form-control"
onChange={(e) => handleChange(e)}
value={product.status}
/>
</div>
<button className="btn btn-primary col-md-12">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default AddProduct;
EditProduct.jsx
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import productService from "../service/product.service";
const EditProduct = () => {
const [product, setProduct] = useState({
id: "",
productName: "",
description: "",
price: "",
status: "",
});
const navigate = useNavigate();
const { id } = useParams();
console.log(id);
const [msg, setMsg] = useState("");
useEffect(() => {
productService
.getProductById(id)
.then((res) => {
setProduct(res.data);
})
.catch((error) => {
console.log(error);
});
}, []);
const handleChange = (e) => {
const value = e.target.value;
setProduct({ ...product, [e.target.name]: value });
};
const ProductUpdate = (e) => {
e.preventDefault();
productService
.editProduct(product)
.then((res) => {
navigate("/");
})
.catch((error) => {
console.log(error);
});
};
return (
<>
<div className="container mt-3">
<div className="row">
<div className="col-md-6 offset-md-3">
<div className="card">
<div className="card-header fs-3 text-center">Edit Product</div>
{msg && <p className="fs-4 text-center text-success">{msg}</p>}
<div className="card-body">
<form onSubmit={(e) => ProductUpdate(e)}>
<div className="mb-3">
<label>Enter Product Name</label>
<input
type="text"
name="productName"
className="form-control"
onChange={(e) => handleChange(e)}
value={product.productName}
/>
</div>
<div className="mb-3">
<label>Enter Description</label>
<input
type="text"
name="description"
className="form-control"
onChange={(e) => handleChange(e)}
value={product.description}
/>
</div>
<div className="mb-3">
<label>Enter Price</label>
<input
type="text"
name="price"
className="form-control"
onChange={(e) => handleChange(e)}
value={product.price}
/>
</div>
<div className="mb-3">
<label>Enter Status</label>
<input
type="text"
name="status"
className="form-control"
onChange={(e) => handleChange(e)}
value={product.status}
/>
</div>
<button className="btn btn-primary col-md-12">Update</button>
</form>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default EditProduct;
Home.jsx
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import productService from "../service/product.service";
const Home = () => {
const [productList, setProductList] = useState([]);
const [msg, setMsg] = useState("");
useEffect(() => {
init();
}, []);
const init = () => {
productService
.getAllProduct()
.then((res) => {
setProductList(res.data);
})
.catch((error) => {
console.log(error);
});
};
const deleteProduct = (id) => {
productService
.deleteProduct(id)
.then((res) => {
setMsg("Delete Sucessfully");
init();
})
.catch((error) => {
console.log(error);
});
};
return (
<>
<div className="container mt-3">
<div className="row">
<div className="col-md-12">
<div className="card">
<div className="card-header fs-3 text-center">
All Product List
{msg && <p className="fs-4 text-center text-success">{msg}</p>}
</div>
<div className="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Sl No</th>
<th scope="col">Product Name</th>
<th scope="col">Description</th>
<th scope="col">Price</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{productList.map((p, num) => (
<tr>
<td>{num + 1}</td>
<td>{p.productName}</td>
<td>{p.description}</td>
<td>{p.price}</td>
<td>{p.status}</td>
<td>
<Link to={'editProduct/'+p.id} className="btn btn-sm btn-primary">
Edit
</Link>
<button
onClick={() => deleteProduct(p.id)}
className="btn btn-sm btn-danger ms-1"
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default Home;
Navbar.js
import React from 'react'
import { Link } from 'react-router-dom'
const Navbar = () => {
return (
<>
<nav className="navbar navbar-expand-lg navbar-dark bg-success">
<div className="container-fluid">
<a className="navbar-brand" href="#">Product Managment System</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link to="/" className="nav-link active" aria-current="page" href="#">Home</Link>
</li>
<li className="nav-item">
<Link to="addProduct" className="nav-link active" aria-current="page" href="#">Add Product</Link>
</li>
</ul>
</div>
</div>
</nav>
</>
)
}
export default Navbar;
product.service.js
import axios from "axios";
const API_URL = "http://localhost:8080";
class ProductService {
saveProduct(product) {
return axios.post(API_URL + "/saveProduct", product);
}
getAllProduct() {
return axios.get(API_URL + "/");
}
getProductById(id) {
return axios.get(API_URL + "/" + id);
}
deleteProduct(id) {
return axios.get(API_URL + "/deleteProduct/" + id);
}
editProduct(product) {
return axios.post(API_URL + "/editProduct/" + product.id, product);
}
}
export default new ProductService;
App.js
import { Route, Routes } from 'react-router-dom';
import './App.css';
import Navbar from './component/Navbar';
import Home from './component/Home';
import AddProduct from './component/AddProduct';
import EditProduct from './component/EditProduct';
function App() {
return (
<>
<Navbar />
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path='/addProduct' element={<AddProduct />}></Route>
<Route path='/editProduct/:id' element={<EditProduct />}></Route>
</Routes>
</>
);
}
export default App;
package.json
{
"name": "product_ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Conslusion
Guys in this post we learnt Java Spring boot & React mini project .Spring boot react Product management system mini project. I hope you like this java mini project tutorials .Share with your friends . Thank you.