Assignment Details

Build a single page app that displays the profile of 10 users (the data is obtained from an API endpoint)

The idea of both the assignments is to build a single page that displays the profile of 10 users (the data is obtained from an API endpoint). Each user's profile contains a avatar picture, name, email, phone, address, website and company name.

API endpoint for users data

The schema of the data received in the response is:

Method: GET
URL: https://jsonplaceholder.typicode.com/users

The schema of the data received in the response is:

// Array of 10 users
[
  {
    id, // The user's id
    username,
    name,
    email,
    phone,
    website,
    address: {
      street, // Address line 1
      suite, // Address line 2
      city,
      zipcode
    },
    company: {
      name, // The name of company where the user works
    }
  }
]

API endpoint for users' avatar pictures

You will be using Avatars by DiceBear. They provide a free HTTP API to create unique avatar images based on any string we send as a query parameters. Each string generates a unique image. You will use the username to generate a unique avatar for each user.

The URL for the GET endpoint is:

https://avatars.dicebear.com/v2/avataaars/{{username}}.svg?options[mood][]=happy

The {username} in the URL is the placeholder for the user's username. It should be dynamically replaced by the username received from the user's API endpoint. For example, if the username for one of the users is psamd then the URL for the avatar for this user will be:

https://avatars.dicebear.com/v2/avataaars/psamd.svg?options[mood][]=happy

Loading Indicator

Upon opening the app a loading indicator is displayed until the data is fetched from the API and is ready to be displayed. The source code for the loading indicator can be obtained from http://tobiasahlin.com/spinkit/.

1. Ability to create new react projects using Create React App
2. Understanding of JSX
3. Passing props to components
4. Understanding of stateful and stateless Components
5. Basic understanding of state management and component lifecycle 6. methods
6. Fetching data from an API endpoint
7. Conditional rendering
8. Working with lists

Demo: https://cihat.github.io/saypr-assignment/
Source Code: https://cihat.github.io/saypr-assignment/