Monitaure is an online service aiming to provide SysAdmins with a clean, lightweight and quick to configure monitoring dashboard. The application does not need any client-side installation or configuration.

Why it's awesome

From a technical standpoint, here are some of the key aspects of Monitaure:

• Front-end:
  • React to manage user interface ;
  • Redux to manage application state ;
  • LocalStorage to persist the state between two visits ;
  • React-Router to handle front-end routing ;
  • A Service Worker to allow the app to be installed on phones and to work offline ;
  • Constant monitoring of the device's connectivity state: if the app becomes offline, some functionnalities requiring a network connection are disabled and the user is warned ;
  • Push notifications, on both mobile devices and desktop computers ;
  • JSX and some Jade for HTML ;
  • SASS for CSS ;
  • Babel to transpile ES6 & ES7 to older (ES5) Javascript ;
  • Webpack 2 to bundle everything up.
• Back-end:
  • NodeJS application built on Sails.js framework ;
  • MongoDB database for data storage ;
  • Redis database for storing user sessions.
• Security:
  • Served over HTTPS, with rock-solid SSL security (TLS 1.2, OCSP stapling, HSTS, HSTS preloading, Forward secrecy, etc.) ;
  • CSRF tokens ;
  • HttpOnly, encrypted session cookies ;
  • Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, X-XSS-Protection, X-Content-Type-Options headers.
• Performance:
  • Served over HTTP/2 ;
  • Sitting behind an NGINX reverse-proxy ;
  • Caching server-side (NGINX) as well as client-side (Service Worker for requests & assets, LocalStorage for state) ;
  • Hosted on a dedicated server running Archlinux ;
  • Gzip compression ;
  • PNGQuant & SVGO images optimization ;
  • CSS bundling and uglification ;
  • JS tree-shaking, minification, uglification, dead code elimination.
• Misc:
  • IPV6-ready ;
  • Sendgrid to send transactionnal emails (account confirmation, alerts, etc.) ;
  • Jest for tests and code coverage ;
  • Travis CI and Codecov for build testing ;
  • ESLint and Codacy for code style and quality review ;
  • Heap Analytics for retroactive interaction statistics.

Concerning the graphical aspect of the application, you can find all the goodies here on Dribble.

Project purpose

While it is a useful service anyone can use, it is also meant -as a team project- to showcase our skills.

The team is composed of the following people:

• Bertrand Junqua for both the front-end and back-end code, and server administration ;
• Guillaume Parra who takes care of the UI & UX ;
• Quentin Bucciarelli who laid a hand for writing some of the (S)CSS and the email templates.

Bonus: Error pages

• 403
• 404
• 500