Here's the user database in the following format:
[
{
"id": "1",
"name": "John Snow",
"description": "John Snow is a very kind person. He spends his whole life to guard the great wall and keep the monsters outside.",
"avatar": "http://i.pravatar.cc/150?img=70"
},
{
"id": "2",
"name": "Barack Obama",
"description": "Barack is the 44th president of the United States.",
"avatar": "http://i.pravatar.cc/150?img=69"
},
{
"id": "3",
"name": "Donald Duck",
"description": "It's just a duck.",
"avatar": "http://i.pravatar.cc/150?img=47"
}
]Create a web application with an index page where a list of users is rendered from the database (see the data above). The image and the name of the user are supposed to be included by the list item.
Please use React.js, the famous view library.
When the visitor clicks on a list item, the app should render the user page where all the information about the selected user is included. It's supposed to happen without reloading the whole application in the browser. The url of the page should represent the current state of the app. In this case, it means that the user id who you're currently watching comes from the url.
The way how you load the data is on you but loading it through a http connection is preferable to hard-coding.
Make sure that your code is syntactically correct and the behaviour of the components matches the requirements. We prefer using a linter and we love unit tests.
The design part is completely up to your imagination. :)
Share your solution on Github.
That'd be great if we could try it out manually via a simple command or you can publish it on the Internet :)..
Any questions popped in? Don't hesitate to reach me (tf@intellyo.com) for help.
Happy coding! 🐙 ☕