Build a page that contains a collection of popular whiskies, controls to filter these whiskies by their region, and an article that relates to this collection.
The JSON files provided (articles.json and whiskies.json) should be treated as if they were coming from an external API. The format can be assumed to be stable, but it cannot be modified.
Each item in the collection should follow the diagram provided (component.png) and should link to its own page, where it can be purchased. Each region also has a pair of colors associated with it, so you will need to apply these where appropriate. The article should simply link — in a new tab — to the website where the article was originally published.
You may use any technologies you wish to build this page, but approach this task as if you were writing code that will be used in production. So writing performant code, and following best practices in each language used. Note: Not minifying CSS and Javascript is ok for this test, but please explain why this is important.
- The JSON files (provided)
- The font Cabin, in regular and bold weights
- A collection of whiskey images (provided)
- A sample of the component to design to (provided)
- The colors used for each region (provided)
- The card background (provided)
- An article image (provided)