HRnet is a modern and intuitive web application built with React and TypeScript for managing employee records within a company. The goal of this project is to migrate an old jQuery-based HR management system into a cleaner, more modular, and maintainable React architecture while improving overall performance, accessibility, and developer experience. This new version of HRnet introduces a fully typed data model powered by TypeScript, ensuring better code reliability and easier refactoring over time. The application is designed around reusable components and leverages the React Context API to manage employee data dynamically, removing the need for local storage or external state libraries. This approach makes the application lightweight, scalable, and easy to reason about.
The interface provides a modern and minimalist experience inspired by productivity tools like Notion — offering a clear layout, accessible navigation, and responsive design. Users can easily add new employees through a structured form, enriched with validation and selection components for departments and countries. Each employee entry is then displayed in a dynamic list featuring search, filter, and pagination systems to quickly locate specific records.
A confirmation modal, powered by the external library @juuulien/success-modal, enhances user interaction by providing clear feedback after each successful action, such as creating a new employee. Together, these features create a seamless experience that blends simplicity, performance, and clarity. HRnet reflects a transition toward a more modern front-end ecosystem — replacing the constraints of legacy code with a clean, maintainable, and future-proof solution.
see the model
see the documentation
see the library success-modal
Clone the HRnet project
git init
git clone https://github.com/JulienDevFront/HRnet.git
npm install