This project is the Vue.js adaptation of this application
HR Net is a web app made to manage employee data. It is composed of two pages "Create employee" and "Display employees".
Access the live version here HRNet
Below are detailed descriptions of the application's key features.
The primary objective of this project was to transition from an outdated JQuery based version of the application to a more modern Vue-based solution. A second aim was to create modular components that could be reused on any other application. Notably a paginated table component, used to display data with functionality to paginate, filter and sort data.
The "Create employee" page features a form with data validation. Upon successful form submission, a new employee record will be saved in the user's localStorage (to prevent data loss caused by page refresh / closure).
The "Display employees" page retrieves all employee records stored in the localStorage and display them using a custom table component. This table component includes several features:
- Pagination functionality enabling users to select the number of records displayed per page.
- Sorting options allowing records the be arranged in ascending or descending order based on any field.
- Filtering capability based on user-input text.
- Action section enabling employee deletion from localStorage.
To run the application locally, follow these steps:
Clone the project:
git clone https://github.com/MisterFried/HRNet-VueGo to the project directory:
cd HRNet-VueInstall dependencies:
npm installStart the server:
npm run devAs mentioned above, this project is the Vue.js adaptation of an existing application made during my "Software developer - React"" training program. The React version can be found here :