Architecture Overview
What is the app built on?
TOM is built with a JavaScript stack, with VueJS on the frontend, NodeJS and ExpressJS on the backend, and MySQL for the database.
Backend
The backend is built on Node.js, Express and a MySQL database.
The current version in use is Express 4.18.2 and running on Node 18.15.0.
Real-time Server
We use an Express server within a Node.js framework to sync all real-time changes in our app.
Node.js is an open-source, server-side JavaScript runtime environment built on Chrome's V8 JavaScript engine. It allows developers to run JavaScript code on the server side, enabling them to build scalable network applications with asynchronous, event-driven architecture.
RESTful API
We use REST for writing our backend APIs. For a guide on getting started with our API, check out this documentation.
MySQL
We use MySQL for our database. For a guide on getting started with Postgres, check out this documentation.
Frontend
The frontend is built using the Vue.js framework. The current version in use is Vue.js 3.2.13.
All dependencies can be found in the table below.
| Package | Description | Version |
|---|---|---|
| Vue.js | A JavaScript framework used to build the user interface of TOM | 3.2.13 |
| Vue Router | A navigation library for Vue.js | 4.0.4 |
| Vuex | A state management library for Vue.js | 4.0.0 |
| LeafletJS | An open-source JavaScript library for interactive maps | 1.9.3 |
| D3.js | A JavaScript library for producing dynamic, interactive data visualisations in web browsers and is used in the overview dashboard of the country manager view | 7.8.2 |
| Papa Parse | Parses CSV files and is used in the bulk upload feature where CSV files are used | 5.3.2 |
| Survey JS / Knockout JS | A JavaScript form builder used in the self-assessment feature of the learner view | 1.9.70 |
| Tailwind CSS | An open-source CSS framework used for styling | |
| v-idle | A JavaScript plugin to detect idle/non-active users and is used in conjunction with login functionality | 0.3.13 |
| Vue-dk-toast | A lightweight toast notification plugin for Vue3 | 3.2.1 |
| Vue-pdf-embed | A package used to embed pdf files in Vue.js applications. This is specifically used in displaying the privacy policy to users | 1.1.4 |
| Vue-i18n | An internalisation plugin used to translate content in the TOM app | 1.1.4 |