This app was built for a Berkeley Coding Boot Camp assignment which required use of React and stateful components to build a table which allows users to filter and sort on at least one field. My Employee Directory presents an interactive table of employee photos and information featuring the cast of the hit comedy Parks and Recreation as seed data. Users can sort on any column by clicking the column heading, filter by birthday month, and click a button to refresh the data.
This version is actually a rebuild of my original project. In the first version, I used React Bootstrap for the style framework. As I gained more experience in React, I discovered Material UI and came to prefer that. I knew the decision to rebuild a Bootstrap app with Material UI encompassed extra work, but it was actually a great learning experience.
Getting Started | Demo | Built With | Authors | Visuals | Contributing & Tests | Contact
In the project directory, run:
- HTML5 & CSS
- Javascript
- React.js
- Create React App
- Material UI
- VS Code
- Node.js
- NPM
- Express.js
My first version of the assignment, built with React Bootstrap, looked nice but didn't have the sort and filter functionality required, and I was still wrestling to learn how to build stateful components. You can see the first version of my Employee Directory at the links below.
For questions or to discuss collaborations on this or other projects, contact the author via LinkedIn or GitHub as follows.
Jen Jayme
linkedin.com/jenjayme
github.com/jenjayme
- Special thanks to Jerome Chenette, UC Berkeley Coding Boot Camp and Trilogy Education Services for referring this project.
- Shout out to Fred Rodolfo for critical tutoring advice and support.
- Much love to Leslie Knope and her team from Parks and Rec for many hours of entertainment.