For this task, you will be building a basic react native app (managed by expo). The app would contain three main screens, and would also fetch data from an external api. Your work should be in a github repo with a README.md on how to run the app. No unit testing would be required.
Create a react native app with expo: https://docs.expo.io/#quick-start For navigation, please use react navigation: https://reactnavigation.org/
The Harvard Art Museum supplies an api for records related to art of various forms (link here: https://github.com/harvardartmuseums/api-docs). Use axios (https://github.com/axios/axios) to retreive data from this api –– the data is then displayed on the mobile application. Redux is a recommended library for managing application state in react and react native (https://redux.js.org/).
You should use the API KEY that has been given to you (https://github.com/harvardartmuseums/api-docs#curl).
You can configure the splash screen: https://docs.expo.io/tutorial/configuration/
The home screen loads in the data from the api and renders it in a scrollable grid view. From the image above, the title, primaryimageurl (if it exists), displayname of artist and culture of artist is shown for each art.
The necessary data can be gotten from an art record in the records list:
title:titleprimaryimageurl:primaryimageurldisplayname:people[i]["displayname"]whereiis an index in thepeoplelistculture:people[i]["culture"]whereiis an index in thepeoplelist
The detail screen displays more information for a specific art record as shown in the images above. The Click for more info button should open the default mobile browser of the user and direct them towards the url link. The green tick or red X is indicative of the verification of the art record. For verification you can use the verificationlevel field.
You should be able to navigate back to the home screen.
The necessary data can be gotten from an art record in the records list:
medium:mediumdivision:divisiondisplayname:people[i]["displayname"]whereiis an index in thepeoplelistprovenance:provenanceurl:urlverificationlevel:verificationlevel(if 0 then art record is unverified else art record is verified)
Take care of user loading state in the application. What does the user see when data is being fetched?