Full Stack Application: Employee Management System

Introduction

• Technologies used:
  • React
  • Tailwind CSS
  • Spring Boot
  • MySQL database
• Features of the application:
  • Create a new employee
  • Delete an employee
  • Edit an employee
  • List all employees
• Frontend: React (with Tailwind CSS)
• Backend: Spring Boot
• Database: MySQL

Setting Up Spring Boot Application

Using Spring Initializer

1. Open Spring Initializer: Go to start.spring.io.
2. Project Setup: Configure parameters:*
   • Project metadata: Group ID, Artifact ID, Name, Description, Packaging, Java Version.
   • Add Dependencies:
     • Spring Web
     • Spring Data JPA
     • Lombok
     • MySQL Driver
3. Generate Project: Download and open in your IDE (IntelliJ IDEA recommended).

From IntelliJ IDEA

1. Create New Project: Using Spring Initializer
   • Complete project details similar to steps above.
2. Adding Dependencies via IntelliJ:* Add the same dependencies as above directly from the tool.***

Configuring Application

MySQL Setup

1. Install MySQL and MySQL Workbench
2. Create Schema: Name it employee_system
3. Configuration in Spring Boot: application.properties
   • Spring Datasource URL: jdbc:mysql://localhost:3306/employee_system
   • Username and Password: Set according to MySQL configuration.
   • Hibernate DDL Auto: update
   • Show SQL: true

Dependencies

• Setup dependencies in pom.xml: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <!-- Add more dependencies as needed --> </dependencies>

Create Spring Boot Components

Create Entity Classes

1. Employee Entity
   • Fields: id (Primary Key), firstName, lastName, emailId
   • Annotations: @Entity, @Id, @GeneratedValue
2. Repository Interface: To communicate with the database
   • JpaRepository<Employee, Long>

Create Service Classes

1. Service Interface: Define Methods
   • Methods: createEmployee, getAllEmployees, getEmployeeById, updateEmployee, deleteEmployee
2. Service Implementation: Implement Methods
   • Implement methods using @Service, @Autowired components
   • Use @Transactional annotation to manage transactions

Create Controller Classes

1. Employee Controller: Handles API Requests
   • REST Endpoints: /api/v1/employees
   • Methods: createEmployee, getAllEmployees, getEmployeeById, updateEmployee, deleteEmployee
   • Annotations: @RestController, @RequestMapping

Frontend with React

Setup React Application

1. Install Node.js and npm
2. Create React App: npx create-react-app employee-management-ui
3. Install Tailwind CSS: Add dependencies
   • Follow official Tailwind CSS guide to install within React

Create Components

1. Create Components Folder: Structure it properly
2. Create Header Component: Include logo and navigation
3. Create Employee Management Components:
   • Form for Creating/Editing Employees
   • Employee List: Display all employees
   • Employee Item: Single employee details with edit and delete options

Use Axios for HTTP Requests

1. Install Axios: npm install axios
2. Setup Axios for API Calls
   • Define base URL
   • Create service functions: createEmployee, getAllEmployees, getEmployeeById, updateEmployee, deleteEmployee

Integrate Tailwind CSS

1. Follow Tailwind CSS installation guide:
   • Modify React App's index.css

Handling State with React Hooks

1. UseState, UseEffect for local state management
2. Example: Managing employee data
3. Handle Form inputs and submission
4. Updating and Deleting Employees

Final Touches

1. Ensure UI is responsive and user-friendly
2. Add proper form validation
3. Handle errors and loading states

Running the Application

1. Start Backend: mvn spring-boot:run
2. Start Frontend: npm start

Summary

• Successfully built Full Stack Employee Management System
• Used React with Tailwind CSS for frontend
• Used Spring Boot with MySQL for backend
• Implemented CRUD operations
• Ensured data persistence and UI/UX considerations