With willTunes, you can search for an artist at the main page, and once you've found the artist that you've been looking for, you can go the artist page by clicking on it. You can also play/pause the preview of a track, besides go to the featured artist page.
- Yarn (or NPM)
Clone this repo, install the dependencies and start the app.
yarn && yarn start
To run the tests:
yarn test
- Search for an artist
- List the albums of the artist, including: Album name and its image
- List the tracks of the albums, including: Track name, duration, album image and artist
- Play/Pause the track*
- List featured artists
*To play a track preview, it is required to have the proper MP4 audio codec on your OS
- Responsive design
- Production deploy (with Zeit Now)
- Tests (with jest + react-testing-library + redux-saga-testing)
- SASS & Styled-components design: No UI framework (such as material-ui) have been used
- Developed with TypeScript
- Debounce on search
- Usage of
useMemoanduseCallbackto prevent unecessary re-renders - Usage of nullish coalesce operator
- "Mobile first" mindset
- All hooks: No classes have been used
- Redux-Saga middleware
- All typed redux store
- ESLint
Since the API doesn't provide all necessary information, some fake data have been used in order to fill these spaces:
- Artist image: Instead of the original artist image, the app gets a random image from Picsum
- Artist bio: Some random quotes from Kanye West
- Artist origin: A random country
- Artist born date: A random date
- Editors' notes for the albums: Some random quotes from Kanye West
- Featured Artists: Random artists from the iTunes API
These fake data does not have any relation with the real artist or album.
- The user can play more than one track at the same time
- At mobile devices, the arrow at the links may be rendered as an emoji
- Artist cover image doesn't change on navigating between pages
Made with ❤️ by William Rozin Gaspar