One of the first projects we started working on in the summer of 2013 was The web-based application was designed and implemented for the Centre Information Jeunes (CIJ). Its goal was to add all exhibitors that would be present at the 2013 edition of the national student fair to a searchable database accessible at anytime to the fair attendees.


The 2014 edition's search interface with a slightly remodelled layout

The application's back-end allows administrators to manage general data, such as available languages, jobs, types of organisations, halls and detailed stand locations.

Once booths have been connected to one or multiple organisations, all data is indexed, tokenized and analysed using the Lucene-based Elasticsearch search-engine. Updated data is being indexed on the fly and availabe on the front-end immediately.

The application's front-end allows to perform a real-time fuzzy search through all the indexed data. Furthermore you can easily narrow down the search results using automatically extracted keywords and address information. All this is driven by specific search and filter queries to the ElasticSearch end-point.


The application running on several devices at the 2013 Student Fair

In 2014, the CIJ renewed its commitment to working with us in order to extend the application's functionality by adding a new interface for exhibitors. This interface enables associations, public institutions and commercial companies to sign-up for the fair directly through the website. The sign-up process offers a step-by-step wizard to guide the exhibitors. The implementation uses backbone.js to minimize the amount of required and potentially impeding page refreshes and further improves the user experience.

Through this wizard, exhibitors provide a description for their organisation and their booth and select the desired size and required equipment including the furniture. The fully localized user interface features auto-completion, client-side live updates based on the chosen options, as well as input validation before the form is submitted. The new interactive sign-up replaces what used to be a tedious task performed by a seemingly endless sequence of printing, mailing and scanning paper forms.

In 2015 the application was once again extended. That year, a new dashboard was added, allowed exhibitors, once they had signed up, to log-in, verify their information and update the data they had previously inserted. Any input errors or mistakes that would previously have to be corrected by CIJ personnel could from now on by fixed by the original authors.


Behat was used for functional testing

Staying true to TenTwentyFour1024‘s principles, the application was developped using a Behaviour Driven Development methodology. PHPUnit was used for unit testing the individual methods in em>Silex controllers. We heavily relied on Behat and its Mink extension for specifying and testing the application's functionality. In 2014, we also introduced jasmine for JavaScript unit-tests on the backbone front-end code.

The entire application is based on a Silex back-end providing Twig views and controllers increasingly adhering to REST standards after the rehaul in 2014. At the same time, additional functionality introduced the use of backbone.js. The later replaced some of the jQuery parts, allowing the use of the MVC pattern on the client-side and thus guaranteeing a cleaner and more manageable code structure.

As for supporting services, the application has been relying on Elasticsearch since its earliest release in the summer of 2013. The Lucene-based search engine has since seen an enormous and still increasing adoption in the developer community. A flourishing success that confirms our technology choice. From 2014 on, elasticsearch is running inside a docker container, allowing us to more easily set-up and destroy instances. For churning out PDF files, we've been relying on wkhtmltopdf. A library allowing us to reuse the same technology for both rendering the page in HTML and generating PDFs for printouts.

Technologies used in building this application


Silex is a php micro-framework based on Symfony2 components. Comparable to flask for python or express.js for node, silex is powerful, yet free of the usual bloat and it gives you complete freedom over your application's structure. (+)


MySQL is a relational database management system being used for persisting and manipulating application data. It is one of the most widely used database system for PHP applications, if not the most. (+)


ElasticSearch is an easy to use, yet incredibly powerful and auto-sharding search-engine based on Lucene. ElasticSearch leverages a JSON interface and a simple http-based API for easy indexation and retrieval of documents. (+)


backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. (+)


jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. (+)


Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap makes creating good-looking website easy and allowed us to focus on the functional aspects of the application. (+)


Behat is an open source behavior-driven development framework for PHP 5.3 and 5.4 that was inspired by Ruby's Cucumber project, especially its Gherkin syntax. Behat drives the functional tests on this project. (+)


PHPUnit is a programmer-oriented testing framework for PHP written by Sebastian Bergmann. It is an instance of the xUnit architecture for unit testing frameworks. (+)


wkhtmltopdf and wkhtmltoimage are open source (LGPL) command line tools to render HTML into PDF and various image formats using the QT Webkit rendering engine. These run entirely "headless" and do not require a display or display service. (+)