openclassroom-projet_14-wealthhealth
Projet OpenClassRoom
Wealth Health
Table of Contents
About The Project
Faites passer une librairie jQuery vers React
L’application est ancienne et utilise jQuery côté front end, ce qui entraîne des bugs considérables
Voici un récapitulatif des principales tâches :
Il faut mettre à jour HRnet et le convertir en React ! -Convertir l’ensemble du projet HRNet en React. -Convertir l’un des quatre plugins jQuery actuels en React. Remplacer les 3 plugins jQuery restants par des composants React que tu coderas toi-même, ou que tu peux importer depuis des libraires existantes si tu manques de temps. -Effectuer des tests de performance Lighthouse en comparant l’ancienne et la nouvelle application. il faudra faire des tests de performance et fournir des rapports.
Le projet se décompose en deux phases :
Phase 1:
Passé l’application HR-Net à 100% React et 0% jQuery
Voici le repo HRnet actuel. N’oublie pas que toute l’application HRNet doit être convertie en React :
Tu devras faire une nouvelle version des pages “Create Employee” et “Employee List” avec React.
Tu devras ajouter un système de gestion d’état (la version actuelle utilise un stockage local).
Tu dois aussi t’assurer que tout est cohérent au niveau du style.
Pour cela, tu n’es pas obligé de refaire le design de l’application, mais si tu veux changer le style pour quelque chose de plus moderne, tu es le bienvenu.
Si tu as le temps, tu peux tester le code React avec une suite de tests unitaires. Sinon, seuls des tests manuels sont nécessaires.
Phase 2:
Conversion des plugins
Pour les plugins, il faut consulter l’onglet Issues pour avoir plus de contexte sur les problèmes que les utilisateurs rencontrent avec les plugins jQuery existants : issue sur les sélecteurs de date</>, issues de fenêtres modales, issue sur menus déroulants, et issue sur les tableaux.
Voici la liste des plugins jQuery actuellement utilisés qui doivent être convertis :
Plugin de sélection de date
Plugin de fenêtre modale - jQuery.modal.js
Menus déroulants
Plugin pour les tables de données
De plus, lors de la conversion d’un plugin jQuery en un composant React, il faut garder à l’esprit de ne convertir que le code qui traite de la fonctionnalité réelle de l’interface utilisateur du plugin. Par exemple, si un plugin jQuery inclut du code AJAX, tu n’as pas besoin de le convertir. Si tu convertis un plugin jQuery pour une fenêtre modale, concentre-toi sur la création d’un composant React qui fonctionne comme une fenêtre modale, et rien d’autre.
Nous voulons également mesurer des données quantifiables (ex. : temps de chargement des pages, appels réseau) pour nous assurer que la conversion de l’application à React améliore effectivement les performances. Pour cela, fais bien des audits de performance Lighthouse. Pour comparer, tu devras en faire un pour l’application jQuery HRnet actuelle, puis un autre une fois que l’application et le plugin jQuery choisi seront convertis en React.
Penses bien à faire un build de l’application avant de faire ton audit. Ça impactera grandement les performances de ton application.
Une fois que l’application HRnet en React fonctionne, tu peux publier le composant React sur npm sous forme de package et partager le lien pour que nous puissions l’utiliser si nécessaire. Si tu as du mal avec npm, tu peux utiliser les paquets GitHub comme alternative.
Built with
<a href=https://github.com/Erik-42?tab=repositories&q=&type=&language=html&sort= > 
</a>
<a href=https://github.com/Erik-42?tab=repositories&q=&type=&language=css&sort= > 
</a>
<a href= https://github.com/Erik-42?tab=repositories&q=&type=&language=sass&sort= > 
</a>
<a href=https://github.com/Erik-42?tab=repositories&q=&type=&language=javascript&sort= > 
</a>
<a href=https://github.com/Erik-42?tab=repositories&q=&type=&language=reactjs&sort= > 
</a>
<a href=https://github.com/Erik-42?tab=repositories&q=&type=&language=redux&sort= > 
</a>
<a href= https://github.com/Erik-42?tab=repositories&q=&type=&language=github&sort= > 
</a>
Installation:
Frontend Dependencies:
"@babel/register": "^7.24.6",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@fontsource/manrope": "^5.0.21",
"@fontsource/roboto": "^5.0.15",
"@mui/icons-material": "^6.0.2",
"@mui/material": "^6.0.2",
"@reduxjs/toolkit": "^2.2.7",
"@vercel/speed-insights": "^1.0.12",
"axios": "^1.7.7",
"babel": "^6.23.0",
"express": "^4.21.0",
"jsonwebtoken": "^9.0.2",
"modaleerik42": "^1.0.4",
"node-fetch": "^3.3.2",
"prop-types": "^15.8.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-redux": "^9.1.2",
"react-router": "^6.26.2",
"react-router-dom": "^6.26.2",
"redux": "^5.0.1",
"sass": "^1.79.3",
"shallowequal": "^1.1.0",
"styled-components": "^6.1.13",
"vercel": "^32.3.0"
Launching the project
Fork the repository
Clone it on your computer.
Frontend
npm install command wil allow you to install the depencies.
Available Scripts
In the project frontend directory , you can run:
npm run preview
Runs the app .
Open http://localhost:4173 to view it in your browser.
or
npm run dev
Runs the app in the development mode.
Open http://localhost:5173 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
================================
Si vous souhaitez exporter la structure du projet,mettez export-file-structure.js dans le repertoir racine et dans le terminal, lancez la commande:
node export-file-structure.js
================================
<a href=text>Le rapport de performance</a>
================================
Testez le projet
Github: https://erik-42.github.io/openclassroom-projet_14-wealthhealth/
License
Distributed under the MIT License. See LICENSE.txt for more information.
Formation OpenClassRoom Développeur d’application - JavaScript React
Contact
basillecorp.dev
mesen.erik@gmail.com