Frontend Assessment – Student Profiles
The first step of the assignment is to fetch data from this public JSON API, and present the information on the screen. The route to fetch the data is: method: GET url: https://www.hatchways.io/api/assessment/students You do not need any credentials to access the URL above. The goal of this part is to present the data as a list on the screen like below.
The second step of the assignment is to style the student data in the previous part using CSS. Replicate the style of the image and gif below as best as you can. If you are having difficulties replicating this part exactly and it is taking too long, move onto the next part. The future steps do not measure your ability to write css and HTML. Below is a picture of what it should like and a here is a link to a video to show you how the scrolling should work.
In this part, you are going to add a text input, where a user can filter the list of students by their name (both first and last name). On the next page there are a few images of what it should look like. Here is a video of the filtering in action.
In this part, you are going to make each student have an expandable list view, so that you can view all of their test scores. See the images below for what the view should look like when expanded. Here is a video as well for how it should look like.
In this last part, you will add a text field in the expanded view of each student to add tags about the student. Here is what it looks like (added a tag called new tag): Secondly, you will add another search bar to search for students based on tags. A stronger submission will be able to filter both names and tags at the same time. Here is a video of the tag searching in action. See the image on the next page for an example of filtering by tag:
Along with your submission, write a Readme.md file that: How to run the application: The command we should use installing your dependencies, e.g: npm install, pip install -r requirements.txt. You can assume we already have your programming language set up in our environment, as well as any common package managers (npm, yarn, bundle, pip, etc) The command we should use for actually running the application, e.g: npm start, java Main, Python manage.py serve A brief (three sentences) high-level description of your project, written for a non-technical person. This will help us assess how well you can communicate.
Please avoid posting your solution to a public repository. We understand that you may want to share projects you have worked on, but many hours go into developing our tools so we can provide a fair skills evaluation. If you would like to keep a similar version of the assessment on a public repository to showcase your skills, then please do the following: Remove all references to Hatchways in the assessment Do not use any Hatchways APIs (replace them with an API of your own)