Conundrum


Conundrum is a game of hard choices, the player is presented with an initial benefit and a following setback that is tied to the benefit. The player has to choose to accept the proposed benefit and setback, or forgo the benefit and setback entirely.

Conundrum is built on Meteor and AngularJS, with MongoDB serving as the database. Meteor provides reactivity and a framework that is isomorphic from the ground up. Angular provides intuitive data-binding, but at the cost of wrestling with Angular-Meteor. MongoDB is currently the only database that works with Meteor, however progress is currently being made on a Postgresql implementation.

Features

Stripe Subscriptions

A subscription model has been implemented using the Stripe API, which was pleasant to work with from start to finish. The accounts system is augmented with Facebook login using the accounts-Facebook package.

The benefits of a NoSQL database were seen here, as accounts registered with Facebook and accounts registered using the built-in site interface had a completely different schema. Regardless of that, Stripe integration went smoothly.

Memorable URLs

A typical URL for Conundrum looks like Roasted Sardonic Andeancondor, it follows a pattern that looks like Adjective + Adjective + Animal in order to provide a more memorable URL than a random hash, with a much larger number of permutations. The total number of permutations for this solution is just over 4 billion, enough to have 5 conundrums submitted every second for 25 years. A standard 5 length alphanumeric string would have only 900 million permutations, and would be much less memorable.

Responsive Interface

The front end for Conundrum is entirely responsive, and works on every size of device from phone to desktop. This was more of a challenge than anticipated, content can vary from a single line to an entire paragraph, this combined with the large amount of animation made accommodating a wide range of devices a task.

Responsive Example

Rich and Performant Animations

A standard set from my previous explorations in performant CSS, every animation on Conundrum is optimized and capable of running at the 60 frames per second benchmark. Animations were a must to enhance the experience, and the overall result is very pleasing.

Each animation doesn't trigger content reflow, and is handled entirely through CSS. Animations run smoothly even on budget hardware.

Stack Overview

A more in depth analysis of what the Conundrum application uses:

  • NGINX web server using a reverse proxy to the meteor application. Used for easy SSL management.
  • Meteor Up for easy deployment and ENV management.
  • Meteor/MongoDB/AngularJS for the application.
  • SASS and Jade for CSS precompilation and markup.
  • Skeleton-SASS for a lightweight framework.
  • GitHub for code management.