HRnet - Employee Management for Human Resources

The HRnet app is a human resources management tool designed to simplify the process of adding, viewing, filtering, and searching for employees. This application empowers HR professionals by providing an intuitive interface for managing employee data. Whether adding a new employee through a form or browsing through the employee database with advanced filtering and search capabilities, HRnet offers a smooth user experience built on modern web development technologies.

This app was developed as part of the OpenClassrooms curriculum.

Overview

Screenshot

The challenge

Users should be able to:

• Add a new employee using a form and save the entry
• View a table of all employees with the following functionalities:
  • sort by different columns
  • filter using a search bar
  • navigate through pages using pagination controls
• Navigate between the employee form and the employee list views

Links

• Live Site URL: See the live page here

My process

Custom Components

This project includes a self-built React Select Component, which was developed to enhance form usability. The component is published as an npm package and integrated into this project. It is also documented using JSDoc, tested with snapshot testing, , and built using Rollup and Babel for optimized distribution.

• npm package: @kazu2233/react-select-component
• source code: GitHub repository

Built with

• React.js for building the user interface
• React Router for managing navigation between pages
• Redux Toolkit and React Redux for managing global state in a React environment
• React Select Component: A reusable, self-built package published on npm @kazu2233/react-select-component
• React Bootstrap for consistent and responsive UI styling
• TanStack React Table for efficient and flexible data table management
• CSS3 and BEM methodology for general styling and maintainable code structure
• Vite for fast development and optimized builds
• Vercel for easy deployment and hosting of the live application

What I learned

• Gaining hands-on experience in the full package lifecycle — from coding and bundling to documentation and testing, and finally, versioning and publishing on npm.
• Comparing performance metrics between different versions of the application (React and jQuery solutions) by using the Lighthouse test, overcoming the challenge of running and testing the app in its production build.
• Evaluating and choosing external libraries based on project needs, considering factors like maintenance, community support, and features. Initially tested alternatives like React Bootstrap Table Next before selecting TanStack React Table for its flexibility and active development.

Performance Report

Lighthouse tests were conducted to measure the application's performance, accessibility, and best practices compliance. Two separate tests were run:

• Old version (jQuery): Lighthouse Report – performance analysis of the initial implementation using jQuery
• New version (React): Lighthouse Report – performance analysis after refactoring the application with React

These tests allow for a direct comparison of improvements made during the transition.

Continued development

• Incorporate localStorage to complement Redux state management.
• Implement form input validation for more robust user input handling.
• Refactor code in the CreateEmployeeForm.jsx to minimize repetition and enhance maintainability.