Instant.fm Tech Stack

I’ve received a lot of emails asking about the technology stack of Instant.fm, so I thought I’d share this publicly.

Update: The source code for Instant.fm is now on Github!

First, what features did we want to build?

Playlist Creation

No login required.
Build your playlist on site, or upload a .m3u, .txt, or .pls file from iTunes, Windows Media Player, or WinAmp.
Each playlist gets a unique, shareable, short URL.
Allow background image uploading. (TODO)

Playlist Editing

Drag and drop to re-order songs.
Buttons to Move To Top, and Kill Song.
Change playlist name/title with an inline edit (no refresh).

Playlist Viewing

Use YouTube as audio source.
Shuffle, repeat, show/hide video.
Suggest songs to be added to playlist. (TODO)
Keyboard shortcuts for power users.

Share playlist on Facebook, Twitter.
See what your friends are listening to. (TODO)

Mini-browser

Pane which behaves like an iOS navigation view, with a stack of ‘views’.
Allows searching and browsing artist/album information without stopping the music.
Clicking links doesn’t cause user’s browser to leave the page.
Uses fancy animations, which look great.

Non-stop Music

On most music sites, clicking something stops the music (very jarring).
On Instant.fm, everything is AJAX, so nothing stops the music.
Even logging in/out works without a page refresh (the correct playlist edit tools are shown/hidden).

Browser Support

All modern browsers.
Internet Explorer 8. (TODO)

How We Built It

HTML5 Boilerplate

Rock-solid default for HTML5 websites.
Build script for minifying and hyper-optimizing JS, CSS, and HTML.
CSS reset, base styles, cross-browser normalization, non-semantic helper classes.
Server side optimization to reduce total page weight.

CSS3

1430 lines of hand-written CSS.
CSS3 hotness (transitions, box-shadow, border-radius, gradient, box-reflect, text-shadow).
Degrades gracefully in older browsers (…most of the time).

JavaScript Libraries

jQuery UI 1.8

The only feature we used was the excellent “sortable” module.

Modernizr

HTML5 feature detection in JS and CSS.
HTML5 shiv so semantic elements like <header> and <footer> work in IE.

YepNope

Conditional JS resource loader for polyfills.
Asynchronous script loading.

Backend Stuff

Tornado Web Server

Asynchronous non-blocking Python web server.
Modules (tornado.database, tornado.httpserver, tornado.web, tornado.auth, tornado.ioloop).

Nginx web server

We run 4 Tornado processes, and use nginx to load balance between them.

Supervisor

Process control system used to daemonize the Tornado server instances.

SQL Alchemy

We were doing raw SQL for a while, then we got tired of that and decided to go with an ORM.

Python

Server-side image resizing.
Playlist file (.m3u, .txt., .pls) parsing after upload.

Apache Ant

Custom build script to deploy new code.
Currently, the site goes offline for about 30 seconds whenever we deploy (we think this is acceptable).

Web APIs

Last.fm API

Artist, song, album information (summaries + pictures).
Powers our search results.
Uses HTML5 Local Storage to cache search results.

Facebook API

Facebook Connect.
Social plugins (Like button, Comments widget).

YouTube API

Search API.
Embedded player JavaScript API.

jQuery Plugins

jQuery Templates

Render data into a template and insert into DOM.
Officially supported plugin.

JSizes

Adds support for querying and setting additional CSS properties.
Min-width, min-height, max-width, max-height, border-*-width, margin, padding.

Jeditable

Adds Edit-in-place functionality to forms (no page refresh).

Auto Expanding Text Area

A la Facebook and Quora.

Graphics

Helveticons

High quality commercial icon package.

Photoshop

All other images, icons, logo, custom missing album/artist images are ours.

Misc Notes

InstantFM.com

.com TLD redirects to our main .fm site, in case users get confused with the .fm extension.
Purchased from a domain squatting company (BuyDomains).

Git

Commit early, commit often.
686 commits so far.
We used GitHub.

Conclusion

As you can see, we built Instant.fm upon a solid foundation of awesome. Most of our tools are free software with great documentation and easily hackable code. Jake and I used a bunch of different tech on this project, since we wanted to try out some new things. Plus, playing with new frameworks and libraries is always fun.

We learned a ton during this project. I hope that this information has helped you. If you found this useful, leave a note in the comments.

(If you liked this, you might like Freedom of Speech on the Internet.)