Thanks for taking the time to do our front-end / full-stack coding test. The challenge has two parts:
-
a task to create a basic flight results front-end site to show flight prices
-
some follow-up questions
You will be graded based on the following have been met:
We have placed a number of helpful todos inside the code (see index.js
and App.jsx
) to help get you started, the main items we are looking for are:
-
Fetch flight results from the provided
flights.json
and format them into client readable results.- You are not required to serve this separately from the dev server (i.e.
npm start
).
- You are not required to serve this separately from the dev server (i.e.
-
Use the returned data to display a page of results that matches the given design.
- Times should be displayed in 24 hour format.
We've provided a design for small-screens (480px). Don't worry about tackling larger breakpoints, but please make sure your solution looks good at 480px in portrait orientation.
The design shows a look and feel defined in our styleguide. Feel free to import our React 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, insert the airline id to the following url: https://logos.skyscnr.com/images/airlines/favicon/{id}.png
We'd like you to use the latest version of Angular, using the Angular CLI. On top of that, use whatever front-end libraries you feel comfortable with.
We've wired in Sass with our base stylesheet (bpk-stylesheets
) + mixins (bpk-mixins
) for you to get at -- see the Header
component for example use.
The provided flights
json
will return two collections of different items:
-
Itineraries - These are the containers 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, stops and airlines.
A good structure to represent trip options would be hierarchical:
Itineraries
Legs
To startup the frontend client run the following command.
npm start
- This will start the application for developmentnpm run build
- Will create a production optimised buildnpm test
- Will run the front end testsnpm run lint
- Will run the code through our linting rules
-
The zip file should be named {yourname}.zip, and should itself contain the full-stack-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.
Inspiration for the test format taken with ❤️ from JustEat's recruitment test.