HRnet

Project 14 - Migrating a jQuery library to React

Missions

• Convert the entire HRNet project to React.
• Convert one of the four current jQuery plugins to React. Replace the remaining 3 jQuery plugins with React components that you'll code yourself, or that you can import from existing libraries if you're short of time.
• Run Lighthouse performance tests comparing the old and new applications.

Resources provided

HRnet project repository

Plugins list:

• DateTimePicker
• JQuery-Modal
• Select Menu
• DataTables

Plugins issues

• DateTimePicker Issues
• JQuery-Modal Issues
• Dropdown Issues
• DataTables Issues

Deliverables

Site demo

github repository of NPM package

NPM package

Google Lighthouse test

JQuery app

Navigation

Create employee page

• Desktop JSON | HTML | PDF resume | PDF expended
• Mobile JSON | HTML | PDF resume | PDF expended

List employees page

• Desktop JSON | HTML | PDF resume | PDF expended
• Mobile JSON | HTML | PDF resume | PDF expended

Snapshot

Create employee page

• Desktop JSON | HTML | PDF resume | PDF expended
• Mobile JSON | HTML | PDF resume | PDF expended

List employees page

• Desktop JSON | HTML | PDF resume | PDF expended
• Mobile JSON | HTML | PDF resume | PDF expended

React app

Navigation

Create employee page

• Desktop JSON | HTML | PDF resume | PDF expended
• Mobile JSON | HTML | PDF resume | PDF expended

List employees page

• Desktop JSON | HTML | PDF resume | PDF expended
• Mobile JSON | HTML | PDF resume | PDF expended

Error 404 page

• Desktop JSON | HTML | PDF resume | PDF expended
• Mobile JSON | HTML | PDF resume | PDF expended

Snapshot

Create employee page

• Desktop JSON | HTML | PDF resume | PDF expended
• Mobile JSON | HTML | PDF resume | PDF expended

List employees page

• Desktop JSON | HTML | PDF resume | PDF expended
• Mobile JSON | HTML | PDF resume | PDF expended

Error 404 page

• Desktop JSON | HTML | PDF resume | PDF expended
• Mobile JSON | HTML | PDF resume | PDF expended

install

Clone the repository of HRnet :

git clone https://github.com/tempetflamer/OC-projet14.git

Inside this repository, install dependencies:

npm i

launch the project:

npm start

HRnet is now rendered at URL http://localhost:3000