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)