React JS Spring Boot PostgreSQL Full-Stack Application

In this tutorial, we will create a full-stack application using Spring Boot 3 for the backend and React 18 for the frontend. We will use PostgreSQL as the database. The tutorial will cover setting up the project, creating the backend with Spring Boot, and building the frontend with React. We will also use Bootstrap for styling.
React JS Spring Boot PostgreSQL Full-Stack Application


Before we start, ensure you have the following:

  • Java Development Kit (JDK) installed
  • Apache Maven installed
  • Node.js and npm installed
  • PostgreSQL installed and running
  • An IDE (such as IntelliJ IDEA, Eclipse, or VS Code) installed

React JS Spring Boot PostgreSQL Full-Stack Application Architecture

|                       React Frontend App               |
| +--------------+  +----------------+  +------------+   |
| |       Router |  |    Components  |  |   Services |   |
| +--------------+  +----------------+  +------------+   |
|                                                        |
|                +-----------------------------+         |
|                |       Axios HTTP Library    |         |
|                +-----------------------------+         |
|               Spring Boot Backend App                 |
|              +-----------------------------+          |
|              |   Spring REST Controller    |          |
|              +-----------------------------+          |
|                |            |              |
|            +--------+  +--------+  +------------+     |
|            | Model  |  | Service|  | DAO (Repo) |     |
|            +--------+  +--------+  +------------+     |
            |       PostgreSQL Database   |


  1. React Frontend App:

    • Router: Manages routing and navigation within the application.
    • Components: Represents the UI elements of the application.
    • Services: Handles the business logic and data processing in the frontend.
    • Axios HTTP Library: A promise-based HTTP client for making requests to the backend.
  2. Spring Boot Backend App:

    • Spring REST Controller: Handles incoming HTTP requests and defines endpoints.
    • Model: Represents the data structure or entity.
    • Service: Contains the business logic.
    • DAO (Repository): Interacts with the database.
  3. PostgreSQL Database: Stores the application's data.

In this architecture, the React frontend app communicates with the Spring Boot backend app using Axios to make HTTP requests. The backend app processes these requests, interacts with the PostgreSQL database, and sends responses back to the frontend app.

Step 1: Setting Up the Spring Boot Project

1.1 Create a Spring Boot Project

  1. Open Spring Initializr:

  2. Configure Project Metadata:

    • Project: Maven Project
    • Language: Java
    • Spring Boot: Select the latest version of Spring Boot 3
    • Group: com.example
    • Artifact: spring-boot-react-postgresql
    • Name: spring-boot-react-postgresql
    • Description: Full Stack Application with Spring Boot and React using PostgreSQL
    • Package Name: com.example.springbootreactpostgresql
    • Packaging: Jar
    • Java Version: 17 (or your preferred version)
    • Click Next.
  3. Select Dependencies:

    • On the Dependencies screen, select the dependencies you need:
      • Spring Web
      • Spring Data JPA
      • PostgreSQL Driver
      • Spring Boot DevTools
    • Click Next.
  4. Generate the Project:

    • Click Generate to download the project zip file.
    • Extract the zip file to your desired location.
  5. Open the Project in Your IDE:

    • Open your IDE and import the project as a Maven project.

1.2 Update

Open the file located in the src/main/resources directory and add the following configuration:



Replace yourusername and yourpassword with your PostgreSQL username and password, and testdb with your database name.

1.3 Create the Product Entity

In the com.example.springbootreactpostgresql.model package, create a new Java class named Product:

package com.example.springbootreactpostgresql.model;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;

public class Product {

    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private double price;

    // Getters and Setters

1.4 Create the ProductRepository Interface

In the com.example.springbootreactpostgresql.repository package, create a new Java interface named ProductRepository:

package com.example.springbootreactpostgresql.repository;

import com.example.springbootreactpostgresql.model.Product;
import org.springframework.stereotype.Repository;

public interface ProductRepository extends JpaRepository<Product, Long> {

1.5 Create the ProductService Class

In the com.example.springbootreactpostgresql.service package, create a new Java class named ProductService:

package com.example.springbootreactpostgresql.service;

import com.example.springbootreactpostgresql.model.Product;
import com.example.springbootreactpostgresql.repository.ProductRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

public class ProductService {

    private final ProductRepository productRepository;

    public ProductService(ProductRepository productRepository) {
        this.productRepository = productRepository;

    public List<Product> getAllProducts() {
        return productRepository.findAll();

    public Product saveProduct(Product product) {

    public Product getProductById(Long id) {
        return productRepository.findById(id).orElse(null);

1.6 Create the ProductController Class

In the com.example.springbootreactpostgresql.controller package, create a new Java class named ProductController:

package com.example.springbootreactpostgresql.controller;

import com.example.springbootreactpostgresql.model.Product;
import com.example.springbootreactpostgresql.service.ProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

public class ProductController {

    private final ProductService productService;

    public ProductController(ProductService productService) {
        this.productService = productService;

    public List<Product> getAllProducts() {
        return productService.getAllProducts();

    public Product saveProduct(@RequestBody Product product) {
        return productService.saveProduct(product);

    public Product getProductById(@PathVariable Long id) {
        return productService.getProductById(id);

Step 2: Creating the Frontend with React

2.1 Set Up React Project

  1. Open a terminal and navigate to your workspace directory.

  2. Create a new React project using Create React App:

    npx create-react-app react-frontend
  3. Navigate to the project directory:

    cd react-frontend

2.2 Install Axios and Bootstrap

Install Axios to make HTTP requests and Bootstrap for styling:

npm install axios bootstrap

2.3 Create Components

Create the necessary components for displaying and managing products.

2.3.1 Create ProductService.js

Create a new file ProductService.js in the src directory to handle API requests for products:

import axios from 'axios';

const API_BASE_URL = "http://localhost:8080/products";

class ProductService {
    getAllProducts() {
        return axios.get(API_BASE_URL);

    getProductById(productId) {
        return axios.get(`${API_BASE_URL}/${productId}`);

    createProduct(product) {
        return, product);

export default new ProductService();

2.3.2 Create ProductListComponent.js

Create a new file ProductListComponent.js in the src/components directory:

import React, { useEffect, useState } from 'react';
import ProductService from '../ProductService';
import 'bootstrap/dist/css/bootstrap.min.css';

const ProductListComponent = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        ProductService.getAllProducts().then((response) => {
    }, []);

    return (
        <div className="container mt-5">
            <ul className="list-group">
                { => (
                    <li key={} className="list-group-item">
                        {} - ${product.price}

export default ProductListComponent;

2.3.3 Create AddProductComponent.js

Create a new file AddProductComponent.js in the src/components directory:

import React, { useState } from 'react';
import ProductService from '../ProductService';
import 'bootstrap/dist/css/bootstrap.min.css';

const AddProductComponent = () => {
    const [name, setName] = useState('');
    const [price, setPrice] = useState('');

    const handleSubmit = (e) => {
        const product = { name, price };
        ProductService.createProduct(product).then(response => {

    return (
        <div className="container mt-5">
            <h2>Add Product</h2>
            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label>Product Name</label>
                        onChange={(e) => setName(}
                <div className="form-group">
                    <label>Product Price</label>
                        onChange={(e) => setPrice(}
                <button type="submit" className="btn btn-primary mt-3">Add</button>

export default AddProductComponent;

2.3.4 Create App.js

Modify the App.js file to include routing for the components:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import ProductListComponent from

import AddProductComponent from './components/AddProductComponent';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
    return (
            <div className="container">
                    <Route path="/" element={<ProductListComponent />} />
                    <Route path="/add-product" element={<AddProductComponent />} />

export default App;

2.3.5 Update index.js

Ensure the index.js file is set up correctly:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
        <App />

Step 3: Running the Application

3.1 Run the Spring Boot Application

  1. Open the SpringBootReactPostgresqlApplication class in the src/main/java/com/example/springbootreactpostgresql directory.
  2. Click the green Run button in your IDE or use the terminal to run the application:
    ./mvnw spring-boot:run

3.2 Run the React Application

  1. Open a terminal and navigate to the react-frontend directory.

  2. Start the React application:

    npm start
  3. Open your web browser and navigate to http://localhost:3000.

You can now use the application to add and view products using the React frontend and Spring Boot backend with PostgreSQL.


In this tutorial, we created a full-stack application using Spring Boot for the backend and React for the frontend. We used PostgreSQL as the database to store product data. This setup provides a solid foundation for developing more complex full-stack applications.