The purpose of this App is to fetch articles from The Guardian Open Platform API https://open-platform.theguardian.com/.
-
Results must be narrowed down to selected category (section) and / or the search phrase entered by the user
-
Results must be paginated - with the maximum of 10 articles per page
-
Articles presentation can be of any form - but single article must contain date, title and its category (section)
-
App UI must consist of 2 parts:
- Sidebar, with:
- Search field
- Submit button
- "All articles" (resets category and search phrase constraint)
- "All sections" (resets category constraint, leaves the search phrase constraint)
- Available categories (sections) (on Desktop)
- Available categories (sections) and "Sections" button (on Mobile)
- Search results
-
On mobile - available categories (sections) should be displayed as a toggleable dropdown with the "Sections" button
-
On desktop - available categories (sections) should be displayed in sidebar on the left side of the page, together with search field
-
The most critical App features should be covered by tests.
-
This project should be made without use of UI libraries.
- axios
- jest
- lorem-ipsum
- react
- react-router
- react-testing-library
- sass
- typescript
A createHashRouter was used instead of createBrowserRouter due to the known issue with GitHub Pages, as described in the Create React App Documentation:
"GitHub Pages doesn’t support routers that use the HTML5 pushState history API under the hood (for example, React Router using
browserHistory). This is because when there is a fresh page load for a url likehttp://user.github.io/todomvc/todos/42, where/todos/42is a frontend route, the GitHub Pages server returns 404 because it knows nothing of/todos/42."
This App is using public API key published in The Guardian Open Platform Documentation.
The private API key can be obtained through The Guardian Open Platform Access website.
