A Post Mortem of My Wisdom To Inspire (BETA) Web App

This is a Post Mortem of my current Wisdom To Inspire Web App which is in BETA. The app is hosted at www.wisdomtoinspire.com

This version of the app has been live for the last year, and it's been working fine but has a very low user base and very low adoption rates. In retrospect now, I realise why this is so as the app although provides a very niche online service it has had a bit of a broken user experience and it does not entice people to join and use it every day.

I'll briefly describe in this post, what I think went wrong and what Architectural things I will do different when building Version 2 of this app (which I'm currently working on).

Before we start, here is a video of the current BETA app that is live (but it wont be live for long - hence the video evidence)

What is the Wisdom To Inspire App?

Its a pure HTML5 web app built using "Adaptive" web design principles. (i.e. it's not fully responsive) but it looks and works well in most mainstream device screen sizes.  The basic premise of the app is to allow users to sign in with their Facebook account, collect bits of "Wisdom" (things like motivational images, videos or even write their own advice and bits of wisdom) and share these with their friends on Facebook as well as on the site. It also allows users to discover new "Wisdom" from other users and has some cool sharing tools (one click share on Facebook and HTML5 Canvas based text to image generator - more about this below).

The app worked in unison with it's official Facebook page here:
https://www.facebook.com/WisdomToInspire
where the most popular Wisdom items were shared.



What was the Technology used to Build it?

- Front end
HTML5, CSS3 and Vanilla JavaScript (with some jQuery)

- Backend
C#

- Database
Cloudant (basically NoSQL CounchDB in the cloud)

- APIs
Cloudant API, Facebook API



What were the Problems with the Architecture?

1) Bad Document Database Design

The biggest problem I had was with the Cloudant NoSQL document database design. I've always used Relational databases and this was my first attempt to build a NoSQL based datastore. I dove into it without any real research into efficient document database design and ended up creating a model that was very very inefficient. My queries took a long time to execute and as I didn't know anything about MapReduce or Query I manually maintained my data documents as "pages" (i.e. document_1 had 10 items, document_2 had another 10 etc) - this is wrong, what I should have done is just 1 document with all items and then used indexes and MapReduce or Query to perform paging.

I've started to learn about entity relationships in document Databases and my new Database designs I have for V2 of my app is much better. This video is excellent and it's where I started to think differently about Document Database design, this is something you have to watch if you want to move from a Relational Design mindset to a Document Design mindset.

- Entity Relationships in a Document Database

2) My C# based URL routing code was horrible

I wrote some URL routing logic to provide friendly URLs that points to a user's account (e.g. wisdomtoinspire.com/newbreedofgeek). But the code I wrote was not very good and made it difficult to introduce new pages to the app (as new pages were being treated as user accounts). This was just bad coding on my part and I'm sure there are much better solutions out there. 

3) Facebook login expired too quickly

Again, I didn't spend enough time researching the Facebook API when I used it. The app is pretty much completely driven using the Facebook API (from user logins and accounts to sharing of content) and I used some really old legacy code I had written to do most of it. The Facebook API is much more powerful now and let's you provide a very seamless experience for sites using it. 

One of the biggest mistakes I made was to not take advantage of Facebook's Long Term Access Tokens, I used the default Short Term Tokens and they expired every 2 hours. Because of this every time the user revisited the app they had to re-login. This is annoying for most users who are used to automated Facebook login in apps (as this feature is provided in all mobile apps that use Facebook Auth). Long Term tokens last a long time and are "portable" so you can save it and use it for offline access to the API as well.

The Feature I Loved Best in the App?

A user had the option to write down their own "Wisdom" in a text field in a HTML form, they could then share this to their Facebook Wall instantly with one click. I wrote some JavaScript code that takes the DOM element that was created when they wrote some Wisdom, which looked like this:

A user written Wisdom item looked like this in the DOM (styled with CSS3)

The JavaScript method would take in the DOM object, inject into a hidden HTML5 Canvas element and convert the output into a PNG file. I then used the Facebook API to share this PNG to their walls. The result was the "Wisdom" text they had written  was shared out on their Walls as a image that looked exactly like the DOM element did (which was styled as above using CSS3). 

I'll try my best to convert this JavaScript method to a library soon and have it on my Github account but in the meantime here is some reading on this technique.

- HTML5 Canvas Save Drawing as an Image

What are the Changes Coming to Next Version of the App?

1) A much better Document Database Design which is very efficient. Where I gave attention to Data Normalisation techniques as given here and used Query with Indexes to minimise the data sets from the document store.

2) This new version is also 100% Node.js. So goodbye C# and .NET.  I also use ExpressJS which  has a very good routing system for incoming HTTP requests.

I'm hoping to having V2 out soon, so keep an eye out. You can "Like" the official Facebook Page for updated on when it will be released (as well as for some motivation in your lives).

Until next time, Happy Coding Code Junkies.