[please check the package.json for the dependencies and installation requirements
navigate to index.js and open in your terminal
npm start
this will display the app with the news from the mockNewsData.json (20th July 2022!)
to display todays news, this will require your own Guardian API key (available online)
enter this into .env.production file]
(A DFA Challenge, February 2023)
A single page application in React that send requests to the Guardian API to get Headline and Article data and display them.
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
Just in case my laptop breaks
I can read the site comfortably on my phone
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.
- Guardian newspaper API homepage
- cURL man page
- Hurl, a web interface for sending HTTP requests
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.