Alibaba REST Countries API

Design preview for the REST Countries API with color theme switcher coding challenge

The challenge

Your task is to build a project using the provided design files, integrate with the REST Countries V2 API to pull country data, and display it as demonstrated in the provided designs. You will find both a mobile and desktop version in light and dark mode color schemes for each page. Note that the final implementation doesn't have to be pixel perfect and anything close to the photos will suffice.

Where to find everything

The design files, which are located in the designs section below, are in JPG static format. This will mean that you'll need to use your best judgment for styles such as font-size, padding and margin.

There are no assets for this challenge, as the country flags will be pulled from the REST Countries V2 API and you can use an icon font library for the icons.

There is a style-guide.md file, which contains the information you'll need, such as the color palette and fonts.

You can use any JavaScript framework/library on the front-end such as React or Vue, but we prefer if you use Vue for this project. You also have complete control over which packages you use to do things like make HTTP requests or style your project. Note that a clean project structure is a bonus.

Designs

Mobile

• Home Page
• Home Page [Dark]
• Detail Page
• Detail Page [Dark]

Desktop

• Home Page
• Home Page [Dark]
• Detail Page
• Detail Page [Dark]

You can also download all the design files zipped here.

Your users should be able to

• See all countries from the API on the homepage
• Search for a country using an input field
• Filter countries by region
• Click on a country to see more detailed information on a separate page (client-side routing)
• Clicking on border countries on the detail page should link the user to the detail of those countries

Project bonuses

• Bonus: Toggle the color scheme between light and dark mode without using any 3rd party libraries
• Bonus: Searching using the keywords Grmany or Grmny should also work
• Bonus: Add sort functionality for both Population and Country Name
• Bonus: Make all content server-side rendered and also have a fallback if the server-side render faces an error
• Bonus: Collect analytical data (in whichever way you prefer) using Google Analytics
• Bonus: Make sure styles are loaded whenever they're really needed. e.g., The styles for the details page don't load on the homepage
• Bonus: Make sure the ratio for the country flags is 4:3 or any other ratio you find suitable
• Bonus: Dockerize your application by creating an efficient Dockerfile
• Bonus: Add unit tests for components
• Bonus: Store the filters in the URL query strings and sync it with the component filter object
• Bonus: Add lazy loading for country images and list

Deploying your project

There are a number of ways to host your project for free. Please choose one and deploy it somewhere.

Sharing your solution

Please reply to the email you received with a link to a GitHub repository that contains your code. This repository needs a README.md file that explains everything we need to know (including a link to the demo)

Giving feedback

Feedback is always welcome, so if you have any to give on this challenge please email frontend[at]alibaba[dot]ir.

Have fun building! 🚀