Front-End Test: Users List

user-list-test.md

Front-End Test: Users List

Background

Display a user list UI as below:

• https://www.dropbox.com/s/h68v90cd75bxoev/Screenshot%202015-07-29%2023.30.53.png?dl=0

Data should be loaded via a request to https://randomuser.me/ API.

When any user list row is clicked it should expand to show more detail:

• https://www.dropbox.com/s/mfdy6lus3oh0smq/Screenshot%202015-07-29%2023.35.54.png?dl=0

Tools

You can use any front-end framework of your choice (or Vanilla JS). But stick to modern tools like Vue, React, Angular, etc...

You should implement one requirement at a time. It doesn't matter how many requirements you implement in the limited period of time, what's more important is implement each requirement well.

Requirements

User List

• Display the list of users from randomuser.me API with the following information
  • Avatar image
  • Last name
  • First name
  • Username
  • Phone
  • Location
• Avatar should be rounded
• Rows in the list are striped (alternating colors)

User Details

• When user clicks on any one user list row it should expand and show the following additional information:
  • Firsn Name
  • Gender icon
  • Username
  • Registered date
  • Email
  • Location
  • Birthday
  • Phone
  • Cell
  • Bigger avatar image
• When user clicks on an expanded row again it should collapse
• When user clicks to another row the current expanded row should collapse

Part Two

In case you have extra time left here's Part Two of this test.