Create a REACT single-page application.
-
UsersTable - The home page is a table of users, which shows data from https://jsonplaceholder.typicode.com/users, with the following columns: name, email, company name.
-
Add the ability to filter the table by name and email.
-
UserPosts - Upon selection of user display a list of posts posted by the selected user on the right side of the screen (get data from https://jsonplaceholder.typicode.com/posts - see also Filtering resources).
-
NewPost - Add Create post button to UserPosts that will open a dialog where user can enter details to create the post (see Creating a resource in https://jsonplaceholder.typicode.com/guide/ - note that resource will not be really created on the server but it will be faked as if) , Please add validation to the dialog. After post is created the list of posts for the user (UserPosts) will be updated with new post.
Bonus points for:
-
Error handling when fetching data from the API , what should the user get ? what do you do as the system in such case ?
-
A loading indicator while fetching data from the API.
-
The application to be responsive and look good on both desktop and mobile.
-
Add search box which will filter the table by name or email.
- Try to produce a professional looking page so use a component library such as https://material-ui.com/, https://ant.design/, or anything else you like.
- Create an easy to read code, and ensure you do understand your own code, since our interview will focus on that code
- Structure the project in a way that promotes scalability and maintainability
- Make sure the project is built o.k. and no debugger and development logs are left in the code and no errors in the console.
- Use comments in the code to explain the things you do there
- Make use of latest React features like hooks