Getting up and Running:
- Clone this repository locally
- In the root directory of this repository, run
yarn
ornpm install
- After that, run
yarn dev
(ornpm run dev
) to start the proxy server and build the front-end (Note: it will watch for changes in/src
and recompile for you).
Instructions:
- The goal of this project is to update this basic web app to display some basic information about the countries of the world. The data for your page will be coming from the JSONs on http://country.io/data/, but will be accessible to you at
/api/[name of file]
, so for example,/api/names
will return this file: http://country.io/names.json. - You're welcome to use external libraries, but the goal of this assignment is to see your coding skills so use them sparingly. The vast majority of these features can be built using no libraries at all.
- Features to Add:
- Add a list to the page containing the names of all the countries return by
/api/names
. - Updating the value of the
continent
select will filter your list to just the countries that exist on that continent. - Add a dropdown with an option for each country. Selecting a country in the dropdown will remove the list of all countries and list the specific country's information:
- Full Name
- Continent
- Three-letter ISO Code
- Capital Name
- Phone Code
- Three-letter Currency Code
- Currency Symbol, if avaible, in the
currencies.js
file - Image of the country's flag (use https://www.countryflags.io/ for the image), if available
- Link to Wikipedia article (assume wikipedia url is based off country name in
/api/names
)
- In the list of all country names, clicking on an individual country's name will also remove the list of all countries and list the specific country's information
- Render a loading state while data is being fetched from the API
- Add a list to the page containing the names of all the countries return by
Extra Credit:
- Add pagination to the list of all countries. Each page should contain 20 items and users should be able to, at least, move one page forward and backward at any one time.
- Styling: make it look nice
- Separate the list of countries and the details of an individual country into two separate pages. The list view should be accessible at http://localhost:3000/ and the details view should be accessible at http://localhost:3000/[two letter code of the country], e.g. http://localhost:3000/us for the United States.
How to Turn it In:
- Push a completed assignment to a new repository on something like Github
- Send a link to the repository. If you would like to keep the repository private, give @cgatling access to the repository.