Deployed on GitHub pages: https://github.com/jessicablank/employee-directory
This is my first boot camp homework assignment bootstrapped with Create React App(https://github.com/facebook/create-react-app). Originally designed as an employee directory, now re-imagined as an international agent directory.
💁 Is it for someone seeking an agent for a mission, or is it for agents seeking other agents for companionship?
I'll let you decide!
Fork, clone, or download.
npm i to load dependencies.
The original homework assignment for this project produced a pretty basic application that met the requirements below for Minimum Viable Product (MVP):
- When the page loads, a list of random employees from Random User Generator API (https://randomuser.me/) is displayed in a table.
- When the user clicks on the icon next to email, the employees are sorted in ascending or descending order based on email address.
- Provide a search box for users to dynamically search by one category.
I came back to this assignment to test adding a React loading indicator using npm packages react-promise-tracker and react-loader-spinner.
When I reviewed my code, I realized I could create better componentization to add the sorting function to other fields. Reviewing the Random User Generator API gave me the idea to make this an agent directory.
This version also uses the Country Flags API (https://www.countryflags.io/) to show the country flag for the agent's nation of origin.
Original File Structure:
├── App.css
├── App.jsx
├── components
| ├── EmployeeTable.js <--All the sorting logic was here. Very Limiting -->
| ├── Header.js
| └── TableRow.js
├── index.js
└── utils
└── API.js
Refactored File Structure
├── App.css
├── App.jsx
├── components
| ├── DataSort.js
| ├── EmployeeTable.js
| ├── HandleSearch.js
| ├── Header.js
| ├── LoadingIndicator.js
| ├── Modal.js <--Saving for future development-->
| └── TableRow.js
├── index.js
├── styles
| ├── Header.css
| └── SearchBox.css
└── utils
└── SortToggle.js
- Country Flags API
- Create React App
- Font Awesome Icons
- GitHub Corners
- Google Fonts
- NPM react-promise-tracker
- NPM react-loading-spinner
- Random User Generator API
- React Bootstrap
You can reach the author, Jessica Blankemeier, via github and email
Copyright 2020 - present Jessica Blankemeier. This project is licensed under the terms of the MIT license. More information is available at opensource.org/licenses;