What is this project? Why did you make this project? How did you make this project?
Dunder Mifflin / Directory is an employee directory application that i built using the React.js library. When building this project i could think of no other employee base greater than that of my favorite television series: The Office. The employees i've included here are the cast members who played larger roles throughout this iconic series. Building this application was my first project using component based development and the React library, and i learned quite a bit in the process. This directory features a live search bar capable of returning results for first + last name queries and is case insensitve. There is no need for a search button as the results will be displayed to the user directly after they've typed. If a user doesn't exist in the directory, the results will display nothing. This application also has a dual button sorting functionality that will sort employees by first name in both an ascending and descending manner. This mobile-first application was built using a combination of custom CSS3 and React-Bootstrap and can be viewed on all of your favorite devices.
View the application here => Dunder Mifflin / Directory
Instructions and examples for usage + development details:
Log on to: Dunder Mifflin / Directory.
Simply search the first or last name of the employee you're looking to find additional information on and their card will auto populate as you type. Additionally, you can use the sorting buttons to toggle between ascending and descending alphabetical order if you prefer.
Data is being stored in a .JSON file which has an array of objects that represent each employee. The data for each employee is being dynamically generated from a single card component. The data and images were politely borrowed from the most thorough source for The Office known to mankind: Dunderpedia. Since i wanted custom crops for each card image, i used Photoshop to optimize images to fit my specific requirements. Traditionally, i've linked to absolute path URL's when dealing with .JSON.. During this project, I realized that adding my own local images within my own .JSON was a bit harder than i had anticipated. After reading much about Base64 in the past, and swearing i would never use it.. i finally caved in 🤓. After optimizing each image to fit the cards, i converted them all to Base64 using a wonderfully simple to use online tool provided by: Base64 Image Encoder
This project is covered under the MIT license.
Third party assets:
React.js => A declarative JavaScript library for building user interfaces.
+
Node.js => An asynchronous event-driven runtime built on Chrome's V8 JavaScript engine.
+
Base64 Image Encoder => Optimize your images and convert them to Base64 online.
+
React-Bootstrap => The most popular front-end framework. Rebuilt for React.
+
Bootstrap CDN => An open-source CSS framework directed at responsive, mobile-first web development.
+
GitHub Pages => Websites for you and your projects.
+
ESLint => A static code analysis tool for identifying problematic patterns found in JavaScript.
Shoot me an e-mail! => jonathan@jonathanschimpf.com
Check out more of my work here on => GitHub