wearebenlabs / ui-coding-test

UI take-home project for candidates.

BEN UI Test

Welcome to the BEN take-home test!

To help you get started, we've provided a starter kit based on create-react-app and Storybook. If you have another starter kit or boilerplate that you prefer, feel free to use that.

We've preserved the original create-react-app README in README.create-react-app.md.

What the test is about

We'd like you to create a simple application that consumes a GraphQL API. The application should, ideally, use reusable and testable components that also live in Storybook.

We will be using exogen's GraphBrainz API that allows searching the MusicBrainz database.

We have loaded this API into Apollo Studio, allowing you to inspect the schema and make test queries easier. You can access it here: https://studio.apollographql.com/public/BENBrainz/variant/current.

How to submit it

Fork this repository, and when you're done, send us a link to your fork.

Requirements

Functional requirements:

• The user should be able to perform a search and see a list of matching artists.

• Clicking on a search result should show a details page with the following information:

  • The name of the artist.
  • The image of the artist.
  • Any aliases they have (if any).
  • The country of the artist.
  • Five top tracks with the associated play count.
  • Five similar artists.

• Clicking on a similar artist should show the details page of that artist.

• The artist detail page should have its own URL.

For a visual representation of the requirements, see this Figma design.

Optional requirements

• Use reusable components.
• Add one of the components to Storybook.
• Implement a simple unit test for said component.
• Implement as much as you can of the Figma design.

Tips

• Use the search { artists {}} query to find artists.
• Use the lookup { artist() {}} query to find information about an artist.
• Artists have both an id and a mbid (MusicBrainz ID). You'll want to use the mbid to be able to perform the lookup query.
• You'll have to use the lastFM field for top tracks, and similar artists.
• You'll have to use the discogs field for images.

Useful commands

• npm start - Starts the development server.
• npm run storybook - Starts Storybook.
• npm test - Starts the testing server.

GraphQL

At BEN, we use Apollo GraphQL Client, but you don't have to. Please use any framework you like.

If you're new to GraphQL, How to GraphQL is a great resource to get up to speed.

Notes

• You can use any 3rd party library or starter kit you want. What we've provided here is only for your convenience.
• This is not a CSS test, so you don't need to make the application look nice. Implementing the Figma design is an optional requirement.
• GraphQL libraries typically offer multiple ways of performing the GraphQL calls (components, function calls), and we don't have a preference.