BoostMe: An HTML5 Goal Tracking App

In my day job, I have to be pragmatic. That means although I am eager to try out new things right away, I have to weigh the pros and cons and the impact it might cause my unsuspecting users. I need to think about backward compatibility, about supporting browsers as old as Father Time and the list never ends. Although those daily exercises provide challenging and intriguing ways of working with old and new technology, I admit I always dream about how it would be to work in a world where IE6 or even IE7 is merely a dream, where I could care less of using a library to achieve cross browser compatibility and blah blah blah …

One Friday a few weeks ago, I decided time has come to throw caution to wind and do things my way. I gave myself these goals for the app I was building:

1. Fully client side driven.
2. Use as many new techniques possible, HTML5, CSS3, DOM, etc.
3. Not to use any framework or libraries.
4. Don’t care about backward compatibility with older browsers (for me, this mostly means IE6 – IE7).
5. Use native implementation of a browser’s JSON parsing and object stringification.

Out of these goals, came out BoostMe, an HTML5 app to keep track of one’s goals and affirmations. To aid in the “boosting” of one’s spirits while working towards a goal, the Facebook tie in added a social aspect that will hopefully boost morale when friends and family offer support via Facebook.

Now, to little bits of the inner working details:
All goals are stored using the browser’s local storage. When a goal is added, the end date is calculated and stored along side the goal’s parameters.

Invoking permissions for application using Facebook UI dialog.

Screen to add a goal.

Instead of building the UI in Javascript using the rather unmanageable string concatenation, I decided to use a client side templating solution. I grappled with a few implementation fruitlessly before settling on an amazingly easy to use solution called EJS.

Achieving a goal is always sweeter with support from family and friends. The user has an option to also post goals and affirmations to Facebook. Any comments added to the Facebook stream tied to the goals and affirmations will be fed back to the app. When the user clicks on the affirmations icon, a list of recent affirmations with comments from Facebook will be displayed.

Adding a goal’s affirmation.

How the posts will appear on the user’s Facebook stream.

The app is definitely a work in progress, but I have to say that I had loads of fun working on it. I hope to keep twiddling and adding more features to it, but to those of you who would like to test run the app, here is BoostMe. I will write follow up blog posts on some of the more interesting aspects of this app in the near future.