DEV Community

Cover image for Vue.js assignments
Cihat Salik
Cihat Salik

Posted on

Vue.js assignments

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
Enter fullscreen mode Exit fullscreen mode

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
    }
  }
]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/

Top comments (6)

Collapse
 
santhos30910659 profile image
santhosh kumar

can i get the code of this assignment

Collapse
 
cihat profile image
Cihat Salik

yes you can, source codes are available on github

Collapse
 
nikilaperera profile image
Nikilaperera

how can i get the code?

Collapse
 
pratikgadhekar profile image
PratikGadhekar

Can i get this assignment.

Collapse
 
cihat profile image
Cihat Salik

yes

Collapse
 
nehabh profile image
ne-ha-bh

Demo: cihat.github.io/saypr-assignment/
Source Code: cihat.github.io/saypr-assignment/
given above both the url is same
please the the source code link