{"id":21420126,"url":"https://github.com/melhosseiny/tidal","last_synced_at":"2026-03-19T20:19:31.132Z","repository":{"id":77616506,"uuid":"186495037","full_name":"melhosseiny/tidal","owner":"melhosseiny","description":"Vue 2 app that implements music catalog discovery using the Deezer API","archived":false,"fork":false,"pushed_at":"2020-12-22T21:58:08.000Z","size":2596,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-23T06:29:22.263Z","etag":null,"topics":["deezer-api","music","tidal"],"latest_commit_sha":null,"homepage":"https://shrouded-lowlands-75769.herokuapp.com/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/melhosseiny.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-13T21:00:58.000Z","updated_at":"2023-03-07T03:29:07.000Z","dependencies_parsed_at":"2023-07-17T00:02:15.502Z","dependency_job_id":null,"html_url":"https://github.com/melhosseiny/tidal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melhosseiny%2Ftidal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melhosseiny%2Ftidal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melhosseiny%2Ftidal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melhosseiny%2Ftidal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/melhosseiny","download_url":"https://codeload.github.com/melhosseiny/tidal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243924058,"owners_count":20369648,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deezer-api","music","tidal"],"created_at":"2024-11-22T20:11:58.848Z","updated_at":"2026-01-03T16:08:34.682Z","avatar_url":"https://github.com/melhosseiny.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tidal Discovery\n\n[Vue 2](https://github.com/vuejs/vue) app that implements music catalog discovery using the [Deezer API](https://developers.deezer.com/).\n\n![App screenshot on desktop](/static/tidal-screenshot-desktop.png)\n\n[Live demo](https://shrouded-lowlands-75769.herokuapp.com/)\n\n## Build\n\n1. `npm install` to install dependencies\n2. `npm run watch` to run webpack\n3. `npm start` to start the app at `localhost:5000`\n\nYou can also run `npm run build` to build the app for production.\n\n## Lighthouse score\n\n    Performance 98\n    Accessibility 100\n    Best Practices 93\n    SEO 92\n\n## Design notes\n\n- 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\n\n      /search/artist?q=:q\u0026limit=10\n      /albums/:artistId\n      /tracklist/:albumId\n\n- 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.\n\n- 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.\n\n- Filters such as `duration` are registered globally since they're likely to be used across application components.\n\n- 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.\n\n      data:image/gif;base64,R0lGODlhqgCqAAAAACH5BAEAAAAALAAAAACqAKoAAAICTAEAOw==\n\n- I used content placeholders and a pulse animation to indicate progress on asynchronous data operations.  \n\n      @keyframes pulse {\n        0% { opacity: 0.75; }\n        50% { opacity: 1; }\n        100% { opacity: 0.75; }\n      }\n\n      animation: pulse 1000ms linear infinite forwards;\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelhosseiny%2Ftidal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelhosseiny%2Ftidal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelhosseiny%2Ftidal/lists"}