Project carried out as part of the Front-End Web Development Career Path of OpenClassrooms.
HRnet is an internal application (for the fictional company "Wealth Health") to create and view employee records. For this project I had two main missions :
1) Convert the original HRnet app into a React app.
The original HRnet app was heavily relying on JQuery code and I had to convert the app (that you can find on this branch) into a React app to improve performances and fix bugs related to JQuery.
See below for the performance report.
2) Convert one of the JQuery plugins into a React component and publish It as an npm package
I decided to convert the selectmenu plugin. You can find the code of the converted plugin and It's documentation on this repo : https://github.com/leoncik/LeonardWojcik_14_30082022_plugin.
- Get this repository's content by direct download or by cloning It :
git clone https://github.com/leoncik/LeonardWojcik_14_30082022_web-app.git- Make sure that Node.js is installed on your machine and that you have a package manager (like npm or yarn).
Then install the dependencies :
yarn install- You are ready to go!
- Make sure that you are in the root directory of the project.
- Run
yarn dev. - You should be able to view the website on : http://localhost:5173/
You can find the unit tests in : src/__tests__/.
To run and watch the tests in the console, run : yarn test.
To get a coverage report while running the tests, run : yarn coverage. If you want to visualize the coverage report, you can run a live server (if you are using VSCode, I recommend using LiveServer) and use this url : http://127.0.0.1:5500/coverage/
You can find the E2E tests in : cypress/e2e/.
To start the tests :
- Make sure that the dev server is running (use the command
yarn dev). - Run :
yarn cypress:open. - A popup should appear. Choose "E2E Testing".
- Choose a Browser from the list.
- Now you can run a test by clicking on a file from the "Specs" tab.
I have used Lighthouse in order to compare the performances of the old website and the new one.
The report shows that the new website is more performant than the old one and also more secure (the Best practices category is now at 100%).
Here are all the reports :
| Home page | Employee page | |
|---|---|---|
| JQuery version | JQuery-Home-PDF.pdf / JQuery-Home-JSON.json | JQuery-Employee-PDF.pdf / JQuery-Employee-JSON.json |
| React version | React-Home-PDF.pdf / React-Home-JSON.json | React-Employee-PDF.pdf / React-Employee-JSON.json |