This page is a work in progress.You can help improve it. →

Who works here?

Over the last six weeks, you have learned many concepts about front-end development. To demonstrate how far you have come, I want you to build an Employee Directory. For Explorer Mode, this will be a site with three pages; view all employees, add an employee, and view an employee. Adventure Mode adds the features to delete and updating an employee.


  • Use react-router-dom to build a multiple page SPA
  • Create an API driven UI
  • Practice the skills you have learned in the past six weeks.
  • practice wireframing a new app


  • Create a new delta stack project
  • This this api to manage a company's list of employees. Check out Additional Resources for how to use the API.
  • Create a relatively unique name for your company. You will use this as your company key when calling the endpoints of the API


degit $GITHUB_USER/react-project-template EmployeeDirectoryFrontEnd

Explorer Mode

  • Create a react app with three pages and navigation between the pages.s

    • View All Employees page

      • This page should list all the employees for your company
      • Each employee should display the employee's full name, job title, full-time status, and profile image. All employees that are returned by the Get all employees endpoint,
      • Each employee item should link to the employee page for that employee. The URL should look like: /employee/:employeeId
    • An Employee Page

      • This should display all the details for an employee, The details page should list the following:

        • full name
        • birthday
        • hired date
        • job title
        • job description
        • full address (address, city and zip)
        • Contact information (email, phone)
        • Emergency contact info
        • PTO hours
        • profile image
      • The API endpoint to use will look like this:

    • Add an Employee Page

      • This should allow the user to add all of the fields for an employee.
      • The UI should let the user know that the person was added to the API successfully
    • Your app should be styled and responsive. Have fun with it.

    • Deploy your app

Adventure Mode

  • Add the ability to delete a user
  • Add the ability to update a user

Epic Mode

  • You app currently only works for one company, but now add the ability to change companies.

Additional Resources


  • This project is a typical weekend project, remember to plan, keep pace, and turn in however far you get on Sunday night.
  • A good milestone for today would be
    • to have a wireframe for each completed
    • react-router-dom set up, including a component for each page, and be able to click to different pages
    • an understanding of the API
    • some HTML and CSS completed.
  • The "profileImage" property is a URL to an image and should be treated as a string

How to use the API

API Documentations:

  • The use the API you will need to name your company for which you are making an employee directory. Your company name will serve as a unique key for your company. My fake company is called honeydukes. That means that I want to make an API call to get all of my employees, I will do a fetch to the URL.

That will return me a list of employees that are apart of the company.

If I want to get a different company's (Boogle) employees. I would do

For your project you will be using the same company for every request

  • To get an employee for that company, you will use the endpoint to get an employee. For me to get an employee of honeydukes, I would use the endpoint

A GET request to the above URL will get the employee with the id of 3, and that works for honeydukes.

  • To create an employee for a company, you will have to use the POST endpoint. If I wanted to add an employee for honeydukes, I will send a POST request this endpoint

with my data in this JSON format:

"firstName": "string",
"lastName": "string",
"birthday": "2019-06-06T16:48:57.256Z",
"hiredDate": "2019-06-06T16:48:57.256Z",
"isFullTime": true,
"profileImage": "string",
"jobTitle": "string",
"jobDescription": "string",
"phoneNumber": "string",
"address": "string",
"city": "string",
"zip": "string",
"state": "string",
"salary": 0,
"gender": "string",
"email": "string",
"emergencyContactPerson": "string",
"emergencyContactPhone": "string",
"emergencyContactAddress": "string",
"ptoHours": 0,
© 2017 - 2021; Built with ♥ in St. Petersburg, Florida.