HRnet

Avant propos

Projet fictif dans le cadre de la formation Développeur d'application - JavaScript React d'Openclassrooms.

Une version de démo est déployée sur Netlify.

Contexte

Dans ce projet, je suis chargé de la conversion d’une application de jQuery vers React pour une grande société financière.

Ma mission principale est de refondre les pages clés de l’application en remplaçant un plugin jQuery spécifique par un composant React. Cela impliquera une compréhension approfondie des deux technologies et leur interaction.

Je suis également chargé de mesurer les performances de l'application avant et après la conversion. Cette analyse de performance permettra de quantifier les avantages de la migration vers React.

La documentation du composant converti sera une étape importante de mon travail. Cela comprendra la rédaction de documents techniques détaillant l'architecture du composant, son fonctionnement, et les raisons de sa conception.

Compétences évaluées

• Analyser la performance d'une application web
• Déployer une application front-end
• Refondre une application pour réduire la dette technique
• Mettre en place son environnement Front-End
• Produire de la documentation technique pour une application

Stack technique

• React
• React Router Dom
• ViteJS
• Typescript
• Zustand
• Shadcn/ui
• Tailwind
• Zod

Prerequis

• NodeJS
• NPM ou Yarn
• IDE (VSCode, intellij, etc...)

Getting started

Installation

• Clonez le projet avec la commande suivante :

git@github.com:raphaelsanchez/oc-p14-HRnet.git

• Accédez au répertoire du projet :

cd oc-p14-HRnet

• Installez les dépendances :

npm install
#or
yarn install
#or
pnpm install

Exécuter l'application

• Exécute l'application en mode développement en exécutant la commande :- Runs the app in the development mode by running the command:

npm run dev
#or
yarn dev

Dependances

"@hookform/resolvers": "^3.6.0",
"@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-slot": "^1.1.0",
"@raphysan/selectbox-react": "^0.1.6",
"@tanstack/react-table": "^8.19.2",
"@types/uuid": "^10.0.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"cmdk": "^1.0.0",
"date-fns": "^3.6.0",
"lucide-react": "^0.390.0",
"react": "^18.2.0",
"react-day-picker": "^8.10.1",
"react-dom": "^18.2.0",
"react-hook-form": "^7.52.0",
"react-router-dom": "^6.23.1",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"uuid": "^10.0.0",
"zod": "^3.23.8",
"zustand": "^4.5.4"

Custom package

Ce projet repose également sur un package personnalisé qui est publié sur NPM sous le nom de @raphysan/selectbox-react. Il s'agit d'un composant select avec un champ de recherche pour filtrer les options. Vous pouvez trouver le code source de ce package et sa documentation sur le répertoire NPM.

Auteur

Raphael Sanchez