The test should be done in React with the following external dependencies:
- React Router v4. For routing to the detail page.
- Material UI. To make it easier for you on the design part, you can use this library to create the elements needed. https://material-ui-next.com/getting-started/installation/
You could add more external dependencies, but they should only be the ones you really feel that you need.
The main screen contains:
- A big title which has a dynamic date field (the date selected on the right calendar)
- On the right side you have a calendar (the calendar can be done with or without external component)
- A list of articles for the selected dates. The articles can be fetched at this API https://newsapi.org/ (It has a free plan for developers).
- Below the calendar we have a few checkbox to filter the news. You can pick three news sources (from here https://newsapi.org/sources) and put them there so the list can be filtered by them. This should be done through the call to the API, instead of filtering the response.
The idea is simple:
We start with the calendar displaying the date of today.
The left list contains up to 10 (max) of the top news of today (https://newsapi.org/docs/endpoints/top-headlines)
You can change the date of the calendar and therefore the news displayed should change for that date as well. You could select more than one day (a period) in the calendar, like from 13/11/17 - 15/11/17. That should give you the top news between those two dates.
When changing the filters below the calendar the list of news changes accordingly. When selecting one or more of the three possible news resources the ‘all’ checkbox goes unselected. And if unchecking the three news resources the ‘all' should get checked.
When clicking on the ‘Read more’, the title or the copy of the article, it should change the screen to the article detail.
In the detail page we basically show the same information of the selected article but expanded.
There is also a back arrow to go back to the main screen.
My app is deployed on Heroku
| Frontend | Backend |
|---|---|
| React.js | Node.js |
| Redux.js | Express.js |
to run the code locally follow these installation instructions:
- install Node.js;
$ git clone https://github.com/suddenlyGiovanni/coding_challenge-appico.git
$ cd coding_challenge-appico
$ npm install
$ cd client
$ npm install
$ cd ../server
$ mkdir config
$ cd config && touch secrets.json{
"newsApiKey": "XXXXXXXXXXXXXXXXX"
}$ npm run development- e-mail: [email protected]
- Twitter: @superspacezova
- LinkdeIn: /giovanni-ravalico
- Facebook: /RavalicoGiovanni
MIT © suddenlyGiovanni Free Software, Hell Yeah!