This project was generated with [Create-React-App]
- Users should be able to search for artists. For every artist found show the artist's picture and the number of fans they have. On bigger screens, with more available space, also include the total number of albums.
- Clicking/tapping the artist must allow users to see basic information about them, like its total number of fans. Also show its top 5 tracks along with a list of all their albums. For every album include the year in which it was released.
Be sure to follow best practices and to demonstrate the skills you've learnt to develop a modern web app. Keep in mind that our team intends to add more features to your code and that they expect this to be quick and easy for them to do.
We encourage you to add more assets as necessary and to enhance content with colour and imagery, wherever it makes sense, so users may enjoy using your app. This is equally important to us when reviewing your assessment.
Please make sure that all unit tests and linting are passing as this can affect your marking.
You can also deploy your application to a free hosting service such as Heroku or Github Page using CI/CD pipeline as bonus point.
Most browsers enforce the same-origin restriction which may prevent HTTP calls to the Deezer API. To circumvent this problem and to enable CORS (Cross-origin resource sharing) in your app, you can use this two solutions:
- Simply forward requests through a public CORS proxy that adds the Access-Control-Allow-Origin header to any OPTIONS pre-flight response. For example, when using the https://cors-anywhere.herokuapp.com/ proxy, then a call intended to https://api.deezer.com/search?q=eminem must become a call to https://cors-anywhere.herokuapp.com/https://api.deezer.com/search?q=eminem in your code. Do not forget to activate Heroku permission to use the proxy by clicking on the button Request temporary access to the demo server from this URL https://cors-anywhere.herokuapp.com/corsdemo
The project was bootstrapped with React Create-React-App using this command:
npx create-react-app musicdb-app
Deezer API reference https://developers.deezer.com/api
EXAMPLE
Below are some illustrations to help inspire your implementation.
Artists view [Desktop]
https://raw.githubusercontent.com/DVT/musicdb-app-angular/master/wireframes/artist-web-view.png
Artists view [Mobile]
https://raw.githubusercontent.com/DVT/musicdb-app-angular/master/wireframes/artist-mobile-view.png
Artist details view [Desktop]
Artist details view [Mobile]