https://github.com/melhosseiny/tidal

Vue 2 app that implements music catalog discovery using the Deezer API
https://github.com/melhosseiny/tidal

deezer-api music tidal

Last synced: 3 months ago
JSON representation

Vue 2 app that implements music catalog discovery using the Deezer API

• Host: GitHub
• URL: https://github.com/melhosseiny/tidal
• Owner: melhosseiny
• Created: 2019-05-13T21:00:58.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-12-22T21:58:08.000Z (over 5 years ago)
• Last Synced: 2025-01-23T06:29:22.263Z (over 1 year ago)
• Topics: deezer-api, music, tidal
• Language: Vue
• Homepage: https://shrouded-lowlands-75769.herokuapp.com/
• Size: 2.48 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Tidal Discovery

[Vue 2](https://github.com/vuejs/vue) app that implements music catalog discovery using the [Deezer API](https://developers.deezer.com/).

![App screenshot on desktop](/static/tidal-screenshot-desktop.png)

[Live demo](https://shrouded-lowlands-75769.herokuapp.com/)

## Build

1. `npm install` to install dependencies

2. `npm run watch` to run webpack

3. `npm start` to start the app at `localhost:5000`

You can also run `npm run build` to build the app for production.

## Lighthouse score

    Performance 98

    Accessibility 100

    Best Practices 93

    SEO 92

## Design notes

- 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 by `HorizontalScroll` to add its content without `HorizontalScroll` 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;