Norgesgruppen

(From WikiPedia) NorgesGruppen ASA is a Norwegian grocery wholesaling group which also runs various retail outlets. With a 38,5% market share in 2012, NorgesGruppen was the largest player in the Norwegian grocery retail market.
Norgesgruppen owns several store chains, like Kiwi, Meny, SPAR and others.

Executive summary

The several year long (and ongoing) «Norgesgruppen project» encapsulates many things, like native apps, web-sites, e-commerce and an entire server / client platform build from the ground up to serve all the apps, websites and other solutions. My role as a lead in this project was / is to create, extend and maintain this platform as well as advising and consulting with the chain teams.

My part in this

  • Creating and maintaining the platform REST services
  • Creating and maintaining the client SDK for apps and web-apps
  • Creating and maintaining the platform realtime sync service
  • Co-creating and maintaining the platform caching service
  • Tech-lead for the platform servers and client SDK
  • Advising and consulting chain teams

Tools and technologies used

  • Node.js
  • MongoDB / Mongoose
  • Web sockets server and client side
  • Azure WebApps
  • Azure TableStorage, ServiceBus...and more
  • Redis
  • React.js
  • TypeScript 2.0
  • GitHub - As an SCM and a project tool
  • Elasticsearch
  • Jira / Confluence
  • TeamCity

Background

My involvement started pretty much at the beginning of the project. My role was to lay the foundation for several mobile apps by building a client SDK which would abstract away the underlying complexities of the humongous Norgesgruppen system. Since Norgesgruppen owns several store chains, each of the major chains had it's own team of designers and developers tasked with using this client SDK as a foundation and build chain specific experiences on top of it.

After some time the need for an entire platform criss-crossing all chains emerged.  The overall goal of this platform was to make available both server and client APIs which would offer an accessible, consistent, scalable, secure and high-performance way for chain teams to  access Norgesgruppen's data. We also wanted to add value to existing data via different logging, searching and data gathering methods which could be used by Norgesgruppen and their chains to better serve their customers. Lastly we where able to offer new functionality which did not exist within the existing Norgesgruppen services, like realtime shopping list synchronization and awesome search enhancements utilizing Elasticsearch.

Note that I'm not personally an expert in the field of Elasticsearch, on this I depend on the excellent skills of my colleagues while I'm absorbing more knowledge about how to work with it.

REST / Sync services

Both the REST API, the caching services and the realtime sync services are build using Node.js and it's running on Azure WebApps. 

The REST API is in place to act as a traffic buffer for Norgesgruppens own services and it's build to be easily scalable and extendable. The api provides custom services such as custom user data sync (not to be confused with the realtime sync services) as well as acting as cache layer enabling faster serving of data to clients.

The cache services are build on top of Redis and Elasticsearch. This system grabs data from underlying sources and serves it to client through the REST api, either as is or customized / optimized.

The realtime sync services is a high performance WebSocket based service used for instantly syncing data between many clients at once. It is a distributed system handling client sockets between many server instances and it uses a high performance queuing system to distribute messages between clients. This system also has a client side implementation provided as part of the client SDK (see below).

The client SDK

This is a JavaScript based SDK (written in TypeScript) used both by native iOS / Android applications as well as web based applications / web sites. For applications using this SDK it will handle all transactions with all of the servers mentioned above. In addition it will provide APIs that remain consistent over time, even when the underlying server api's are updated. It will also abstract away most complexities with storing data locally (IndexDB, WebSQL...) and many other nifty things.

Summary

Working with all of the talented people in this project has been and continues to be joy both from both a technical standpoint and a social one. Challenging tasks are commonplace and in this project this is a good thing. Working this way incrementally makes all of us more skilled and aware of what we are trying to accomplish, which is constantly improving on the user experience.

Fagforbundet web-site

The new website for Fagforbundet is a 100% responsive site utilizing cutting edge technologies like those provided by HTML 5 and accompanying technologies.

Even more so, the site is a visual treat due to in large part our awesome graphic designer which in cahoots with the rest of the team made creating a fast, responsive and cool site into really inspiring work.

The front page in a desktop browser

The site being responsive simply means that it adapts to different screen sizes and in this case also to different platforms and input methods. If you're on a touch device the site knows this and gives your the optimal experience tailored for touch input, all the way down to how scroll works and how memory usage is handled.

The front page on an iPad

Since we all know that traditional computers soon will be a thing of the past, we took special care to have the site perform and look particularly good on smaller devices like the iPhone. Making the site perform well within a bunch of different environments was a challenge, but a worthwhile one I believe.

The front page on an iPhone

My part in this:

  • Technical lead
  • Concept refinement
  • Interaction principles (modules, search, responsiveness + more)
  • Technical architecture
  • Markup and styling for about 50% of the site
  • All CoffeeScript / JavaScript development

Tools and technologies utilized:

  • CoffeeScript
  • SASS (SCSS)
  • JavaScript
  • HTML 5 + companion technologies (geolocation..so on..)

Disclaimer: The current website at fagforbundet.no does not look, behave and perform as we intended to when we made it. This is due to some later work and additions performed by others. Please refer to the screenshots and the video above to get an accurate impression of our work on this site.

More screenshots (click to see a larger image):

Tavleboka - Interactive learning tool

Tavleboka is a tool meant to be used on computers or a touch enabled blackboard, like the Smartboard.

This system features two parts, an admin part making it easy for the publisher to upload and enrich print based books in pdf format. The "presentation" application is what the teacher uses to create a rich and highly interactive learning experience for the pupils. This application can be run in any browser through the Adobe Flash platform and is capable of playing back interactive media such as sounds, animations. It will also take user input such as text, drawings, sticky notes and so on. This project was two years is the making and is an essential part of gradually enriching the world of education.

My part in this:

  • Concept development
  • System architect
  • Tech lead
  • Development of the presentation application
  • Later development of the admin application

Tools and technologies utilized:

  • Adobe Flashbuilder (Flex)
  • JavaScript
  • HTML/CSS

«Kupongrettere» - Interactive lottery apps/games

«Kupongrettere» or something like "coupon checkers" in english, are four interactive web applications / games giving users of «Norsk Tippings» (Norwegian money game provider) lottery the possibility of reliving the actual lottery, only in an interactive manner.

The applications are written using JavaScript and the latest HTML/CSS standards. The applications was especially tailored to work well on both modern desktop browsers as well as on the iPad. To make this happen we had to utilize CSS 3 technologies, such as transitions and 3D transforms.

My part in this:

  • Concept development (part of team)
  • Most of the JavaScript development
  • HTML & CSS for two of the games

Tools and technologies utilized:

  • HTML
  • CSS 3
  • JavaScript
  • jQuery

Snaptshot.no - WordPress site

Snapshot.no is a WordPress based site aiming as a entrance for users in Norway interested in the Snapshot product from Tele2.

The site was created using the Thematic WordPress theme as a foundation, extending functionality to provide functions like custom view for blog posts, form submissions trough AJAX and other the ability for the admin-users to show or hide custom elements on the site.

My part in this

  • All PHP development customizing the WordPress templates and creation of WordPress plugins.
  • Implementation of design and creation of JavaScript for animation and validation using jQuery and CSS3.

Tools and technologies utilized

  • WordPress (Thematic)
  • HTML
  • PHP
  • MySQL
  • CSS3
  • JavaScript
  • jQuery