Documentation

Home

HRnet

HRnet 👥💼

forthebadge forthebadge forthebadge forthebadge React

Site live - Documentation - README en Français - English README

Description FR :

Ceci est un projet réalisé dans le cadre du programme de formation Développeur Front-end JavaScript React chez OpenClassrooms

Participez à la conversion d'une application vers React. Vous allez transformer un plugin jQuery du site en React.

Compétences évaluées :

  • Analyser la performance d'une application web 📈
  • Déployer une application front-end 🚀
  • Programmer en JavaScript avec la programmation fonctionnelle 🤖
  • Refondre une application pour réduire la dette technique 🛠️

Situation (fictive) du projet :

Développeur au sein du département technologique d'une grande société financière.

Cette société utilise une application web interne, qui gère les dossiers des employés. L'application est ancienne et utilise jQuery côté front end, ce qui entraîne des bugs considérables et une augmentation des plaintes en interne.

Mon rôle a été de mettre l'application à niveau en utilisant React, de convertir un des quatres plugins jQuery utilisés par l'application en librairie React et de publier cette librarie sur GitHub et npmjs.com et de fournir des comparatifs de performances.

Cahier des charges :

  • Convertir l'ensemble du projet en React.
    • Réaliser une nouvelle version des pages "Create Employee" et "Employee List" avec React.
    • Ajouter un système de gestion d'état.
    • S'assurer que tout est cohérent au niveau du style. Un design plus moderne est le bienvenu.
  • Convertir l'un des quatre plugins jQuery actuels en librairie React. Remplacer les trois plugins jQuery restants par des composants React dans l'application.
    • Ne convertir que le code qui traite de la fonctionnalité réelle (La conversion du code ne doit pas une traduction exacte à l'identique).
    • Publier le plugin converti en librairie React sur GitHub ou npmjs.com
  • Effectuer des tests de performance Lighthouse en comparant l'ancienne et la nouvelle application.

Installation :

  1. Cloner le repository:
  • git clone https://github.com/ArthurBlanc/HRnet
  1. Installer toutes les dépendances pour le front-end:
  • npm install ou yarn
  1. Lancer le front-end:
  • npm start ou yarn start

Le front-end sera lancé à l'URL: http://localhost:3000/HRnet-live/.

Développé avec :

  • Visual Studio Code - Éditeur de texte
  • Sass - Préprocesseur CSS
  • React 18 - Bibliothèque JavaScript libre développée par Facebook
  • Create React App - Boîte à outils créée par Facebook, qui est la référence pour initier un projet React
  • React Router V6 - Bibliothèque de routage pour React
  • Prop-types - Un package utilisé pour documenter les types de propriétés prévus transmises aux composants React
  • Redux - Bibliothèque JS de gestion d'état pour applications web
  • redux-persist - Enregistrez le store Redux dans un stockage persistant
  • JSDoc - Générateur de documentation pour JavaScript
  • GitHub - Outil de gestion de versions
  • GitHub Pages - Outil d’hébergement

Auteur :

Arthur Blanc : GitHub - Portfolio

EN Description:

This is a project carried out as part of the Front-End JavaScript React Developer training program at OpenClassrooms.

Participate in the conversion of an application to React. You will transform a jQuery plugin on the website into React.

Evaluated skills:

  • Analyze the performance of a web application 📈
  • Deploy a front-end application 🚀
  • Program in JavaScript with functional programming 🤖
  • Refactor an application to reduce technical debt 🛠️

Project (fictional) situation:

Developer in the technology department of a large financial company.

This company uses an internal web application that manages employee records. The application is old and uses jQuery on the front-end, which results in considerable bugs and an increase in internal complaints.

My role was to upgrade the application using React, to convert one of the four jQuery plugins used by the application into a React library and publish this library on GitHub and npmjs.com and provide performance comparisons.

Specifications:

  • Convert the entire project to React.
    • Build a new version of the "Create Employee" and "Employee List" pages with React.
    • Add a state management system.
    • Ensure that everything is consistent in terms of style. A more modern design is welcome.
  • Convert one of the current four jQuery plugins to a React library. Replace the remaining three jQuery plugins with React components in the application.
    • Only convert the code that deals with the actual functionality (The code conversion should not be an exact translation).
    • Publish the converted plugin as a React library on GitHub or npmjs.com.
  • Perform Lighthouse performance tests comparing the old and new applications.

Installation:

  1. Clone the repository :
  • git clone https://github.com/ArthurBlanc/HRnet
  1. Install all dependencies for Front-end:
  • npm install or yarn
  1. Launch front-end on port 3000 (default port):
  • npm start or yarn start

Front-end will launch at URL: http://localhost:3000/HRnet-live/.

Developed with:

  • Visual Studio Code - Text editor
  • Sass - CSS preprocessor
  • React 18 - Free and open-source JavaScript library developed by Facebook
  • Create React App - Toolkit created by Facebook, which is the reference for initiating a React project
  • React Router V6 - Routing library for React
  • Prop-types - A package used to document the intended types of properties passed to React components
  • Redux - JS library for state management in web applications
  • redux-persist - Save Redux store to persistent storage
  • JSDoc - Documentation generator for JavaScript
  • GitHub - Version control tool
  • GitHub Pages - Hosting tool

Author:

Arthur Blanc: GitHub - Portfolio