Waitara – a MEAN-stack kanban-board prototype

Too long to read?

Sorry, but I can’t tell the story in 3min…maybe in 140 chars…

Take a look at these screencast first, grab a coffee & get a grip on yourself!

Screencast I & Screencast II

Why? What?

A few months ago, I decided to work only 3 days a week in my daily job at fme as projects in the ECM world can get boring … I wanted to learn something new, I wanted to be creative & I wanted to do it the way I like. While traveling around in New Zealand at end of last year I’ve decided to implement sth. with AngularJS (as developing the fme file Exchange platform with Angular was one of the most enjoyable projects last year). And as fan of kanban-boards I decided that developing such a board would be a nice project.

Constraints ūüėČ

  • no endless server restarts
  • no IE <10 support
  • no business case

Having Fun while coding

Earlier this year, I started to built & choose my environment, tools etc. I ended up with the following ones:

  • git & bitbucket:
    • git – well, why not?
    • bitbucket – I wanted to keep the code in a private repo (in the first instance), it’s free there
  • brackets: To try something different … I liked it, but IntelliJ Angular support is *interesting*, someone like to sponsor a WebStorm license ;-)?
  • ngTailor¬†– I’ve tried yeoman before & especially otb support for¬†browser-sync¬†& Sass¬†is nice. You may argue that gulp is better than grunt and that bower can drive you crazy, but I like them.
  • Sass¬†– I wanted to learn it and I can definitely say that I should have used it before!
  • Twitter Bootstrap: I’m not one these CSS-star-hackers – so I’m very happy with bootstrap. It saves time & is clean, modern and plays nice with angular & angular-ui. Easily customizable via less or sass – I’ve used the free Bootswatch Yeti theme

I’ve extensively used existing Angular Modules, e.g.:

  • angular-translate:THE i18n & l10n module for your Angular app – a must have
  • ui-bootstrap: native AngularJS directives based on Bootstrap’s markup and CSS – a must have if you use Bootstrap in an Angular app.
  • angular-growl:¬†growl like notifications for angularJS projects, using bootstrap alert classes. Simple & useful.
  • Angular-xeditable: edit-in-place elements for Angular. Simply awesome!
  • textAngular: A Lightweight, Two-Way-Bound ¬†Angular.js HTML-Editor. Sweet!

OK, that’s the frontend part, but what about the backend? Well, I considered to use Alfresco & Alfresco WebScripts, but wait …. that’s my daily job! After a few hours on google some blogs & slide decks I came across deployd. Deployd is based on NodeJS & MongoDB. It’s a¬†rapid API development framework¬† and offers an easy & very quick approach to define an API for *resources*. It’s now an integral part of my tool box for rapid prototyping. I don’t think it should be use in production. Sadly, it is no more in active development,¬†It’s like a Grizzly bear, hibernating, dreaming about the spring

media-api.com –¬†Upload, convert, store and embed documents, images, audio and video files with ease

I’ve started with an S3 file store first, but then my good fellows in hanover launched media-api.com & as¬†I wanted to be able to upload, embed & preview documents -> bull’s eye. 2 hours later my app had an online preview for office documents, images, videos etc.

Ok ok…after 2 hours it was working but I was calculating my SHA1 keys via CryptoJS in the browser. Thus , I started to develop my own deployd-module for all these signature tasks to keep my¬†Application Secret on the server side – quite a bumpy road but I finally made it & learned some new NodeJS internals.

Let’s ship

Ok, it’s running locally. Nice … let’s ship the prototype. NodeJS + MongoDB – well there are plenty of possibilities. I choosed heroku.

Here it is (demo credentials jan:jan): http://waitara.herokuapp.com/

Disclaimer: all your data will be *public* incl. your documents. My heroku plan is limited as well as my media-api.com space (5GB). The app may will crash when to many people are trying to modify the same data. Delete buttons aren’t implemented yet. It is really just a prototype!

What next?

I don’t know…I’m thinking of using this prototype & go some steps further:

  • improve the kanban-board stuff
  • leverage websockets
  • add a real activity stream
  • use another backend (e.g. Alfresco) & add more capabilities to built a full feature team collaboration solution

W00t! You’ve an idea – it’s time to ping me on twitter … I’m listening ūüėČ