web-app.md

Web app

Files & Folders structure

Organize a folders and files structure inside a project is never an easy task, and it exists many ways to do so. We think that at the beginning we should just not overthink about it, choose one way to do it, keep to it, until a natural re-organization will happen if needed.
Here is our /src folder structure:

• src/app/: where the Angular code is located. With time we organized this part in different modules each taking care of one main functionnality. Here is the list of the modules:
  • core/: constitutes the base of the application (layout, notifications, navigation history...)
  • dataset-details/: contains the components and logic allowing the display of a dataset information (metadata, data, map...)
  • datasets/: contains the components and some of the logic related to the research
  • editorialisation/: contains the components and logic related to the display of editorial content (static pages, articles)
  • elasticsearch/:
  • map/: contains the components and logic allowing the display and manipulation of a map
  • shared/: provides components, directives and others things that can be reused in different modules
  • user/: contains the components and logic related to the user management in the application (login, logout, user profil...)
• src/assets/: contains all the images, favicon, svg, fonts, dynamic config file...
• src/environments/: contains files with static configuration.
• src/i18n/: this folder is dedicated to the translation. The are two types of files:
  • .xlf:
  • .ts:
• src/scss/:
• src/app-routing.module.ts:
• src/app.component(.ts, .html, .scss):
• src/app.module.ts:
• src/routes.ts:

Each module is organized in the following way: (not all the subfolders are required)

• <module-name>.module.ts:
• <module-name>-routing.module.ts:
• components/:
• directives/:
• guards/:
• handlers/:
• interceptors/:
• models/:
• pipes/:
• resolvers/:
• services/:
• validators/:

Inside one module each component has its own folder with one .ts, one .scss and one html file.

CSS integration with Bulma

All the styling work has been done with Bulma, a free and open source CSS framework based on Flexbox.
It is highlighy customizable and easy to integrate in a project.