logo
Logo

Frontend Engineer - Emerging Talent

For first-time professionals

Build a Beautiful and Intuitive Country Explorer

We are excited to see your front-end development skills in action through this challenge. We're looking for engineers who are not only great at coding but also have an eye for design and an appreciation of the details that make great user experiences. Your task is to build an interactive and well-designed web application that helps users explore countries around the world.


This is more than just a coding challenge—it's an opportunity to show off your design thinking, code cleanliness, and performance optimization skills. The experience you build should be seamless, intuitive, and visually engaging.

What to expect:


  • Effort: It should take a total of 2-4 hours to cover all requirements.
  • Relevance: The skills applied will be required for this role.
  • Feedback: Thorough code review and design feedback for each submission.
  • Iterations: The chance to improve your submission based on feedback.
  • Discussion: An exploration of how this was built and the choices made.

The Challenge:

Country Explorer is a web application that allows users to search for and display information about any country. We encourage you to get creative with the design and think about how to make the experience both aesthetically pleasing and user-friendly.

Functional Requirements:

  1. Landing Page:

    • Use the REST Countries API (https://countrylayer.com/) for fetching country data.
    • The main page should display a list of all countries with each country represented as an interactive card showing the name and flag.
    • This list should be paginated. You may choose your own page size as per your design choices.
    • A “Show more” interaction should load the next page below the already displayed list of countries.

  2. Search:

    • The main page should feature a search bar at the top to search for countries via API.
    • When a keyword is typed in the search input, up to 5 results should be displayed as suggestions in a dropdown attached to the search input.
    • The dropdown will have a “View all” interaction to show all matching countries as cards in the same page.
    • Ensure search results update dynamically as the user types the query.

  3. Details Page:

    • When a country card is clicked, navigate to a details page that shows rich information about the country.
    • This page should be hosted in its own route.
    • At a minimum, display the following information - Name, Top Level Domain, Capital, Region, Population, Area, Languages.
    • The layout should be intuitive, offering a visually appealing and easy-to-navigate experience.
    • Include a "Back" link to return to the search results page without losing the original results.

  4. Enhanced Filtering:

    • Allow users to filter the results in the main page by using 2 filters - Language and Region.
    • Only one of the filters may be used at a time.
    • Ensure filters can be used in tandem with a keyword search.

  5. Favorites:

    • The main page should display a section on the right as a vertical strip with the user’s favorite countries.
    • Each detail page should have a prominenticon that is used to mark a country as a favorite.
    • Each user can have up to 5 favorites.
    • The favorites section should only be visible if there were any favorites marked by the user.
    • You may use the browser local storage for tracking favorites.

Non-Functional Requirements:

  1. Design and User Experience:

    • The web app must be responsive and look great on devices of all sizes (from mobile to desktop).

  2. Code Structure:

    • Write clean, modular code. We will look at how you structure your code for reusability, clarity, and maintainability.
    • Your code should include meaningful comments that help us understand your thought process and implementation.
    • Ensure the application handles and reports errors meaningfully.

Quality and Testing Expectations:

  • Submit your solution with unit tests to verify the functionality of your JavaScript code, especially around API interactions and dynamic updates.
  • Include a testing framework of your choice (e.g., Mocha, Jasmine, etc.) and instructions on how to run these tests.
  • We value thorough tests that handle various edge cases, such as failed API requests, empty search queries, etc.

Languages & Tools:

  • HTML, JavaScript, CSS: This app must be written using vanilla JavaScript and CSS. We want to see your raw skills in front-end development, so no web frameworks (React, Angular, Vue, etc.) or libraries (like jQuery) should be used.
  • API Calls: Use the native Fetch API for all server communication.

Submission:

  1. Write to us at thrive@strivelabs.ai with the subject line - “Country Explorer Challenge Submission - [Your Name]”.
  2. Submit your code via a GitHub repository (or any other version control repository), along with a README containing:
    • Setup instructions.
    • Details of any interesting design decisions you made.
    • Steps to run your tests and ensure everything works as expected.
    • Ensure the app works across major browsers (Chrome, Firefox, Safari) and is responsive on various devices. If there are any exceptions, mention them in the README.
  3. Include a rough estimate of the time you spent on the project.
  4. Include a CV or a link to your profile to help us learn more about yourself.

This challenge is a chance to express your creativity and demonstrate your ability to build well-architected, beautiful front-end systems. We’re looking forward to seeing how you approach this problem and how your design choices reflect your personal style!