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 😉

11 thoughts on “Waitara – a MEAN-stack kanban-board prototype

  1. i really enjoyed reading that, you should try implementing this on the complete MEAN stack

  2. from the end user view: it’s so easy to use, so much good ideas. exactly what i need for my work. sorry, i don’t understand the technical background, but i give 5 stars for Jan

  3. Well done! It’s a thing of beautiful simplicity. Much like Trello.
    Alfresco storage would be a great experiment, if only to see how it would be behave.

  4. If you could port this to StrongLoop Loopback and open source it would be awesome… (Deployd co-founder is one of its tech leads)

  5. +100 for a LoopBack port! If you Open Source this you’ll get serious traction for sure! Are you planning to do it? I’d love to contribute to a project like this. It just needs a Design revamp and BOOM, you’re on top positions in GitHub

  6. Hi Jan, it wold be nice to put the source open, so we all can help you developing it.
    There is no reason to hold it private, cause its not so easy to sell code these days.
    If you want to gain money with it do it like all the othery by maintenance and training.
    Greetings from germany

  7. Hi,
    releasing a project as open source is not just making the code available for free. It’s about maintaining the project.
    It currently just a prototype, so there is still a lot to do. If you’re willing to support the project then let us discuss this.
    cheers, jan

  8. Yes– let’s discuss this! Realize it’s very much in prototype phase. In making the move to open source code my only concerns are that I’ve taken the time to write a decent Readme detailing where things are at so no one gets the wrong impressions. In reality, unless your Github account has a massive following it will take plenty of time for your repo to get too much traction. In the meantime contributors can help out.

Leave a Reply

Your email address will not be published. Required fields are marked *