Presentation of implementation project providing frontend web application to final users of the CYBNITY software.
Presentation of the design models regarding the web application:
The ReactJS implementation project is organized with a capabilities domain-oriented structure as defined by the Cockpits Foundation Capabilities Model.
The common technical components (e.g standard button, reusable smart form) are defining in this area and can reused anywhere in the user interface.
The universal src/components folder include components that are shared across domains.
This directory is dedicated to the common media files (e.g logo, standard basis background, sound file) which are commonly used by several front ui components. In this directory, the embedded media are usable by reactive components.
Contains the specific fonts files reusable into the global and/or features CSS styles.
Each ReactJS component have its own folder where each one include dedicated styling, types and testing logic.
For each folder of feature component, several files are defined:
Dedicated to Docker image assembly controlled by Maven build tool that package the final deployable container image of the frontend web app.
Include files required by the Express http server implementation.
Include all the files and contents (e.g media files) that are public accessible over the http service (e.g health check basic html file, favicon for browsers…). Be carefull that media required by components shall not be included in this folder!
Files hosted in this directory shall only be referenced by HTML pages (e.g over %PUBLIC_URL% folder location variable name).
Contains all node packages that have been installed according to the specifics versions defined into the package.json file.
The source codes managed in this area of Foundation project are about the capabilities provided to the users (e.g web ui services provided to user’s web browser) via the user interface layer.
The implementation source codes realizes interactive functions provided by UI Modules (UI layer providing functional or technical capabilities) to deliver User eXperiences (UX) to the final users of CYBNITY solutions.
The React bootstrap stack is integrated and reused for theming of the UI layer components.
See React Bootstrap documentation for more help.
Application customization of the Bootstrap theme or any Bootstrap variables is defined in the custom Sass file src/custom.scss.
See SASS documentation for help on customization via variables redefinition.