tdo95 / discolist

💿 An application for browsing the discography of your favorite artist!

DiscoList

Browse the albums and music projects of all your favorite artist!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Features
   • How Its Made
2. Getting Started
   • Installation
   • Usage
3. Optimizations
   • Future Improvements
   • Lessons Learned
4. Roadmap
5. Contact
6. Acknowledgments

About The Project

For people that love looking up the music catalog of artists they've recently discovered or already really love, Discolist is a user-friendly, minimal web application the stores all of this information in one place! With DiscoList you are able to look up the discography of all your favorite artists.

Features

• Artist lookup - dynamically generate options based on search entry
• Music catalog view - see collection of entire artist discography
• Timeline view - see an artist's project creation history in chronological order
• Tracklist modal - view all the tracks included in album and click link to play

How Its Made

DiscoList is a web application that uses Spotify's API to collect data on each artists music catalog and serves this information on an interface inspired by Spotify’s web app design. The application is built with the following technologies:

Getting Started

If you would like to use DiscoList online, visit https://discolist.cyclic.app/.

To get a local copy of the application up and running follow these simple example steps.

Installation

Follow the steps below to set up the application locally.

1. Create a Spotify account at www.spotify.com.

2. Go to the Dashboard page on the Spotify Developer website and register a new application to recieve an API key and secret.

3. Clone the repo

   git clone https://github.com/tdo95/discolist.git

4. Install NPM packages

   npm install

5. Create an .env file and add your API key and secret as shown below

   SPOTIFY_ID="ENTER YOUR SECRET"
   SPOTIFY_KEY="ENTER YOUR API KEY"

Usage

1. To start the server, run the following command

    npm run start  

   Alternatively, you can run with nodemon

    npm run dev  

2. Navigate to the application using the url below

   "localhost:3000"

Optimizations

Future Improvements

• Reduce latency and increase remote server response performance

Lessons Learned

• Prevent zooming within input text, while still keeping pinch zoom functionality by adding a maximum property to your meta tag
• How to create an API relay on a remote server to hide API keys
• Safari v14 only recently implemented the gap property for Flexbox, later versions will need alternative styling
• OAuth authentication convention and the different flows involved (implicit grant, client credentials, authentication grant etc.)
• How to implement CORS module to block unapproved user from accessing routes

Roadmap

• Create Catalog view
• Create Timeline view
• Add tracklist modal for each album
• Add artist specific information (i.e. place of origin, birthday, age, government name) using Media Wiki API

Contact

Tee O.

Portfolio: www.github.com/tdo95

(back to top)

discolist's Issues

Reduce search query latency

BACKGROUND

The backend of the application is currently hosted on glitch, while the front end is hosted on Github Pages. Glitch requires some time to boot up before it can process the request and send results back. This means that there is a significant delay between the first time a user enters an artist query and when they actually see options that they can click on.

POSSIBLE SOLUTIONS

To resolve this I'm thinking I will need to host both parts of the application in one place.

Hosting options I am considering are:

• Railway
• Cyclic

Fix album card responsiveness across browsers

Album card shape and responsiveness are not consistent across browsers.

I have hard coded the width and height of the cards at particular screen sizes (not sure why I did this lol), and I think this might be causing the problem.

Image below shows app at 730px device width on Safari