Employee Management System Front-end - React

• Back-end Component using Spring Boot & MySQL is located here: https://github.com/Saad1929/Employee-Management-System

Contents

1. Brief Summary
2. Aims and Motivation
3. Technologies, Requirements and Software Tools
4. Design
5. Application Screenshots

Brief Summary

• I developed a RESTful API using Spring Boot and MySQL for the back-end, tested it with Postman, and integrated it into a React front-end using axios.
• CREATE, READ, UPDATE and DELETE (CRUD) appliction.
• This repository contains the front-end of a Full Stack personal project, which is responsible for displaying employee information from the back-end and is implemented using React which serves as the user interface for the user.
• This application allows users to view, add, remove, and edit individuals within their management system.
• This project is now fully utilised by my community's sports club.

🎯Aims and Motivation

• The main objective of this project was to create a thorough Full Stack Application using Spring Boot & MySQL as the back-end and React as the front-end.
• Driven by an unwavering enthusiasm for learning and self-improvement, I dedicated my personal time to meticulously develop and refine this Full Stack Application.

⚙️Technologies, Requirements and Software Tools

• Requirements listed below are for the front-end and back-end.

Programming and Scripting Languages

• Java
• JavaScript
• HTML
• CSS
• JSON

Frameworks & Libraries

• Spring Boot - Back-end
• React - Front-end
• Bootstrap - Front-end & Back-end

npm Requirements (React)

• nmp axios
• npm react-router-dom

Other Software Tools

• MySQLWorkbench played a role where the back-end relied on this technology to store user information.
• DataGrip was also used to support the back-end in storing user information.
• Postman was used to test PUT, GET, POST and DELETE requests to the database.

✏️Design - Front-end

Front-end Technology Stack

React & npm Packages

• The front-end user interface of the application was built using React, allowing users to interact and utilise the application. Additionally, React was employed to retrieve data from the back-end and present it on the front-end for user visibility.
• The npm axios package was used to make HTTP requests, supporting promises, interceptors, and JSON data transformation.
• More specifically, the front-end user interface, built with React, utilises Axios to enable users to perform PUT, GET, POST, and DELETE operations on their information. These actions are reflected in real-time, updating the corresponding data on the back-end.
• The npm package react-router-dom was used to provide components including <BrowserRouter>, <Switch>, <Route>, and <Link> to handle client-side routing, rendering different components based on the URL path, and creating navigation links between different pages within the application.

Bootstrap

• Bootstrap is a front-end framework for building responsive web pages and applications, offering pre-built components and styles.
• For this project, Bootstrap was employed to facilitate the construction of the navigation bar. This feature enables users to conveniently access their employee information within the application.
• Bootstrap was additionally utilised to aid in the creation of the table that showcases employee information. This integration ensures a visually appealing and responsive table layout for an enhanced user experience.

Application Screenshots

Home Page

Register User Page

View User Details Page

Edit User Page