This task is for demonstrating your understanding of HTML, CSS, Javascript, React & related libraries.
If you’re doing the front-end only, you must use the https://countries.trevorblades.com endpoint for GraphQL API.
Preferred libraries:
styled-componentsfor stylingapollo-clientfor consuming GraphQL APIreact-routeror any alternative to implement routing
Instructions:
- Create a
create-react-apprepo. - Add a router with routes:
/- for displaying basic links for the other routes/countries- for requesting GraphQL API and rendering the list/countries/(:code)- for requesting GraphQL API and rendering the properties of a continent
- Design is totally by you.
- Countries list at
/countriesmust contain the list of countries and the languages spoken in that country. Both in English and native languages. It should also contain the continent it is located in. /countries/(:code)must render the currency and a area code (phone) of that country.- Routes must be fully loadable with a direct link.
/countries/CImust render the page for Ivory Coast, for example. - End.