meenaambalam / employeedirectory_react_app

Employee Directory

Table of contents

1. Description

2. Install Guide

3. Usage

4. license

5. Screenshots

6. URL

Description

A Employee Directory using React JS. The UI is broken into smaller components, to manage component state, and respond to user events.

Installation Instruction

• The app gets created with "npx create-react-app" command, which creates all the nodes that is needed for creating React components.
• npm install bootstrap - for style and required bootstrap in index.js
• npm install axios - for API get
• link font-awesome css - for icon

Any specific details about React itself, please refer to the React-README for more details on the installation.

Usage

• When the user loads the page, a table of employees from API get is rendered.
• The user has option to search for any employee name. As they enter each letter in the search name input field, they will see the matching employees displayed from the previous employee list displayed.
• The user also has option to sort by employee name, age, and phone number.

License

Unlicensed

Credits

• w3schools.com - Table Styling
• Keiren Anthony - For guidance on deploying React App with Heroku
• Sammantha Sassenick - For guidance on the Sort logic

Screenshots

1. Page Load:

2. Search by Name:

3. Search by Name - Continued:

4. Sort by Name:

URLS:

GitHub Repository: https://github.com/meenaambalam/employeedirectory_react_app

Application URL: https://employeedirectory-react-app.herokuapp.com/