« Previous Tutorial Next Tutorial »

Now that we’ve successfully built an entire authentication system, let’s dive into the actual purpose of this goofy app: letting people add artists and albums to their profile, thus generating a list … of music. Seems like a good thing to be able to do on an app called MusicList, right?

We’re going to be using a service called Discogs for our music data. It’s a massive, user-driven DB with more than nine million recordings and five million artists. If you have it in your collection, there’s a pretty good chance it’s in the Discogs database.

First thing we’ll need is an account. Well, technically we don’t even need that to access the database, but since it’s free and it lets us make more requests, let’s go ahead and create one. Head for http://discogs.com and click the green “register” button in the upper right. You’ll be taken to a straightforward form that’ll allow you to create an account. Fill it in, then testify that you’re not a robot (if you are a robot, my apologies for this discriminatory form. If your programming allows it, just go ahead and lie). Make sure you use a real email address that you control, because you’ll need to click a verification link.

Once you’re done, head for your email, wait for the link to show up, and then click it. This will verify your account and take you to your dashboard, which is going to be pretty sparse. If you poke around, you’ll see that not only does the site allow you to look up music data, but you can also store stuff. Basically, what it comes down to is: we could handle pretty much all of the MusicList functionality on the Discogs server … but what fun is that? We’re going store the albums and artists our users add on our server.

Scroll to the bottom of the page and click “API” or just head for https://www.discogs.com/developers/ and you’ll see some basic info on getting started, along with a left-hand menu that shows all the cool stuff you can do with their API. You may notice they have a Node.js client available. That’ll come in handy shortly.

The Discogs API has a request limiter on it, meaning you’re only going to be able to make 60 requests per minute. This wouldn’t work for a high-usage production application, obviously, but for us it’ll be fine. If we were planning on building such an application, what we’d have to do is start mirroring the Discogs DB on our own server and querying it locally (and then downloading their updates as they come in). That’s a can of worms roughly the size of Jupiter that I’m not going to tackle in this tutorial series, because I really don’t think any of us want to see “Five Minute React Episode 460”. We’re going to stick to pulling data from their servers on a per-request basis.

For now, you need an API key for your app, so click the “Create an App” option in the header menu. You could just generate a personal use token here, but creating an app allows you more requests, so click that button, and you’ll be taken to a form with four fields, only the first two of which are required. For Application Name, I’d go with something like “MusicList-yourusername” or similar. I don’t think it’s actually an issue for there to be multiple apps named MusicList stored on Discogs, but it’s not a bad idea to differentiate it in case you’re ever trying to find your app in a list. For the description, I went with this:

A simple web application that allows users to save their favorite bands and albums.

Don’t worry about the other two fields. Just go ahead and create the application. Once you do, you’ll be given a consumer key and secret, and some URLs that will allow you to make requests. Awesome! Let’s get some of this info into our app config. Flip over to Sublime Text and open /config.json. Below line 4, add a new section for Discogs, like this (obviously, use your own data here instead of this sample data):

  "discogs": {
    "key": "HJYbPXSTxoqAlbMRneAp",
    "secret": "OAcURQBaneVjufVpzXjkexMriSPaNHGL"
  },

Save that file and open up /config.js. Under line 7, export our new block like this:

exports.discogs = parsed.discogs;

Save that file, and switch to a command prompt or terminal window. In your musiclist directory, type:

yarn add disconnect

Let it run, and you’re good to go here. I recommend restarting your server just to be safe. Then switch back to Sublime, and let’s … well, we could start with a bunch of stuff, here, but let’s go with creating an Album model which we’ll use to save albums to the DB. We don’t actually have to do this, since as mentioned we could just always use Discog’s API, but storing stuff on our own DB is a) generally faster than hitting an external API and b) a good way to stay below that 60-requests-per-minute cap.

The Discogs’ API spits out an absolute S#!^-ton of data. More than we need for our simple app. By using a model, we can pick and choose what to store. Mongoose will ignore anything that doesn’t fit into the model. So, create a new file in /models named album.js and add the following code:

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const Album = new Schema({
  title: String,
  discogId: Number,
  artists: [Schema.Types.Mixed],
  thumb: String,
  country: String,
  formats: [Schema.Types.Mixed],
  genres: [Schema.Types.Mixed],
  images: [Schema.Types.Mixed],
  labels: [Schema.Types.Mixed],
  notes: String,
  released: String,
  styles: [String],
  tracklist: [Schema.Types.Mixed],
  year: Number,
});

module.exports = mongoose.model('Album', Album);

That’s still plenty of info, and we may not even end up displaying all of it, but it’ll be good to have.

Oh, and by the way, those Schema types in square braces? That means “an array full of this type of stuff” (and mixed means “basically anything” which includes objects). So for example images is going to be an array full of objects with a bunch of image information in them. styles is going to be an array of strings.

Save the file, and that seems like a good place to wrap things up. In the next tutorial, we’ll modify our User model so it can save lists of albums, and then start building out the API endpoints we need to search albums, display results, and let users save them to their profiles. Stay tuned!

« Previous Tutorial Next Tutorial »