Ecommerce

We are going to create an E-commerce project using Spring Boot and React.
This project will have two main parts:

First, we will create the backend application using Spring Boot and connect it to a database. The Spring Boot application will fetch data from the database and provide it in JSON format.

Next, we will build the React frontend, which will receive the JSON data from Spring Boot and display it on the user interface.

👉 This way, Spring Boot will handle the backend and database operations, while React will handle the frontend and presentation.

What is our part_1 ?
👉 We need to create a Spring Boot application, connect it to the database, and then fetch the data from the database in JSON format. This is the first part.

👉 "How will the JSON format look?"

First, open Spring Tool Suite. Then, click on File and select Spring Starter Project. After that, the project page will open. ✅

For this project, I chose the name ECommerce.
The type is set to Maven (I could use Gradle, but I’m using Maven).
The packaging is Jar, Java version 17, and language Java – I didn’t change anything here.

For the Group, I used com.example.
The Artifact is ECommerce.
The Version and Description I wrote as Demo Project for Spring Boot.
For the Package, I set it as com.example.demo – I didn’t change anything here either.

Then I clicked Next. ✅

Next, the Dependencies page will open.
Here we must decide which dependencies are required for our project.

Since our output must be displayed on the Frontend via the web, we need Spring Web.

Where will Spring Web fetch the data from? It will fetch the data from a Database (like H2, PostgreSQL, MySQL, etc.).
By default, Spring Boot includes H2 Database.

For our project, we will include both H2 Database and PostgreSQL Driver.

To map the data from the database to the frontend, we need Spring Data JPA.
Because when we create an Entity in Spring Boot, JPA automatically maps it into a Database Table.

Additionally, we will include Spring Boot DevTools for easier and faster development (auto reload support).

📝 Add these 5 dependencies:

Spring Web

Spring Data JPA

H2 Database

PostgreSQL Driver

Spring Boot DevTools

👉 In the available search box, type Web and add Spring Web.
Then type SQL and add Spring Data JPA.
After that, add H2 Database, PostgreSQL Driver, and Spring Boot DevTools.

Once these 5 dependencies are added, click Finish. ✅

Here’s the Spring Boot Project - Dependencies diagram 🎯

Spring Web → Handles HTTP requests & REST APIs

Spring Data JPA → Maps Entities ↔ Database Tables

Databases (H2 + PostgreSQL) → Where data is stored

Spring Boot DevTools → Provides hot reload & faster development

👉 All these work together inside your Spring Boot Project.

actually what will need?
Now, we need a Page that will display multiple Products.

Each product will have the following details:

Image

Name

Description

Rating

Price

Stock

So, we need to create a Java Class to hold these details. This class will later be stored in the Database as a table.

*👉 Let’s check our project structure:
*
Inside src/main/java, there will be a package named com.example.demo

Inside it, we already have our Spring Boot Application Base Class (EcommerceApplication.java). We will not make any changes to that.

*👉 Next step:
*
Right-click on src/main/java → select New → Package → create a new package.

The package name should be: com.example.demo.entity (✅ correct)

*👉 Now, we will create our Entity Class:
*
What table do we need in the database? → Product Table.

So, we will create a class named Product.

This Product class will be annotated with @Entity, so it will map to the Product Table in the database.