Tailored solutions for clients with special needs!

27 October 2021 - by Botond Boross
Botond Boross
Infosan

When Drupal is not the right fit, we find what suits our clients best!

Case study: WHO's INFOSAN community application

 

The international network of WHO food safety authorities, the INFOSAN network supports Member States in the management of food safety risks, ensuring rapid exchange of information in emergency situations so as to stop the spread of contaminated food from one country to another.

In 2011, Inovae created the first version of the platform and almost 10 years later, INFOSAN (WHO) reiterated its confidence and entrusted us with the development of a new collaborative platform for its community of experts.

The main objective was to integrate the latest proven innovations in knowledge sharing within a community of practice in order to re-engage INFOSAN members and regularly increase their participation in the portal. The challenge was to build a closed, secured and mobile friendly application that would be fast, responsive, modern and engaging for its targeted audience.

 

Discover the most notable functionalities of the application we developed:

My account

A detailed "My Account" section to allow users full control and customization over their profiles, but also to have lists showing their activities, bookmarks and other information.

Image
Account_1
Image
Account_2

Community stream

This stream shows things that happened lately on the platform and that might be of interest for the user. Similar to notifications, streams contain lower priority information.

Image
stream

Events management and enrollments

A section where the user can see all upcoming events and add them to his/her calendar as needed.

Image
program
Image
program

Workspaces

Workspaces are closed working groups subject to membership. A workspace is a secured place where its members can follow the stream, discuss, exchange documents, participate in events, etc... all related to a topic of common interest. 

Image
WS_1
Image
WS_2
Image
WS_3

Discussions

This section is relevant to share opinions and additional knowledge or ask questions about any topic, especially Documents. Reactions are also possible (Like, Heart, Star, etc.).

Image
Discussion_1
Image
Discussion_2

Documents

Documents are used to share official information on the platform. Documents can contain tags and traits to allow faster search and filtering. They can be discussed or downloaded.

Image
Documents

Incidents

Image
Incidents

Live feedback form

This feature aims at gathering users' opinions and at helping troubleshooting issues.

Image
Feedback

Choosing the best distribution to kickstart development.

API Platform is built on top of battle-tested products. The server skeleton includes the famous Symfony framework and the Doctrine ORM. It supports the most popular JavaScript libraries.
 

Pairing up with React and the Next.js framework.

Next.js is trusted by some of the world's best known and most high tech companies for a good reason. It gives us the best developer experience with all the features we need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
Why Next.js ? The framework utilizes JAMstack architecture, which distinguishes between front-end and back-end and allows for efficient front-end development that is independent of any back-end APIs.

Our Symfony-based backend handles entity storage, database connection and acts as a secure API to serve the application with up-to-date data. Next.js enables several extra features, including a light server-side rendering and generating the web application statically on page load.

React finishes the job by implementing real-time changes, animations or inline edition of certain elements.
 

Live notifications.

Implementing "only" a decoupled solution was only the basis of the application. We have added several other micro-services, one of them being Mercure. It is an open protocol for real-time communications designed to be fast, reliable and battery-efficient. It is a modern and convenient replacement for both the Websocket API and the higher-level libraries and services relying on it.

Users should not miss any important information.
 

Chat with collaborators.

If live notifications are not enough, people can also live chat with each other using Rocket.chat. There is a free tier version that is powerful and good enough for most business needs. It can be hosted locally on your server and allows people to have a highly configurable and customizable application that can also be loaded in a small window, inside our main application!

Image
Chat

Don't worry if things queue up. RabbIT.

Our next service is RabbitMQ. We use queues to delegate work for later, thus saving performance for now. This improves user experience and allow the application for faster response times. Of course, information is not lost, but rather delayed by a little bit in this case — having many users possibly making lots of requests can suffocate any server so this is our insurance against this happening.
 

Search is the center of knowledge. Be Elastic.

Every website or application stores some data. The bigger the site, the more there is to be stored and searched for, usually. Having an efficient search engine has been a must for quite some time now. We have added Elasticsearch. It's probably the best integration possible for any contemporary website, it has high synergy with API-oriented websites. It is also in line with our open-source preference.

Image
Search

Security.

We implemented connector services to WHO's in-house Microsoft Azure Login (paired with their Web Application Firewall). Using a well tested and such high reputation service is considered a stable, secure integration. This also gives full control to Microsoft Azure administrators to invite and manage users and we don't need to worry much about such things inside the application anymore.

The best thing about this feature is that adding any other connector (like Amazon, custom ActiveDirectories, etc.) and firewall (we love Cloudflare) is just a few hours work away and they can work even as alternatives.
 

Docker Docker Docker.

Having an architecture this complex could not have been implemented efficiently without virtualization of services — we have used Docker virtual machines. By doing so, we can fire up the application on any server without the need to install dependencies for all micro-services involved.

 

Could this application be yours too?

... or was this a one-off ?

While this application has some customization for specific client needs, we can easily adapt to any business needs by creating extensions to it.
Want a payment system ?
Want customizable pages ?
Want more administrative interfaces ?

Our designers can offer you prototypes with highly detailed, beautiful, but most importantly modular elements by implementing our in-house design system. A similar concept to recycling, we don't waste your money and our energy on reinventing the wheel twice. A certain designed element will look the same on different pages.

We would be delighted to hear about your needs and projects and study which options could be best to help you reach your goals.

Let's chat

Botond Boross
Botond Boross
Technical Manager

Botond's mission at Inovae is to help everyone continuously grow. His motto is: "a strong community is the best team". He takes on our architectural challenges and makes sure we use the right technology stacks.