Web Application

Angular SPA:

The web application is designed as a Single Page Application (SPA), divided into modules that load as users navigate to the respective sections of the application. To optimize subsequent loading and facilitate version management, Service Workers are utilized. They allow caching application files and images, updating only the changed files upon release.

Module Structure and Routing:

The application is structured into the main application module, with additional modules loading as needed. These include the hero module, hero list, hero creation, hero level-up, adventures, frequently asked questions, inventory, and maps. Commonly shared components are placed in a separate shared module.

Style Structure:

To manage styles, SCSS preprocessor is employed. There are two main types of styles: component styles and global styles. Component styles use recommended CSS Custom Properties isolation. For more flexibility in organizing the component's layout, the container is defined as :host rather than an internal element wrapper. Global styles are organized to resemble the structure of designer-prepared images for layout. Each module's style files contain an index.scss file for exporting module content using the @forward preprocessing rule.

Animations:

Animations are described in a separate directory, namely src/app/shared/constants/animation. Some standard animations include element translation during appearance and disappearance, simulating left or right scrolling based on input parameters. Other animations involve the regular translation of elements during appearance and disappearance and the cascading appearance of elements from a list.