Project structure

Main folders

You will notice the project has a base structure, that includes all the building blocks that you need to continue developing your project.

Android

This folder includes all the files required to build an Android app using the following configuration

  • File android/app/main/AndroidManifest.xml has been configured to support a custom URL scheme for the authentication component
  • File android/gradle.properties include the simulator configuration

src/app/pages

The src folder is where you write your code.

The app folder contains the files to bootstrap the app and the main structure we will build the app upon. Inside the app, there are several important folders:

  • pages: each project's feature will be stored in an individual folder inside pages

img

src/app/shared

Folder shared stores all shared service/model/ that can be used globally across the project

src/assests

Folder assests places all fonts and images required for the app.

src/environments

Folder environments is where we store all the variables that are similar but have different environments.

Read more here

src/theme

The folder theme stores all Sass files (styles, mixins..) for customizing the app's styles.

The filestyle.scss defines the global CSS rules. Each folder will also have its own SCSS files to define specific rules.

img

src/app/auth

  • auth-guard.service.ts: a guard deciding if a route can be activated
  • auth-http.service.ts: HTTP service for calling Restful APIs
  • auth-module.config.ts: configure HttpInterceptor (Read more here)
  • auth-storage.factory.ts: custom storage to store access_token, refresh_token and other tokens
  • auth.factory.ts: contain auth configurations such as issuer, clientId, redirectUri
  • auth.module.ts: configure the injector, the compiler and help organize related things together
  • auth.service.ts: main service to oauth2 login flow, logout, validate token

How to contribute

Step 1. Create a branch from the master branch (Link to template)

  • Branch name format must be "#id_name_in_snake_case", i.e. #12345_feature_name

Step 2. Add new features, coding, and editing as you wish

Step 3. Wrap up code

  • Remove unused declared variables

  • Remove Console.log that you used for debugging

  • Code clean checkup

  • Use $ ng lint to check es2020 standard

Step 4. Submit a PR and ask for review

Step 5. Resolve reviewers' comments