/Findify

Find all the Spotify information you need

Primary LanguageTypeScript

Findify

Findify is a fully responsive, Spotify client themed web application, using the Spotify Web API to display the user's top tracks & artists, let them explore common artists and find new song recommendations based on their recent tracks.

Disclaimer

At the time of writing this (30/08/2023) this application has not yet been approved for quota extension. Until then, the Spotify Web API only allows up to 25 users to use the service at a time, each need to be manually added on the platform. Should you be interested in using the application, feel free to reach out to me, I will be happy to add your user. In the meantime, here is a YouTube video demonstrating the app in use.

Table of Contents

Usage

  • Login with a valid Spotify account, ideally which you have used in the past few weeks for best results.
  • View your top tracks, artists and related genres based on 3 different time periods: 4 weeks, 6 months and lifelong.
  • View individual tracks, artists and genres, and find similar ones.
  • Find song recommendations based on your listening history, with the ability to configure them based on the track's information - such as popularity and tempo, and add a new playlist with all related songs to your Spotify account.

Architecture

Findify is a modern web application, using the Next.js framework.

Frontend

  • The main part of the frontend is developed using Typescript for type safety, alongside the React library.
  • Redux for state management.
  • Material UI for some UI features.
  • TailwindCSS for styling, as well as simple responsive design with media queries.

Frontend routes

  • / Home page displaying the user's top tracks, artists and genres, their recent listening history, somes recommendations in the layout of a Spotify client.

  • /track/[trackId] Displays an individual track, and information related to it.

  • /artist/[artistId] Displays an individual artist, their top songs and artists related to them.

  • /genre/[genreName] Displays an individual music genre, genres related to it and top artists related to the genre

  • /search Displays search results based on the user's query, displaying matching tracks, artists and albums

  • /recommendations Displays 5 top tracks randomly and sliders to adjust for multiple music properties, a button generating recommendations based on the user's preference and ability to add a new personalised playlist to the user's Spotify account.

Backend

License

This project is free to use to anyone publicly.

Acknowledgements