Building full-stack applications is a must-have skill in today's web development world. Whether preparing for a job, freelancing, or creating your startup, combining a powerful backend like Spring Boot with a modern frontend like React gives you everything you need to ship production-ready apps.

In this step-by-step guide, I’ll show you how to build a simple but complete CRUD (Create, Read, Update, Delete) application using Spring Boot (with MongoDB) as the backend and React for the frontend.

Let’s dive in!

🛠️ Tech Stack

• Backend: Java, Spring Boot, Spring Data MongoDB, REST API

• Frontend: React (JSX), Axios, Tailwind CSS

• Database: MongoDB (NoSQL)

• Tools: Postman, VS Code, IntelliJ IDEA

📦 Project Overview

We’ll build a simple “Plant Manager” app where users can:

• Add new plants

• View a list of plants

• Edit plant details

• Delete plants

This is ideal for beginners looking to master full-stack concepts and RESTful architecture.

🔧 Step 1: Set Up the Spring Boot Backend

1.1 Create a Spring Boot Project

Use Spring Initializr and select:

• Project: Maven

• Language: Java

• Dependencies: Spring Web, Spring Data MongoDB, Lombok, Spring Boot DevTools

1.2 Create the Plant Model

@Document(collection = "plants")
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Plant {
    @Id
    private String id;
    private String name;
    private String category;
    private String description;
}

1.3 Create the Repository

public interface PlantRepository extends MongoRepository<Plant, String> {
}

1.4 Create the Controller

@RestController
@RequestMapping("/api/plants")
public class PlantController {

    @Autowired
    private PlantRepository plantRepo;    @GetMapping
    public List<Plant> getAll() {
        return plantRepo.findAll();
    }    @PostMapping
    public Plant create(@RequestBody Plant plant) {
        return plantRepo.save(plant);
    }    @PutMapping("/{id}")
    public ResponseEntity<Plant> update(@PathVariable String id, @RequestBody Plant updatedPlant) {
        return plantRepo.findById(id)
            .map(plant -> {
                plant.setName(updatedPlant.getName());
                plant.setCategory(updatedPlant.getCategory());
                plant.setDescription(updatedPlant.getDescription());
                return ResponseEntity.ok(plantRepo.save(plant));
            }).orElse(ResponseEntity.notFound().build());
    }    @DeleteMapping("/{id}")
    public void delete(@PathVariable String id) {
        plantRepo.deleteById(id);
    }
}

✅ Test your API with Postman before starting the frontend.

⚛️ Step 2: Create the React Frontend

2.1 Initialize the Project

npx create-react-app plant-manager
cd plant-manager
npm install axios

2.2 Build the PlantForm and PlantList Components

Example: Fetch and Display Plants

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const PlantList = () => {
  const [plants, setPlants] = useState([]);  useEffect(() => {
    axios.get("http://localhost:8080/api/plants")
      .then(res => setPlants(res.data))
      .catch(err => console.log(err));
  }, []);  return (
    <div>
      <h2>🌱 Plant List</h2>
      <ul>
        {plants.map(plant => (
          <li key={plant.id}>{plant.name} - {plant.category}</li>
        ))}
      </ul>
    </div>
  );
};export default PlantList;

💡 You can build additional components for adding, editing, and deleting.

🚀 Final Touch: Connect Frontend & Backend

Make sure CORS is enabled in your Spring Boot backend:

@CrossOrigin(origins = "http://localhost:3000")

Then test all your CRUD operations directly from the React frontend!

🎯 What You’ve Learned

• How to set up a REST API using Spring Boot and MongoDB

• How to consume APIs from a React frontend using Axios

• How CRUD works in a full-stack app

• How to build and test a real-world web application

🌍 Bonus Tip: Deploy It Online!

• Frontend: Vercel / Netlify

• Backend: Render / Railway

• Database: MongoDB Atlas (Free tier)

🧠 Final Thoughts

If you’ve followed this guide, you’ve already done more than many tutorial-watchers ever do — you built something. Keep building, keep experimenting, and remember: Every full-stack developer once started where you are.

If this post helped you, give it a 💖 clap and follow me for more beginner-to-advanced guides in modern web development.