logo
Logo

Frontend Engineer

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.
    • Lazy loading using an infinite scroll should be used to display additional countries as a user scrolls down.

  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 4 filters - Region, Language, Population and Area.
    • These filters must be displayed on the left of the main page in a vertical strip one below the other.
    • A user may use one or more of these filters. The results on the page should be updated accordingly.
    • Ensure filters can be used in tandem with a keyword search.
    • Ensure filters are retained if one returns back from a details page.

  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).
    • The app must also be accessible. Components like the search dropdown, filters, and other interactions should be accessible via screen readers and keyboard navigation.

  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.

  3. Performance:

    • Optimize the app for smooth interactions and transitions, using animations as needed.
    • Ensure the search experience is efficient and as smooth as it can be.

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:

  • Framework: You may use a popular web framework for building this app. We prefer ReactJS. We also prefer Typescript.
  • 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!