For this challenge, you will create an awesome React App which fetches the "Picture of the day" from the NASA open APOD API
.
Create an app from scratch, consider your best UX knowledge for the UI design; it is up to you. Set up eslint and prettier.
Recommendations We recommend you consider the following elements that should contain the app:
- Title
- Date Picker
- Main section with the image
Requisites
- Don't use UI Libraries. You have to build your styles. You can use styled-components such as SASS, LESS, or CSS. You are free to use the approach that makes sense to you.
- Fetch API Calls from the
NASA APOD
using your API KEY. - Publish your app using free services such as Github pages, Netflify, or Heroku.
- Share the URL on the PR.
- Use the React Testing Library and Jest tools to add tests.
- Use functional components and React Hooks as possible.
Follow these steps to complete this challenge:
- Create a new branch with the name challenge-2 from this repository.
- Complete all the Acceptance Criteria (AC).
Acceptance Criteria | Description | Points for Completed | Points for Automated |
---|---|---|---|
1 | When the user enters the app, the app should show the Picture of the Day. | 10 | 10 |
2 | When the user selects a specific date with the format YYYY-MM-DD, the app should show the picture of the day for the given date. | 20 | n/a |
3 | The app should be responsive. | 20 | n/a |
4 | When the app fetches the API, and there is an unexpected error, the app should show a message: "There was an error, please try again." | 20 | n/a |
5 | When the user selects an invalid date value and clicks on the show button, the app should show a message error from the API response. | 20 | n/a |
The bonus is a plus that helps us know you better and increments your final score.
- Automated Test for Second AC:
10
points. - Automated Test for Third AC:
10
points. - Automated Test for Fourth AC:
10
points. - Automated Test for Fifth AC:
10
points. - The app is responsive:
20
points.
If you have any questions about this challenge, feel free to ask on the Slack channel ASAP.