#19-employee-information-directory-react

Random generated employee registry searchable via full/partial last name or in ascending/descending alphabetical order.

Github Repository Page: https://github.com/palowenstein/employee-information-directory-react

Heroku Deployment Page: https://employee-info-retriever-react.herokuapp.com/

Table of Contents

• GIF
• Overview
• Details
• Instructions
• Screenshots
• Video
• References
• License
• Contributions
• Contact

GIF

Fig. 1. Randomized Employee Directory filtered by name or alphabetical order (React) — Application Demo (GIF)

Overview

• The React powered Employee Registry allows for the following actions:
  • Search for an employee or a group of employees based on a partial or full last name.
  • Reorder the employee registry in either ascending or descending alphabetical order.

Details

• The randomized employee list is generated via API from https://randomuser.me/.
• The application responds to the input field by managing React component state.
• Because it's a one page application, there are only 2 components: SearchForm (includes header), SearchResults (includes footer).
• If the application is to be scaled up, the 2 components will be broken in 4.
• A .gitignore file is present at the root level to prevent the upload of node_modules, Macintosh .DS_Store files and raw assets.
• The end user must first execute the package.json file located in the root folder of the application. This can be done in Apple's Terminal via the npm install command and will install the required dependencies (antd design, axios, react and its extensions) needed for the program to run.
• For the application to run in an heroku environment, a Procfile file with the startup instruction npm start is included in the root directory.

Instructions

• In Terminal, locate the application's root directory and enter it via the cd command: cd oemployee-information-directory-react.
• In the root directory, run the npm install command to install the necessary node modules (antd design, axios, react, react dom / router / scripts, web-vitals) from the package.json.
• In the root directory, run the npm start command to launch the application.
• This will automatically generate a new browser window containing the application.
• If not loaded automatically, the application can be browser accessed via localhost:3000 in the browser's address bar.
• Employees can be filtered via partial or full last name. Partial selections will display names containing the character consecutive selection no matter where they are located in the last name.
• Employees can be sorted in either ascending or descending alphabetical order.
• Non western names are listed at the end of the list and will show first if the list is reordered in descending alphabetical order.

Screenshots

Fig. 2. Randomized employee registry filtered by last name or ascending/descending alphabetical order.

Video

References

• React, React State / Props / Classes / Hooks
• React Extensions: React Router, Dom, Scripts.
• Service-Worker (legacy) / WebVitals (current).
• AXIOS for API requests.
• ANTD Design for application layout.
• Node / Package.JSON / NPM for installing dependencies.

License

MIT License | Copyright © [2021] Pierre André Lowenstein

Contributions

• Pull/Fork from master.
• Create your own branch.
• Add your own code (must be tested).
• Push your branch.
• Request a pull.

Please use the [Contributor Covenant Code of Conduct](https://www.contributor-covenant.org/version/2/0/code_of_conduct/code_of_conduct.md)

For major changes, please open an issue beforehand to discuss the changes.

Contact

[www] pierreandrelowenstein.com  |  [e-mail] Send me a 'courriel'