CSS 3/Sass





Labosalem production

Web Application Design and Development

Labosalem production is an online web application for pharmaceutical wholesalers that helps them buy product and manage their orders. I designed and built the application using AngularJS and the MEAN stack.


From Website to Web Application

Laboratoires Salem Production is a website that allows registered wholesalers to buy products sold by Salem Laboratory and track their orders. A previous version of the website, called VM Report, was already in existence for several years, but was not used by the clients, who instead were making orders by phone.

In order to bring the user back to the platform, I was tasked with the re-design and the development of a new version of the current website.

My first step was to identify the major problems with the existing site. What I found was the old version was extremely slow, which meant the process of buying a product was taking too long and the user had to go through too many different steps. In particular, the main menu itself had up to 10 sub-categories and even an extra level for some. Further, the interface was too complicated and it was hard to find specific information, the website was not responsive and could not be used on a smaller screen, which left some clients with no choice but to use other means to place an order.

The website was not perceived as a tool that was helping them solve their problems, but as a complicated and slow system that was making the process of buying products and managing their orders tedious and uncertain.

The future website should provide simple, intuitive, and responsive user interfaces that lets users accomplish ordering with less effort and time. The user interaction should be fast, and the process of buying new products should be easy. Ultimately the website should feel more like a web application.


Information on Demand

Simplicity is important in user interface (UI) design, the more controls that are displayed on a page, the more time the user will have to spend figuring out how to a complete a specific action. When there is less choice, the available functions become more apparent and are easier to scan.

To make the navigation less confusing, I chose to only display the main categories in the menu:

  • Dashboard (A collection of the main client information)
  • Order (Where the user can order products)
  • My page (Where the user sees all personal information and a collection of previous activities)
  • Contact

To conceal additional information available inside the page, I used a simple tab system. Additional information can then be retrieved by clicking on the action button which will open a new pop-up window.


Using this method, information, while still visible, is only fully displayed when the user needs it, resulting in a more simplified and user-friendly experience.

To focus the visitor's attention, I used color contrast and proportion differences between elements. Orders or messages are in a small white box, and information with denser data are displayed in a larger, darker box.


A zoning of the dashboard


The final design


Building a Fast and Responsive Front-End

I chose AngularJS as the front-end framework for its two-way data binding abilities. This way of handling data allows for an easier and faster UI interaction.

A good example of this principle is the order page.


Thanks to the power of two-way data biding, information is updated in real-time giving instant feedback to the user.

For the server side, I used the three other parts of the four main components of the MEAN stack:

  • MongoDB as the database
  • Express as the web framework
  • AngularJS as the front-end framework
  • NodeJS as the server platform

In addition to providing all the advantages of a SPA, the MEAN stack offers other benefits. Whereas the LAMP stack is based on several different languages, the MEAN stack is a full JavaScript stack making programming MEAN-based applications significantly easier to use. NodeJS is also faster and more scalable than other server side technologies, including LAMP, due to its non-blocking architecture.

MEAN stack example: The invoices

Invoices are created each time an order is made through the application, and they are stored in the MongoDB database so they can be reviewed later. Like any parts of the application, the invoice is a module with the following structure:


The folder view contains all the invoice HTML templates.

The controller.jsfile is in charge of fetching data from the factory and sending it to the view via its scope.

                      						angular.module('factures').controller('facturesCtrl', function(facturesFact, $resource, $scope) {

                      							// get all the invoics of the currently logged in client
                      						    facturesFact.list.query({client_id : Cookies.getJSON('globals')}, function(data) {
                      						        $scope.factures = data.factures;

                      						    // display order details when
                      						    $scope.getInvoice = function(invoice){
                      						    	$scope.lineOrder = invoice


The factory.js file uses the $ressource object to retrieve data from a specific URL.

                      						angular.module('factures').factory('facturesFact', function ($resource) {

                      							return {

                      									// Get all invoices
                      							    	list 			: $resource(
                      													{client_id : '@client_id'},
                      										    	 	{'query': { method: 'GET',isArray:false }}

                      									// Update invoice statut
                      							    	updateStatue 	: $resource('/api/facture-updatStatue',
                      													{id:'@id', statue:'@statue', client_id:'@client_id'},
                      								    	 			{'query': { method: 'PUT' }}



On the server side, data is requested to the MongoDB database by using Mongoose. Mongoose is an object modelling tool designed to help translate the database data into JavaScript objects, which can then be used in the application.

                      					        // retreve all Orders
                      					         app.get('/api/factures', function(req, res) {

                      					            var client_id = req.query.client_id;

                      					                    //find the right client and retreave commandes
                      					                    clients.findOne({_id: client_id}, {'factures':1}, function(err, factures) {

                      					                                return res.send(err);
                      					                                return res.json(factures);



Using this method, each part of the application is divided into individual modules (orders, invoices, login, notifications, etc.) making the code more scalable and maintainable. Data and business logic that are shared across multiple modules are stored inside services.

The tab module

One of the main ways to display data on the application (as seen in the design part of this post) is the tab system. Since it is used often throughout the application, and with a lot of different data, I wanted to build a modular tab system that can be added to, removed, modified, and displayed easily using a set of simple HTML attributes.

Using Angular's custom directive, the HTML code below will display one block containing three tabs: orders, stocks and messages, along with their corresponding data.

                      				  <div module structure="tab" content="commandes,stocks, messages"> <div>

This tab module is divided into two main parts, the structure of the tab itself and the tab and the data itself. The right structure is loaded using the module directive, based on the structure argument value provided in the HTML mark-up (structure="tab"). The data that needs to be loaded inside each tab block is identified from the argument content and stored inside an array called TabsData.


                          							// get attribute strcture and load coressponding structure
                          							.directive('module', function() {

                          								    return {

                          								        restrict: 'A',
                          								        scope: {},

                          								        //send value to template
                          								        link: function(scope, element, attrs) {

                          								           scope.TabsData = attrs.content.split(','); // contruct the array


                          										templateUrl: function(elem, attrs){
                          										      return 'modules/''/views/''.html';



The template tab displays the tab structure and names and then makes a call using ng-include to the data template.

                        						<section class="m-tabs" ng-controller="TabCtrl">

                        						            <li ng-repeat="name in TabsData ng-class="{active:isSet($index)}">
                        						                <h2 ng-click="setTab($index)">{{name}}>/h2>


                        						       <div  ng-show="isSet($index)" ng-repeat="data in TabsData" ng-include src="'modules/' + data + '/views/' + data + '.html'"><div>


The front-end build process includes the use of Grunt for automated tasks, like process Sass files, runs a development server, and concatenate and minify files for better performance.