Specifications
Description#
Console is a web-app targeted to create and use workspaces, automations and applications.
It runs on every modern browser up to date (Chrome, Firefox, Safari, Edge).
A user account is needed to access the service.
Technical stack#
Library |
Usage |
Version |
| Typescript | Language | 4.5.2 |
| React | VDOM library | 18 |
| Next | Framework | 14 |
| final-form | Forms management | 6 |
| socket.io | WebSocket | 4 |
The web app is built on top of typescript language and React/NextJS framework.
Through NextJS, the app is dynamically routed and some pages can be rendered on server side for SEO and caching.
Internationalization is managed by i18next. Translations are located in public/:lang folder under many json files.
Languages supported are english, french and spanish. English is the default language.
Forms are managed by final-form.
Realtime connexion with EDA uses socket.io library.
App states are managed by React context API with thematic Providers.
Design#
The console should be responsive, usable on width > 768px. On smaller devices, some functionalities may not be available. An explication will be displayed to let user knows what he could do on a bigger screen.
The features should have accessibility in mind. Main functionalities should be usable with keyboard and readable with a screen reader.
Performance#
Run Lighthouse to check for performance, best practices, accessibility, and SEO. For best results, use a production build of Next.js and use incognito in your browser so results aren't affected by extensions.
Lighthouse's results must be green.
Quality#
Development and quality standards#
- At least 70% test coverage
- Maximum 3 % duplicated code
Tests#
All components have a minimum snapshot test. Complex components have as many snapshots than different possible states. Utils have unit tests.
Tests |
Minimal coverage rate |
Details |
| Unit tests | At least 70% | N/A |
| Snapshot tests | At least 70% | All components have a minimum snapshot test. Complex components have as many snapshots than different possible states. |
| E2E | 30% | N/A |
Logs#
No log must appears in user's console.
Errors#
Unexpected errors are sent to sentry.
Linting#
The code should be formatted using Prettier, using the version specified in the package.json