Front-End Challenge: Airport Search

Welcome to the airport search challenge.

Your challenge is to create a small web application using the framework of your choice. It must be a JavaScript framework and follow the user story below.

User Story

As a user, I want to have an easy to use airport search based on the Nezasa airport search API. All important information about the found airports should be shown at least in textual form. More visual elements to represent the result set and easily understand the airports found is welcome to simplify the user’s life. I want to be able to search airports at least by name, city name, and IATA code.

Further Hints

UX and UI

Users should be able to visually see the match between their search query and the list of results. More visual elements to represent the result set and easily understand it are something that may help users too.

Tech Stack

Use the Nezasa search API and pick the framework of your choice to achieve the job. 

CORS

You may face a little challenge related to CORS. Hint: have a look at https://crossorigin.me/

API Details

You reach the airport API in our test environment at https://embed-staging.nezasa.com/api1/airports

Query Parameters:

  • countryCodes: comma-separated list of 2-letter country ISO-codes. Can be used to filter the list of airports. Example: countryCodes=us,ca
  • query: a text string that is used for the search, i.e., the IATA code like JFK. But also a free text like “new york” is supported.
  • useCOResponse: boolean. this is a flag for our API to get localized texts. Suggestion is to set it always to true.
  • contentLang: 2-letter ISO code of the content language to be used if useCOResponse=true. Only English (en) and German (de) is currently supported.

The API returns up to 100 results at once. There is no paging support. The semantics of the data returned should be straight forward. The field “obj” can be ignored for the sake of this challenge.

What We’ll Be Looking For

  • Use best practices of the tech stack you choose.
  • Have a complete solution, incl. readme that contains instructions how to run it locally.
  • Deliver on time. You define the delivery date. Send us the link to the GitHub repo.

How You Can Additionally Impress Us

  • Great user experience (intuitive, sweet design, great features)
  • Test coverage
  • Clean, organized, documented code

Good luck!