Spring boot Ecommerce project frontend using ReactJS

package com.example.demo.entity;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;


@Entity
@NoArgsConstructor
@AllArgsConstructor
@Getter
@Table(name="product")
public class Product {
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long id; 
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
    public String getImg() {
        return img;
    }
    public void setImg(String img) {
        this.img = img;
    }
    public Integer getRating() {
        return rating;
    }
    public void setRating(Integer rating) {
        this.rating = rating;
    }
    public Integer getStock() {
        return stock;
    }
    public void setStock(Integer stock) {
        this.stock = stock;
    }
    public Long getPrice() {
        return price;
    }
    public void setPrice(Long price) {
        this.price = price;
    }
    private String name, description, img; 
    private Integer rating, stock; 
    private Long price; 

}

package com.example.demo.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.example.demo.entity.Product;

@Repository
public interface ProductRepository extends 
JpaRepository<Product, Long>{

}

package com.example.demo.service;

import java.util.List;

import org.springframework.stereotype.Service;

import com.example.demo.entity.Product;
import com.example.demo.repository.ProductRepository;

@Service
public class ProductService {

    private final ProductRepository repository; 

    public ProductService(ProductRepository repository)
    {
        this.repository = repository; 
    }

    public List<Product> getAllProducts()
    {
        return repository.findAll(); 
    }
    public Product addProduct(Product product)
    {
        return repository.save(product);
    }

}

package com.example.demo.controller;

import java.util.List;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.entity.Product;
import com.example.demo.service.ProductService;

@RestController
@RequestMapping("/api/products")
public class ProductController {

    private final ProductService service; 

    public ProductController(ProductService service)
    {
        this.service = service; 
    }

    @GetMapping
    public List<Product> showAllProducts()
    {
        return service.getAllProducts(); 
    }

    @PostMapping
    public Product addProduct(@RequestBody Product product)
    {
        return service.addProduct(product);
    }

}

neelakandan@neelakandan-HP-Laptop-15s-eq2xxx:~$ sudo -i -u postgres
[sudo] password for neelakandan:         
postgres@neelakandan-HP-Laptop-15s-eq2xxx:~$ psql
psql (16.8 (Ubuntu 16.8-0ubuntu0.24.04.1))
Type "help" for help.

postgres=# \c ecommerce
You are now connected to database "ecommerce" as user "postgres".
ecommerce=# \d
             List of relations
 Schema |      Name      |   Type   | Owner 
--------+----------------+----------+-------
 public | cart           | table    | ecom3
 public | cart_id_seq    | sequence | ecom3
 public | payment        | table    | ecom3
 public | payment_id_seq | sequence | ecom3
 public | product        | table    | ecom3
 public | product_id_seq | sequence | ecom3
(6 rows)

ecommerce=# \d product
ecommerce=# SELECT * FROM product
ecommerce-# SELECT * FROM product
ecommerce-# \l
ecommerce-# ^C

ecommerce=# SELECT * FROM product;
 id | description |  img   |  name  | price | rating | stock 
----+-------------+--------+--------+-------+--------+-------
  1 | Good prod   | link-1 | prod-1 | 10000 |      4 |    10
(1 row)

ecommerce=#
ERROR:  database "ecommerce" is being accessed by other users
DETAIL:  There are 10 other sessions using the database.

**

import logo from './logo.svg';
import './App.css';
import ProductCard from './components/ProductCard';
import { getProducts } from './api';
import { useEffect, useState } from 'react';

function App() {

  const [productList,setProductList]  = useState([]);

  useEffect(()=>{
    getProducts()
      .then((res)=>setProductList(res.data))
        .catch((err)=>console.log(err));
  },[])


  return (
    <div className="App">
      <header className="App-header">
        {
          productList.map((prod)=><ProductCard items={prod}/>)
        //  <ProductCard items = {productList[3]}/>

        }


      </header>
    </div>
  );
}

export default App;

import axios from "axios";

export const getProducts = ()=> axios.get("http://localhost:8084/api/products");

function ProductCard({items})
{ 
    return(
        <div>
            <img src={items.img} alt="" />
            name : {items.name}
            price : {items.price}
        </div>
    )
}

export default ProductCard;