HRNet

HRNET: Employee records management application

P14 - OpenClassrooms

This application allows you to add new employees through a form and to have access to the all employees list. A table allows you to perform a search, to sort the data displayed and to choose the number of data to display per page.

Goals:

• Moving a jQuery library to React
• reduce the technical debt
• use a state management system
• modernise the style
• create, publish and use a React component on npm as a package :

nmp-package

npm-package GitHub repository

1. Technologies

This project was bootstrapped with Create React App.

• react v17.0.2
• react-domv17.0.2
• react-router-dom v6.0.2
• redux v4.1.2
• react-redux v7.2.6
• redux/toolkit v1.6.2
• redux-thunk v2.4.0
• firebase v9.5.0
• prop-types v15.7.2
• styled-components v5.3.3
• simple-react-modal-uiv0.1.5
• Recommended IDE : Visual Studio code

2. Prerequisites

• Git to clone repositories
• Node.js to run yarn commands
• Yarn to run application

3. Install and run application

Install back-end

This project uses Firebase for database management

1. First you need to create a new project on firebase and start a new collection named 'employees' (you can use collection example with the json file found in '/src/datas/employees.json')

2. Next, look at and copy the firebaseConfig constant (you can find it in your Firebase project settings)

3. In this project you should find a .env_sample file with environment variable names, so you need to create your own .env file at project root with the environment variable names and your firebaseConfig values (don't forget to add '.env' file to '.gitignore')

Install and launch front-end

• Clone repository : https://github.com/MelanieSarrouy/MelanieSarrouy_P14_16112021
• cd MelanieSarrouy_P14_16112021
• yarn to install dependencies
• yarn start Runs the app in the development mode.
  Open http://localhost:3000 to view it in the browser.
  The page will reload if you make edits.
  You will also see any lint errors in the console.