A weekend challenge from the Makers bootcamp.
As usual please start by forking this repo.
You'll create an app that shows the latest news using the Guardian API. You'll find instructions on how to setup and use the API down this page.
Your app will grab all the headlines from the Guardian newspaper API and display them on a page. Clicking on a headline will link the user to the actual article page on the Guardian's website.
You'll write a single page web app. You'll write your code in frontend JavaScript, CSS and HTML. You won't use Ruby or backend JavaScript.
You're strongly encouraged to use the same tools and libraries you've been learning this week:
- Jest to write your tests
- The
jest-fetch-mockmodule (or similar) to mockfetchrequests (so you don't request the API when running tests!) - A build tool such as
esbuildto bundle files together
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 placeAs 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 headlinesAs a busy politician
So I can get a few more details about an important story
I can click a news article title which links to the original articleAs a busy politician
So I can search what I want to read about
I can specify a search query on the page and get articles matching this searchAs a busy politician
So I can quickly read through the essential of today's stories
I can see a summarised version of of the articleTo get a summary of an article's content, you'll need to use the Aylien API endpoint, which means integrating and calling another HTTP endpoint from a different API. This mean you'll need to first fetch articles from the Guardian API, then use the Aylien API to summarise the content — you'll need to use promises or callbacks to call both APIs and to handle the flow of control.
As a busy politician
Just in case my laptop breaks
I can read the site comfortably on my phoneAs a busy politician
So I make my news reading more fun
I can see whizzy animations in the app
You'll need to register and get an API key to use the Guardian API.
The Guardian API is severely rate-limited.
Please stub your tests so we don't exceed the daily limit. Otherwise, all requests will be rejected and everyone's apps will stop working!
Remember to mock fetch in your tests to avoid exceeding the API rate limit
If you wanted to get the latest articles from the Guardian API, this is the cURL request
you might make. Notice how it has a query parameter for api-key.
curl "https://content.guardianapis.com/search?q=&query-fields=headline&show-fields=thumbnail,headline,byline&order-by=newest&api-key=test"Also notice that the URL parameter q is empty — we can pass in a search string to filter
the returned articles, for example to search articles containing "America" in the title:
curl "https://content.guardianapis.com/search?q=America&query-fields=headline&show-fields=thumbnail,headline,byline&order-by=newest&api-key=test"The above request will return a response similar to this one:
{
"response": {
"status": "ok",
"userTier": "developer",
"total": 2324223,
"startIndex": 1,
"pageSize": 10,
"currentPage": 1,
"pages": 232423,
"orderBy": "newest",
"results": [
{
"id": "sport/blog/2022/feb/02/at-last-the-inventors-of-modern-skiing-have-something-to-cheer-dave-ryding",
"type": "article",
"sectionId": "sport",
"sectionName": "Sport",
"webPublicationDate": "2022-02-02T14:42:43Z",
"webTitle": "At last, the inventors of modern skiing have something to cheer: Dave Ryding | Andy Bull",
"webUrl": "https://www.theguardian.com/sport/blog/2022/feb/02/at-last-the-inventors-of-modern-skiing-have-something-to-cheer-dave-ryding",
"apiUrl": "https://content.guardianapis.com/sport/blog/2022/feb/02/at-last-the-inventors-of-modern-skiing-have-something-to-cheer-dave-ryding",
"fields": {
"headline": "At last, the inventors of modern skiing have something to cheer: Dave Ryding ",
"byline": "Andy Bull",
"thumbnail": "https://media.guim.co.uk/1e2ab1ced5da6ecf8d7fcca9f87d5398c1d22336/0_119_6480_3888/500.jpg"
},
"isHosted": false,
"pillarId": "pillar/sport",
"pillarName": "Sport"
},
{
"id": "business/live/2022/feb/02/oil-prices-climb-seven-year-highs-opec-meeting-markets-await-eurozone-inflation",
"type": "liveblog",
"sectionId": "business",
"sectionName": "Business",
"webPublicationDate": "2022-02-02T14:41:49Z",
"webTitle": "Ofgem to unveil new household energy bill price cap on Thursday morning – business live",
"webUrl": "https://www.theguardian.com/business/live/2022/feb/02/oil-prices-climb-seven-year-highs-opec-meeting-markets-await-eurozone-inflation",
"apiUrl": "https://content.guardianapis.com/business/live/2022/feb/02/oil-prices-climb-seven-year-highs-opec-meeting-markets-await-eurozone-inflation",
"fields": {
"headline": "Ofgem to unveil new household energy bill price cap on Thursday morning – business live",
"byline": "Julia Kollewe",
"thumbnail": "https://media.guim.co.uk/aee3b3b05ea2a37acdadc91095c163fd381eba4a/0_24_3500_2100/500.jpg"
},
"isHosted": false,
"pillarId": "pillar/news",
"pillarName": "News"
}
// ...
]
}
}- Guardian newspaper API homepage
- cURL man page
- Postman, a program to send and test HTTP requests
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent