Communicating with APIs allows developers to work with microservices and with vast databases to build useful tools and relevant information quickly and easily. It is possible to build utilities, games, infographics, and more. Without having to create and curate the data, developers can integrate, display, and analyze social media and large data sets.
In this example, Awesome Startup is a distributed company with employees working all over the world. They need a smart way to for employees to share contact information with each other. This project uses the Random User Generator API (https://randomuser.me/) to grab information for 12 random “employees,” and use that data to build a prototype for an Awesome Startup employee directory.
This project will request a JSON object from the API using fetch, and parse the data so that 12 employees are listed in a grid with their thumbnail image, full name, email, and location. Clicking the employee’s image or name will open a modal window with more detailed information, such as the employee’s birthday and address.
The user directory is structured and styled so that it matched the provided mockup, including displaying the users in a grid or table and a hover state to the rows of the user table.
I then used fetch to get and display 12 random users from The Random User Generator API. Using photos and information that the API provides, I displayed 12 users, along with some basic information. I then created a modal window that popped up when any part of the user’s row is clicked. Then also added a way to make sure there’s a way to close the modal window.
To meet the 'Extra Credit' criteria, I added a way to filter the directory by name, by requesting a random user nationality that only returned data in the English alphabet.
I also added a way for users to move 'left' and 'right' between employee detail windows when the modal window is open.
I'm always open to hearing about freelance product design and development projects (or if you just want to say hi!)