Giter VIP home page Giter VIP logo

recommusicendations's Introduction

RECOMmusicENDATIONS

Built on Spotify API

Hosted on GitHub Pages

Description:

Main purpose of this project was to learn React, fetching from APIs and how to use Git and GitHub. Developed with Mobile First Design. Idea sparked out while reading APIs features and recalling frustration from mismatched Spotify recommendations.

The most crucial techniques that I have improved at/learned are:

  • React components and states
  • Fetching
  • Data processing
  • Git commands and terminal usage in general
  • CSS pseudo-classes
  • Writing README.md files
  • Projects file structure

Quick showcase

RECOMmusicENDATIONS_usage.mp4

How to use guide:

  1. Only once
    • I have to add you to my Projects user list, else Spotify will throw error 403 if you interact with anything. Message me email that you use for Spotify and optionally your full name
    • Use test account that is already added mail: "[email protected]", password: "Test_Only"
  2. Click on "Get token" and login with Spotify account
  3. Choose what type you are looking for in filters
  4. Optional Select date release and/or genres in filters
  5. Type in a name of what you are looking for
  6. Click on submit button
  7. Browse through results and find the one you are looking for
  8. Click the plus button on selected result
  9. Add more results if you wish to*
  10. Press button in top left corner
  11. Optional Add genres*
  12. Click on "See results" and enjoy RECOMmusicENDATIONS

* only up to 5 results and genres combined can be chosen at once

* only up to 5 results and genres combined can be choosen at once

Possible issues

  • Filtering by tag:new(releases from past 2 weeks) seems not to work with genres. Read more.

Further improvements

  • Spotify uses HTTP/1.1 instead of HTTP/2
  • Can't change neither format of images nor their size from Spotifys response. There are some APIs that can do the later however, their either to slow (2nd link) or have too low of a limit to be beneficial. There is also proxy option but I still would have to invest time/money into it.
  • There is a lot of main-thread work being done. Most of it is what lighthouse classifies as "Other". Not really sure how to tackle this problem. Only clue.
  • Total Blocking Time is high from what seems expensive animations and rendering. But it would take a lot of effort to fix it and I have not found it disturbing.

Note: "Tablet and desktop design" branch is left on purpose for nostalgic purposes.

Credits:

Color palette from Spotify
Images from https://www.freepik.com/
Icons from https://icons8.com/

recommusicendations's People

Contributors

karmatys8 avatar

Watchers

 avatar  avatar

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.