Bruno
Belotti

condiviDoc

technical overview

introduction

condiviDoc is a single page web application designed to collect, generate, manage and distribute Health & Safety documentation for building sites: a very specific function in a very narrow field.
Of course, if you don't work in that sector (and chances are, you don't), you'll be more interested in the technical infrastructure of the application itself.

We started designing the application in 2009 and released version 1.0 in 2010. In 2011 we open the public beta, then we re-engineered it and in 2013 we released version 2.0.
The current version of condiviDoc is 2.1.7: version 1.0.0 was very different in terms of technical specification, so let's focus on the latest one.

underlying infrastructure

The entire application is standing on the AWS ecosystem: great flexibility and outstanding reliability are the most valuable points.
But, for a small startup like us, AWS offers two very appreciated features: the "pay as you go" formula, which completely obliterates the up-front cost, and the scalability (because maybe you start small, but you think BIG!).

aws infrastructure

our AWS infrastructure

The Infrastructure is pretty basic: we use Elastic Beanstalk (through GIT) as deploying service, which manages and monitors EC2 istances for us.
An RDS MySQL database serves all our needs, and we use S3 for file storage (users documents as well as backup and logs).
Last (but not least) SES gives us an easy and pretty powerful email-sending endpoint for our numerous notifications.

server side

The application is written in PHP (approx. 35000 lines of code), on top of Zend Framework 1, using a Model View Controller architecture.
To generate and manage the Models, we used the Propel Object-Relational Mapping on a MySQL database.

DB representation

Our DB (yes, it's big... but organized!)

Apart from few modules (authentication checks, main layout, etc.), the application is configured as a set of APIs, with different branches for different scopes.
One of them contains all of the Views, which are partially rendered on the Server and then (through AJAX calls in JSON notation) fed to a custom JS Engine, which is also responsible for reacting to users' actions.
All other branches are, effectively, Controllers.

application logic

Application Logic

In addition to ZF internal libraries, the application relies on the AWS SDK to interfacing with S3 and SES, and TcPDF to generate a collection of PDFs "on the fly".

generated PDFs

some of the generated PDFs

client side

The client side is based on Bootstrap, but with several custom UI components.
jQuery is used for AJAX calls, intercepting\responding to events and basic DOM animations.
A custom js engine (approx. 4000 line of code) was necessary to standardize the way we handled users' actions, so we built it (unfortunately, AngularJs wasn't available, back then).

user experience

We put a great deal of care on UX: color consistency, actions feedback, small details and little tools to ensure a smooth experience.
Here some examples:

autosave example

most of the form fields are saved instantly

contact information on mouse over

on mouse over, some useful contact information are showed

if more content is present further down the page, a red line appears at the bottom

if more content is present further down the page, a red line appears at the bottom

branding

Inbetween maintaining Servers and writing ZF libraries, I was responsible for the marketing material: starting from a very rough logo, I created a complete brand and, with it, an extensive collection of brochures, business cards, invitations, presentations, video tutorials, etc.
Here some examples:

business card

our first business card

Christmas card

a Christmas card to our beloved users

brochure

a 16 pages brochure, A6 size

conclusion

condiviDoc is a huge project: a lot of things would be quite different now, in terms of technical solutions, but still it's a pretty neat project overall, and I'm definitely proud of it.

contact me

Want to say "hello"? Drop me a couple of lines at me@brunobelotti.com or send me a private message (Twitter, LinkedIn, Facebook: it's all good).