1.

**Setup the Spring Boot Project**

Use Spring Initializr (https://start.spring.io/) to generate a new Spring Boot project with the

following dependencies:

- Spring Web

- Spring Data JPA

- H2 Database (for simplicity)

- Lombok (optional, for reducing boilerplate code)

2. **Configure the Application**

- `application.properties`

```properties

spring.datasource.url=jdbc:h2:mem:testdb

spring.datasource.driverClassName=org.h2.Driver

spring.datasource.username=sa

spring.datasource.password=password

spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

spring.h2.console.enabled=true

3. **Define the Entity**

- `Employee.java`
 ```java

package com.example.employeemanagement.model;

import jakarta.persistence.Entity;

import jakarta.persistence.GeneratedValue;

import jakarta.persistence.GenerationType;

import jakarta.persistence.Id;

@Entity

public class Employee {

@Id

@GeneratedValue(strategy = GenerationType.IDENTITY)

private Long id;

private String name;

private String role;

// Getters and setters

```

4. **Create the Repository**

- `EmployeeRepository.java`

```java

package com.example.employeemanagement.repository;
 import com.example.employeemanagement.model.Employee;

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

public interface EmployeeRepository extends JpaRepository<Employee, Long> {

5. **Implement the Service**

- `EmployeeService.java`

```java

package com.example.employeemanagement.se

@Service

public class EmployeeService {

@Autowired

private EmployeeRepository employeeRepository;

public List<Employee> getAllEmployees() {

return employeeRepository.findAll();

public Optional<Employee> getEmployeeById(Long id) {

return employeeRepository.findById(id);

}
 public Employee saveEmployee(Employee employee) {

return employeeRepository.save(employee);

public void deleteEmployee(Long id) {

employeeRepository.deleteById(id);

6. **Create the Controller**

- `EmployeeController.java`

```java

package com.example.employeemanagement.controller;

import com.example.employeemanagement.model.Employee;

import com.example.employeemanagement.service.EmployeeService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.http.ResponseEntity;

import org.springframework.web.bind.annotation.*;

import java.util.List;

import java.util.Optional;
 @RestController

@RequestMapping("/api/employees")

public class EmployeeController {

@Autowired

private EmployeeService employeeService;

@GetMapping

public List<Employee> getAllEmployees() {

return employeeService.getAllEmployees();

@GetMapping("/{id}")

public ResponseEntity<Employee> getEmployeeById(@PathVariable Long id) {

Optional<Employee> employee = employeeService.getEmployeeById(id);

return employee.map(ResponseEntity::ok).orElseGet(() ->

ResponseEntity.notFound().build());

@PostMapping

public Employee createEmployee(@RequestBody Employee employee) {

return employeeService.saveEmployee(employee);

}
 @PutMapping("/{id}")

public ResponseEntity<Employee> updateEmployee(@PathVariable Long id,

@RequestBody Employee employeeDetails) {

Optional<Employee> employeeOptional = employeeService.getEmployeeById(id);

if (employeeOptional.isPresent()) {

Employee employee = employeeOptional.get();

employee.setName(employeeDetails.getName());

employee.setRole(employeeDetails.getRole());

return ResponseEntity.ok(employeeService.saveEmployee(employee));

} else {

return ResponseEntity.notFound().build();

@DeleteMapping("/{id}")

public ResponseEntity<Void> deleteEmployee(@PathVariable Long id) {

employeeService.deleteEmployee(id);

return ResponseEntity.noContent().build();

```

7. **Run the Application**

 Run the application by executing the main method in the

`EmployeeManagementApplication` class.

### Part 2: React Application

1. **Create a React Application**

Use `create-react-app` to set up the frontend.

```bash

npx create-react-app employee-management

cd employee-management

```

2. **Install Axios for HTTP Requests**

```bash

npm install axios

```

3. **Create a Service to Handle API Requests**

- `src/services/EmployeeService.js`

```javascript

import axios from 'axios';

const EMPLOYEE_API_BASE_URL = "http://localhost:8080/api/employees";

class EmployeeService {

getEmployees() {

return axios.get(EMPLOYEE_API_BASE_URL);

createEmployee(employee) {

return axios.post(EMPLOYEE_API_BASE_URL, employee);

getEmployeeById(employeeId) {

return axios.get(`${EMPLOYEE_API_BASE_URL}/${employeeId}`);

updateEmployee(employee, employeeId) {

return axios.put(`${EMPLOYEE_API_BASE_URL}/${employeeId}`, employee);

deleteEmployee(employeeId) {

return axios.delete(`${EMPLOYEE_API_BASE_URL}/${employeeId}`);

}
 export default new EmployeeService();

```

4. **Create React Components**

- `src/components/EmployeeListComponent.js`

```javascript

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

import EmployeeService from '../services/EmployeeService';

const EmployeeListComponent = () => {

const [employees, setEmployees] = useState([]);

useEffect(() => {

EmployeeService.getEmployees().then((res) => {

setEmployees(res.data);

});

}, []);

return (

<div>

<h2 className="text-center">Employees List</h2>

<div className="row">

<table className="table table-striped table-bordered">

<thead>

<tr>
 <th>Employee Name</th>

<th>Employee Role</th>

</tr>

</thead>

<tbody>

{employees.map((employee) => (

<tr key={employee.id}>

<td>{employee.name}</td>

<td>{employee.role}</td>

</tr>

))}

</tbody>

</table>

</div>

</div>

);

};

export default EmployeeListComponent;

`src/components/CreateEmployeeComponent.js`,

`src/components/UpdateEmployeeComponent.js`, and

`src/components/ViewEmployeeComponent.js` will be similar to

`EmployeeListComponent`, making appropriate API calls using `EmployeeService`.

5. **Integrate Components into the Application**

 - `src/App.js`

```javascript

import React from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import EmployeeListComponent from './components/EmployeeListComponent';

import CreateEmployeeComponent from

'./components/CreateEmployeeComponent';

import UpdateEmployeeComponent from

'./components/UpdateEmployeeComponent';

import ViewEmployeeComponent from './components/ViewEmployeeComponent';

function App() {

return (

<div>

<Router>

<div className="container">

<Switch>

<Route path="/" exact

component={EmployeeListComponent}></Route>

<Route path="/employees"

component={EmployeeListComponent}></Route>

<Route path="/add-employee"

component={CreateEmployeeComponent}></Route>
 <Route path="/edit-employee/:id"

component={UpdateEmployeeComponent}></Route>

<Route path="/view-employee/:id"

component={ViewEmployeeComponent}></Route>

</Switch>

</div>

</Router>

</div>

);

export default App;

```

6. **Run the React Application**

```bash

npm start