Vue 2 app that implements music catalog discovery using the Deezer API.
npm install
to install dependenciesnpm run watch
to run webpacknpm start
to start the app atlocalhost:5000
You can also run npm run build
to build the app for production.
Performance 98
Accessibility 100
Best Practices 93
SEO 92
-
Deezer doesn't enable CORS and Axios doesn't support JSONP, so I call Deezer's API server side and expose it to the client
/search/artist?q=:q&limit=10 /albums/:artistId /tracklist/:albumId
-
The
Albums
component uses the slot outlet exposed byHorizontalScroll
to add its content withoutHorizontalScroll
having to know about the structure of an album data item. This works by binding the item to the slot element in the child component which makes slot props accessible in the parent scope. -
Application state lives in a Vuex store, but passed down using props to user interface components to avoid coupling them to the application data format.
-
Filters such as
duration
are registered globally since they're likely to be used across application components. -
Album covers are lazy loaded upon scrolling using the Intersection Observer API. Since it is not supported in all browsers, I added a polyfill. I used a tiny base64 transparent GIF as a placeholder.
data:image/gif;base64,R0lGODlhqgCqAAAAACH5BAEAAAAALAAAAACqAKoAAAICTAEAOw==
-
I used content placeholders and a pulse animation to indicate progress on asynchronous data operations.
@keyframes pulse { 0% { opacity: 0.75; } 50% { opacity: 1; } 100% { opacity: 0.75; } } animation: pulse 1000ms linear infinite forwards;