naomigreen/v-tech-test

Frontend tech test

6# Virgin Atlantic ~ Hotel Search Results (Front-end)

Rules

You must write the application in Preact and TypeScript. Both are set up and ready to use inside this project.

In addition you should adhere to the following conditions:

1. The code must be your own work. If you have a strong case to use a small code snippet of someone else's e.g. a boilerplate function, it must be clearly commented and attributed to the original author
2. You must include any unit tests you think are appropriate - Jest and Enzyme are set up already
3. Give consideration to performance and accessibility. Lighthouse scores are high - please keep them that way
4. Code must be clear, concise and human readable. Simplicity is often key
5. We do not want to see how well you can use a UI framework. This is a test and we want to see what you can create

What it should do

Build the 'search results page' which connects to our holiday search API to display a list of holidays for a given location and departure date. Select what data items (example listed below) you think should be included on the page.

Add the ability to filter the results further by:

1. Price per person
2. Hotel facilities
3. Star rating

The call to the API is proxied for you via Parcel in the .proxyrc file and the request is being made on the /results route already.

Typings for the request body and response are provided in src/types/booking.ts file.

The endpoint will return data relating to the holiday packages available. The key properties you should be interested in are in the typings. Please note, our endpoint will return much more data, but you are free to ignore this!

Supplying your code

Please create and commit your code into a public Github repository and supply the link to the recruiter for review.

Thanks for your time, we look forward to hearing from you!

Running the app

npm run start to start serving the application. We are using ParcelJS to bundle to refer to their documentation for more details.

npm run test to run the unit tests. We have provided some passing tests already.

Feedback

The filter functionality works by creating an array object with the type and list of condition values. On each click of the checkbox the array of conditions increments and decrements according. The search results are then filtered against array. If all conditions are removed, the origin search results is return. If no results are available, the user is informed to remove some of the filters.

Given more time I would:

1. Fix the image import issues that are breaking unit tests.
2. Create a nav bar that would display filter and search components on tablet and mobile
3. Add image carousel to cards
4. Add hide/display dropdown on filter list
5. Add home page promo cards
6. Add loading image slide show
7. Add different result layouts