This task should be completed to be considered for the Front End Developer position at Wiser. The task will test your knowledge of JavaScript (ReactJS), styling and ability to accurately translate design files into code.
Clone this repo. When you have completed the task, please zip up the folder, and email it to [email protected] to let us know!
The starter code for this task has been generated using Create React App. Run commands npm i to install the app, followed by npm start to run the app in development mode.
Build an image gallery by fetching data from the NASA Astronomy Picture of the Day API.
There should be a route for the Home component and a dynamic route for the ImageDetails component.
- Display 6 random images from the NASA APOD API, along with their corresponding titles.
- Each image displayed on the
Homepage component should be clickable. - On click of each image, a dynamic route should generated. The route should navigate to the
ImageDetailspage component, which should display theurl,titleandexplanationof the image that was clicked on. - There should be a back button to return to the home page.
- The
ImageDetailsroute path should use thetitleof the image that was clicked. For example in the above design, the path would be/image/spiral-galaxy-ngc-1232, opposed to a generic number ID such as/image/1. - Sometimes the APOD API returns a video instead of an image. If this happens, the application should display the video thumbnail as an image, instead of the video.
- Add text that reads "Loading images" to the
Homecomponent. This text should dissapear once the images are displayed.
- Please ensure this task is built using the ReactJS library.
- Feel free to install any additional packages that you feel are necessary.
- The app should be responsive for desktop and mobile devices.
- The app should be cross-browser compatible, the latest versions of Safari, Firefox and Chrome is fine.
If you have any questions, please feel free to email [email protected].
Good luck! :)