Biosgraphy - the social blogging service

The largest project I worked on at Gramercy Studios was Biosgraphy, a "social blogging service".

The client, Tariq, came to us in mid 2013 - he envisaged a service that was about writing, with the asthetics of Pinterest and some social aspects (the ability to follow users and reshare content). We started an iterative process where Gramercy's designers (Luke and later Michael) would create prototypes in Photoshop, recieve feedback from Tariq, then refine and adjust. After we were all happy with the overall look and feel, we started development in November of 2013.

I was the only full time developer to start with, initially working on setting up and building the backend API and single page web application. A few months later two part time frontend developers (Steph and Saxon) and a full stack developer (Ze'ev) joined the team, which sped up progress significantly! We also had two iOS developers (Clement and John) working on the iPhone and iPad apps.

We worked in stages of around two weeks (kind of like scrum sprints, but not as strict). We would build the API endpoint(s) for a single major feature (e.g. viewing a user's profile page), then build it on the web and later on iOS. We aimed to get something functional in front of Tariq (and potential users) to recieve feedback as early as possible, rather than steaming ahead and building something no one wants. In the same vein, we preferred to demonstrate functionality (e.g. complex ui, animations, responsiveness) by building rather than high fidelity mockups. It's much easier to get a feel for something by playing with it than looking at a picture of what it might look like when it's built.

For example, we built the shortcut menu, which allowed Tariq to get a much better feel for the feature than if we had only sent a photoshop mockup:

API

Biosgraphy's API was implemented as a RESTful JSON API. This means that to create a blog you send a POST request to the /blog endpoint, and to fetch blog number 5 you send a GET request to /blog/5.

{
    "id": 5,
    "title": "My new blog"
}

We wrote the API in Python, a high level programming language which aims for beautiful, explicit, readable code. We used the Django web framework as a foundation, chosen primarily for it's request handling (routes and views), ORM, authentication and sessions. We started off using Django version 1.6, then during development upgraded to 1.7 (shortly after it was released) and recently to 1.8. On top of Django we used the Django Rest Framework (DRF), a toolkit for building APIs, which adds authentication, serialisation, throttling, pagination, and more.

The app is hosted on Heroku, and S3 is used for storing static assets and user uploaded media (profile pictures, cover pictures, uploaded photos and video). Static assets are served through Cloudfront, while images and video are served directly from S3. PostgreSQL (with PostGIS extensions for location data) is used as the primary data store, Redis as cache and job queue, ElasticSearch for search and autocomplete, along with a handful of other services (logging, monitoring, performance, video transcoding, emailing, CI).

Web

Biosgraphy web is a single page application, developed in Coffeescript using Backbone (router and models) and Marionette (views), packaged together using Browserify and "compiled" using Grunt, with styles in Sass and templates in Handlebars. Phew!