Note: This document 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
- This this api to manage a company's list of employees. Check out
Additional Resourcesfor 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
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 pagefor that employee. The URL should look like:
An Employee Page
This should display all the details for an employee, The details page should list the following:
- full name
- 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 a 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
- Add the ability to
- Add the ability to
- You app currently only works for one company, but now add the ability to change companies.
- 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: https://sdg-staff-directory-app.herokuapp.com/index.html
- 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
- 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,}
- Next, we start learning SQL. Read this as a preview