Inspiration

Me and Andrei have long been fairly unhappy with the current state of music streaming services. They don't let you stream everything you want, they make linking a friend of yours to a song needlessly complex, and they don't offer enough opportunities for plugins or integrations. YASS (temporary name) seeks to fix that, and more.

What it does

It's your own personal music streaming service. It's designed to be deployable to your own servers, and provide an interface for you and your close friends to listen to. You can add songs using the import field at the top, which works with Youtube, Soundcloud, and countless other sites courtesy of youtube-dl https://rg3.github.io/youtube-dl/supportedsites.html. Songs get cached on the server and streamed to clients using node. It'll also automagically import local files from the cache repository and make them available through the cross-platform web interface.

How we built it

We started with a meteor + webpack + react boilerplate for the expedient developer experience. We spent the first hour planning all of the features (plan.md in the root of the repository) and the following building maybe 25% of what we planned for. ;)

We used meteor, npm packages in meteor and npm packages in webpack all in tandem depending on the usecase. We worked towards building small bits of functionality at a time, helping each other when either got stuck.

Challenges we ran into

Streaming the songs directly proved to be far more difficult than just fetching them using youtube-dl, so for the MVP we decided to just stick to that. Ideally we would have liked to build torrent streaming as well, and a unified smart search input. Deploying on a server with ffmpeg.

Accomplishments that we're proud of

That it works and is usable! You could feasibly import all of your music library into the app, and use it to stream from all of your devices. It wouldn't be an amazing experience, but it's a start. It makes heavy use of linters, the project is pretty decently split into separate components, and is in good shape to open source and built upon.

What we learned

We had no idea before this how to get audio playing in the browser from a server, so we learned a lot about node streams. We gained more experience using react, material-ui, and packages. We learned how to hook into a Meteor server-side iron-router route and execute arbitrary node, in this case responding with an audio stream instead of an HTML document.

What's next for YASS

Andrei plans to fork it and use it as his final year uni project, and I'm going to probably clean up some hacks and add more functionality. Potentially, it'll replace Spotify or Apple Music.

List of packages

Meteor:

react
reactrouter:react-router-ssr
webpack:hot-reload
standard-minifiers
meteor-base
mobile-experience
mongo
session
tracker
logging
reload
random
ejson
check
thereactivestack:blazetoreact
accounts-ui
accounts-password
blaze-html-templates
ecmascript
accounts-facebook
iron:router
meteorhacks:npm
npm-container
izzilab:material-ui
fortawesome:fontawesome

Node:

"babel-core": "^5.8.24",
"babel-eslint": "^4.1.3",
"babel-loader": "^5.3.2",
"babel-plugin-react-transform": "^1.0.5",
"classnames": "^2.1.5",
"css-loader": "^0.19.0",
"es6-promise": "^3.0.2",
"file-loader": "^0.8.4",
"glob": "5.0.15",
"jshint": "^2.8.0",
"node-sass": "^3.3.3",
"normalize.css": "^3.0.3"
"null-loader": "^0.1.1",
"prepush-githook": "^0.1.1",
"react-mixin": "^3.0.0",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.0",
"react": "^0.13.3",
"redbox-react": "^1.0.6",
"sass-loader": "^2.0.1",
"standard": "^5.3.1",
"style-collector-loader": "^0.1.0",
"style-loader": "^0.12.4",
"url-loader": "^0.5.6",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.0.0"
"webpack": "^1.12.1",
"youtube-dl": "1.10.5"

Thank you!

Share this project:
×

Updates