week 06 - day 03 - Who works here? -

[rh1456]

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.

Objectives

• 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

Requirements

• 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

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, https://sdg-staff-directory-app.herokuapp.com/api/\${companyName}/employees.

  • [ ] 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:[https://sdg-staff-directory-app.herokuapp.com/api/${companyName}/employees/${employeeId}].l

  • [ ] 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

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

TIPS:

• 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.

https://sdg-staff-directory-app.herokuapp.com/api/honeydukes/employees

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

https://sdg-staff-directory-app.herokuapp.com/api/Boogle/employees

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

https://sdg-staff-directory-app.herokuapp.com/api/honeydukes/employees/3

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

https://sdg-staff-directory-app.herokuapp.com/api/honeydukes/employees/

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,
}

Preview.

• Next, we start learning SQL. Read this as a preview

[rh1456]

https://github.com/rh1456/employee-directory