nanaowusunyamekye
11/21/2017 - 4:25 PM

Spotify clone from 2017-11-15 interactive talk: "Data and process modeling"

Spotify clone from 2017-11-15 interactive talk: "Data and process modeling"

song-store.js
content_copyfile_download
var songs = {
  '1234': {
    id: 1234,
    title: 'Purple Heart Highway',
    duration: 215, // seconds
  },
  '1235': {
    id: 1235,
    title: 'Pink Celica',
    duration: 203
  },
  '1236': {
    id: 1236,
    title: 'Chillesque',
    duration: 156
  },
  '1237': {
    id: 1237,
    title: 'Time to Try',
    duration: 300,
  }
};

var getSongById = function(songId) {
  return songs[songId] || null;
};
song-filters.js
content_copyfile_download
// search or browse filter
// given an album i want only the songs
// that are less than some max # of seconds

/**
  Input: an Album instance and a max length per song
  Output: an array of song ids that meet criteria
 */
var filterToMaxSongLength = function(album, maxSongLength) {
  return album.songs.filter(function(songId) {
    var song = getSongById(songId);
    return song.duration < maxSongLength;
  });
};
index.html
content_copyfile_download
<html>

  <head>
    <link href="styles.css" rel="stylesheet">

    <script>
      var album458674857 = {
        id: 458674857,
        title: 'The Good Fortunes',
        songs: [
          1234,
          1235,
          1236,
          1237,
        ],
      };
    </script>
  </head>

  <body>
    <script src="song-store.js"></script>
    <script src="song-filters.js"></script>
    <script src="app.js"></script>
  </body>

</html>
app.js
content_copyfile_download
// render the filtered songs
for (var i = 0; i < filteredSongs.length; i++) {
  var songId = filteredSongs[i];
  var songData = getSongById(songId);
  var element = document.createElement('H1');

  element.innerText = songData.title;
  document.body.appendChild(element);
}
styles.css
content_copyfile_download
h1 {
  color: red;
}
README.md
content_copyfile_download
  • Rendered
  • Source

This was a group exercise in making a tiny clone of functionality of some well-known app.

We chose Spotify.

Here are the data models of key nouns in the app.

var Song = {
  id: '', // 1232387
  artist: null, // points at an Artist
  title: '', // Purple Heart Highway
  year: null, // 2014
  genre: null, // 'gospel', 'triphop', 'grunge'
  duration: null, // 194 (seconds)
  thumbnailURL: null, // 
  fileURL: null,
};

// Album
var Album = {
  title: null,
  releaseYear: null,
  genre: null,
  publisher: null,
  thumbnail: null,
  songs: [
    1234,
    1235,
    1236,
    1237,
  ],
};