Skyscanner Full-Stack Recruitment test

Thanks for taking the time to do our frontend / full-stack coding test. The challenge has two parts:

1. a task to create a basic flight search frontend, and backend client that speaks to our 'live pricing' api

2. some follow-up questions

---

Feel free to spend as much or as little time as you'd like, as long as the following have been met:

• Your implementation works as described in the task, retrieving results from our API.

• Your solution looks like the provided design.

---

NB: To get an API key and for submitting your solution, please contact the Skyscanner hiring person or member of staff who assigned you the test.

Task

• Use our 'live pricing' API to find return flights from Edinburgh to London, departing next Monday and returning the following day.

• We've provided a basic api client in Node.js - see the api section below. You can build this out, copy from it, or roll your own.

• Use the returned data to display a page of results that matches the given design.

Design

We've provided a design for small-screens (480px). Don't worry about tackling larger breakpoints.

Don't worry about implementing menu functionality or sorting/filtering/alerting - these controls can be display-only.

The design shows a look and feel defined in our in-progress styleguide. Feel free to import our bpk- npm components into your project, or lift colours and things directly from the styleguide pages. We also have some auto-generated sassdoc that may help.

NB: You don't have to use our styleguide or our components -- picking colours from the image and rolling your own css to save time is absolutely fine.

For the airline logos, try the favicon size per code: e.g. https://logos.skyscnr.com/images/airlines/favicon/EZ.png

Client implementation

We'd like you to use React. On top of that, use whatever frontend libraries you feel comfortable with.

We've set you up with a build based on Facebook's create-react-app. To run the client:

• npm install (once)

• npm run client to start the client development build at http://localhost:3000

We've wired in SASS with our base stylesheet (bpk-stylesheets) + mixins (bpk-mixins) for you to get at -- see the TopNav component for example use.

API implementation

We're hitting a real Skyscanner API in this test, and have provided a basic - but incomplete - Node.js client on top of it to make things easier for you.

The server.js file starts an Express server with a couple of routes. To run the server:

• APIKEY=<key> npm run server from the command line, it listens at http://localhost:4000

NB: If you'd prefer not to use Node, that's fine. Feel free to copy from it, or roll your own.

The underlying Skyscanner API documentation is available here and a test harness is provided for you to try queries out.

You can use the Skyscanner sky location schema, and the EDI-sky and LOND-sky placenames in your query.

NB: You should ensure the http://localhost:4000/api/search route accepts parameters from your frontend, and returns results to the frontend in an appropriate format.

The API will return collections of different items:

• Itineraries - These are the container for your trips, tying together Legs, and prices. Prices are offered by an agent - an airline or travel agent.

• Legs - These are journeys (outbound, return) with duration, and carriers¹. These contain one or more Segments and stops.

• Segments - Individual flight information with directionality.

A good structure to represent trip options would be hierarchical:

Itineraries
  Legs
    Segments

Your key will be rate-limited to ~5 queries per minute.

Submission Guidelines

• Please submit your program by sending a zip file to your Skyscanner contact.

• The zip file should be named {yourname}.zip, and should itself contain the frontend-recruitment-test project folder with your submission.

• The zip file should contain the FOLLOW-UP.md file with answers to the follow-up questions.

• The zip file should not include the node_modules folder.

• Please let your Skyscanner contact know when you've uploaded your solution.

---

[1]: If there are multiple carriers provided, please use the first carrier

Inspiration for the test format taken with ❤️ from JustEat's recruitment test.