Portfolio  / app.efrançais.lu

app.efrançais.lu

app.efrançais.lu is a new web application commissioned by the Luxembourgian Service de Coordination de la Recherche et de l'Innovation pédagogiques et technologiques (SCRIPT) that allows students to learn the French language in an interesting and playful manner in the framework of their eFrançais initiative.

Functionality

eFrancais home page

app.efrançais.lu is a web application built to help young Luxembourgish-speaking pupils to learn French. Pupils have two kinds of exercises at their disposal: one of them is about guessing images associated to sounds, and the other one is about guessing sounds associated to an image. The user interface is designed to ensure a most intuitive and interruption-free experience.

Nice visual animations make the user experience more interactive. The application was designed mobile-first with tablets in mind, but as a Progressive Web Application (PWA) it is 100% responsive, working just as well on phones as on desktop browsers.

Users are able to persist their progress through the various levels by signing in to their SSO iam.education.lu account. Technically, this was solved by acting as a service provider in a Security Assertion Markup Language (SAML) context.

Development

To develop this application we once more made use of the Vue.js framework, enhanced with the Vuetify framework. While we've used a plethora of available Vuetify components, we've had to create some bespoke components to fit our needs. We've chosen to use the TypeScript language to help reduce, identify and prevent problems during the development process that would traditionally only be detected at runtime. Always remembering that anything that can be done in JavaScript, can also be done in TypeScript.

User-data, user-progress and resources are stored in a MongoDB NoSQL database. We've chosen this database technology because it proved to be a great fit for our simple data model with its promises of shorter development cycles compared to standard RDBMS databases. The final result consists in an intuitive application, that all users will be able to use instinctively

Screenshots

Technologies used in building this application

TypeScript

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. (+)

Vue.js

Vue.js is progressive JavaScript framework for building user interfaces. Vue is a capable web application framework that is able to power advanced single-page applications (+)

Vuetify.js

Vuetify.js is a reusable semantic component framework for Vue.js. It aims to provide clean, semantic and reusable components. (+)

SAML

Security Assertion Markup Language is an open standard for exchanging authentication and authorization data between parties, in particular, between an identity provider and a service provider. (+)

Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. (+)

MongoDB

MongoDB is a free and open-source cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with schemas. (+)