Git Product home page Git Product logo

sharify-documentation's Introduction

Sharify

Sharify your Spotify

content

Disclaimer

  • To be able to login with spotify and use the app, your email should be added to the app's allowlist that's because Sharify currently on development mode.
  • To add your email to Sharify's allowlist reach out to Ahmed Ghonim.
  • To get a glimpse of what Sharify has to offer, here are my Top Tracks as recorded on Apr 23.

Motivation

I've always loved the Spotify wrapped at the end of the year to get reminded of my top tracks and artists of the year. What's even more fun is sharing your top tracks and artists with your friends.

Sadly, Spotify Wrapped comes out only once a year, so I thought it would be fun to build a tool that gets your Spotify top tracks and artist of the last month all year and allows us music freaks to share, preview and save these tracks seamlessly.

Another thing I always wished that Spotify allows sharing is your liked tracks In your library. Currently, you can't share them or even save them to a separate playlist.

Capabilties

Sharify offers the following :

  • Get your top tracks and artists from your last month on Spotify.
  • Get your all-time liked tracks on your Spotify library.
  • Preview your top tracks, top artists, and liked tracks seamlessly on Sharify.
  • Save and remove specific tracks to your Spotify library.
  • Follow and Unfollow specific artists.
  • Sort different tracks on the release date, popularity, and affinity.
  • Sort different artists on affinity and popularity.
  • Save your top tracks from last month to a separate playlist on your Spotify library.
  • Save your liked tracks from last month to a separate playlist on your Spotify library.
  • Share your top tracks, top artists, and liked tracks. Sharing is achieved by generating a preview link that your friends could open to preview and save your top tracks, top artists, and liked tracks seamlessly.
  • Preview link works with any user even if they're not registered on Sharify.

Product Design

I'll sum up the most important design thoughts in the following points :

  • The tracks are displayed in wide cards inside a n*4 grid to embrace the ease of use and add an aesthetic look to the page.
  • The logo is inspired by the DJ CDs. it even has a rotate animation to mimic the movement of the DJ CDs
  • I used the same Circular fonts that Spotify use along with their heart icons to add familiarity to the user experience.
  • The preview zone is placed on the left side to inform the user about the current card they're hovering on along with some info about it like the genre, release date, and the popularity measurement.
  • the background color of the preview zone gets changed as the user hovers over different cards to mimic a very known Spotify practice.

Auth

How Sharify Authorizes the users?

  • Spotify offers different options to authorize users, but since Sharify is a serverless app, I went with the Implicit Grant Flow.

  • The implicit grant flow is carried out on the client side and it does not involve secret keys. Thus, you do not need any server-side code to use it. Access tokens issued are short-lived with no refresh token to extend them when they expire.

  • Once the access token is expired, the user gets prompted with a modal to refresh the access token.

How to gain Access ?

Currently, the app on development mode and only 25 people can log in and try it out but the generated sharing links is available for any number of users.

To gain access to Sharify reach out to me on Instagram .

Demo

As stated above the generated preview links are available to any number of viewers, so here are my Top Tracks as recorded on Apr 23 to get a glimpse of what Sharify has to offer.

Preview

Future work

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.