You'll test-drive a single page application in React that send requests to the Guardian API to get Headline and Article data and display them.
You'll use React's toolchain to take care of serving your HTML, CSS and JavaScript files.
Some of these stories will need decomposing if they seem too large.
As a busy politician
So I know what the big stories of the day are
I can see all of today's headlines in one place
As a busy politician
So that I have something nice to look at
I can see a relevant picture to illustrate each news article when I browse headlines
As a busy politician
So that I can get an in depth understanding of a very important story
I can click a news headline to see a summary and a photo of the news article
As a busy politician
So I can get a few more details about an important story
I can see click a news article summary title which links to the original article
As a busy politician
Just in case my laptop breaks
I can read the site comfortably on my phone
The Guardian and Aylien text summarisation APIs are severely rate-limited.
Please stub your tests so you don't exceed the daily limit. Otherwise, all requests will be rejected and your app will stop working!
Please stub your tests to avoid exceeding the API rate limit
If you wanted to get the content of an article from the Guardian API, this is the cURL request you might make. Notice how it has a query parameter for api-key.
# Search endpoint
curl "https://content.guardianapis.com/search?q=coronavirus&show-fields=body&api-key=API_KEY"# Single Item endpoint
curl "https://content.guardianapis.com/world/2021/mar/22/link-between-diabetes-and-coronavirus-infections?show-fields=body&api-key=API_KEY"Mock Data - contains a request to the Guardian API with fields selected that will help you with the challenge. The actual request made was to:
You will need to replace INSERT_YOUR_KEY_HERE with your own Guardian API key. Use this data whilst developing, serving it from json-server - it will help on the request rate limit in the API.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
The initial idea to comply with the Acceptance Criteria is to create a component in which the photo and the headline of the news are displayed. Once the functionality of the app is verified and passes the relevant tests, CSS styles will be applied to make the app visually attractive.
The news that will be used will be extracted from a test json file, where there will be data that simulates the structure obtained through The Guardian API
1 - check that the app makes the data call. 2 - check that the data request returns the right data. 3 - check that in case the right data is not returned, the correct error object is returned. 4 - display "News are loading" when there is no data to display. 5 - display the feed of news when there are news.