https://github.com/jeromeabel/oc-p14-hrnet

Pass a jQuery library to React
https://github.com/jeromeabel/oc-p14-hrnet

react react-hook-form react-router tailwind typescript zod

Last synced: 3 months ago
JSON representation

Pass a jQuery library to React

• Host: GitHub
• URL: https://github.com/jeromeabel/oc-p14-hrnet
• Owner: jeromeabel
• Created: 2023-05-08T08:40:39.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-09T21:55:45.000Z (about 3 years ago)
• Last Synced: 2025-09-14T20:01:54.288Z (9 months ago)
• Topics: react, react-hook-form, react-router, tailwind, typescript, zod
• Language: TypeScript
• Homepage: https://jeromeabel.github.io/oc-p14-hrnet/
• Size: 6.5 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# oc-p14-hrnet 👋

[![Node.js](https://img.shields.io/badge/Node.js-18.16-green)](https://nodejs.org/)

[![Vite](https://img.shields.io/badge/Vite-4.3-yellow)](https://vitejs.dev/)

[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)](https://www.typescriptlang.org/)

[![React](https://img.shields.io/badge/React-18.2-blueviolet)](https://reactjs.org/)

[![React Router](https://img.shields.io/badge/React_Router-6.11-orange)](https://reactrouter.com/)

[![React Hook Form](https://img.shields.io/badge/React_Hook_Form-7.43-red)](https://react-hook-form.com/)

[![Zod](https://img.shields.io/badge/Zod-3.21-lightgrey)](https://github.com/colinhacks/zod)

[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.3.2-blue)](https://tailwindcss.com/)

This project is the n°14 of the [OpenClassrooms Front-End learning path](https://openclassrooms.com/fr/paths/516-developpeur-dapplication-javascript-react).

**WealthHealth** is a large financial company that uses an in-house employee management application: **HRnet**. My main goal is to update HRnet and convert it to React. The old version uses 4 JQuery plugins : datetimepicker, jquery-modal, jquery-ui/selectmenu, DataTables.

The main tasks:

- [x] Convert the entire project to React

- [x] Add a state management system

- [x] Publish a React plugin to NPM : [ja-react-table](https://www.npmjs.com/package/ja-react-table)

- [x] Performance report between old and new version

## ✨ Demo

- Github: [jeromeabel.github.io/oc-p14-hrnet](https://jeromeabel.github.io/oc-p14-hrnet/)

- For Lighthouse audit, we need another type of web hosting, like Apache server: [jeromeabel.net/oc-p14-hrnet](https://jeromeabel.net/oc-p14-hrnet)

- Credit photo: [Francesco Gallarotti](https://unsplash.com/fr/photos/ruQHpukrN7c)

![oc-p14-hrnet screen](screen.png)

## ✔️ Report

![oc-p14-hrnet report lighthouse](report.png)

## 🚨 Prerequisites

To get and build the project you will need to install :

- [NodeJS](https://nodejs.org/)

- [Git](https://git-scm.com/)

- A terminal to run commands. If you don't have one, I would recommend to use [Visual Studio Code](https://code.visualstudio.com/), it provides an integrated terminal inside the code editor.

- Optional : PNPM instead of NPM

## 🛠️ Installation

```sh

git clone https://github.com/jeromeabel/oc-p14-hrnet.git

cd oc-p14-hrnet

pnpm install

```

## 🚀 Usage

```sh

pnpm run dev

```

And open the browser at this address : http://localhost:5173/

## 👤 Author

[@jeromeabel](https://github.com/jeromeabel)

## 📝 License

[GNU--GPL--3](https://www.gnu.org/licenses/gpl-3.0.fr.html)