feat(docs): Firebase emulators (#721)

docs-source/docs/business-cases/archiving.md

@@ -10,7 +10,7 @@ I'd like to be able to archive the feedbacks I've received or sent after reading
 ## Technical specifications
 
 Archived feedback should not simply be deleted from the database, as they are used for statistical purposes.
-Instead, there is an `archived` field in the feedback documents.
+Instead, there is an `archived` field in the each feedback.
 
 The difficulty is that the feedback document is shared between the `giverEmail` and the `receiverEmail`.
 As a result, the `archived` field cannot be a simple boolean.

docs-source/docs/business-cases/feedback-draft.md

@@ -27,8 +27,8 @@ const feedbackRequestDraft: FeedbackRequestDraft = {
   // ----------------------------
   // The relevant data start here
   positive: 'You did great...', // Might be empty because its just a draft
-  negative: '', // Might be empty because its just a draft
-  comment: '',
+  negative: '', // Might be empty...
+  comment: '', // Might be empty...
 };
 ```
 
@@ -47,8 +47,8 @@ const feedbackDraft: FeedbackDraft = {
   // ----------------------------
   // The relevant data start here
   positive: 'You did great...', // Might be empty because its just a draft
-  negative: '', // Might be empty because its just a draft
-  comment: '',
+  negative: '', // Might be empty...
+  comment: '', // Might be empty...
   shared: true,
 };
 ```

docs-source/docs/business-cases/give-spontaneous-feedback.md

@@ -12,7 +12,7 @@ To learn more about draft, read the [Feedback draft](./feedback-draft) documenta
 
 This workflow is much simpler than the feedback request workflow.
 
-The requester must be authenticated.
+The `giverEmail` must be authenticated.
 
 Once the feedback is complete, only 1 Firestore document is added:
 

docs-source/docs/business-cases/shared-feedback.md

@@ -59,6 +59,7 @@ From there, the manager can access the shared feedbacks.
 
 - **Client**
   - [`SettingsComponent`](https://github.com/Zenika/feedzback/blob/main/client/src/app/settings/settings.component.ts)
+  - [`ManagerListComponent`](https://github.com/Zenika/feedzback/blob/main/client/src/app/manager/manager-list/manager-list.component.ts)
 - **Server**
   - [`EmployeeController`](https://github.com/Zenika/feedzback/blob/main/server/src/employee/employee.controller.ts)
   - [`FeedbackController`](https://github.com/Zenika/feedzback/blob/main/server/src/feedback/feedback.controller.ts)

docs-source/docs/ci-cd/circle-ci.md

@@ -143,19 +143,19 @@ Usage analytics can be set up using [these instructions](/docs/usage-analytics)
 
 ## Links
 
-### Development 🚧
+### Development (feedzback-v2-dev) 🚧
 
 - [Firebase console](https://console.firebase.google.com/project/feedzback-v2-dev)
 - [GCP console](https://console.cloud.google.com/home/dashboard?hl=en&project=feedzback-v2-dev)
 - [CircleCI context](https://app.circleci.com/settings/organization/github/Zenika/contexts/686ad410-3bba-4c59-a904-da3fe737eaa3?return-to=%2F)
 
-### Staging 🚀
+### Staging (feedzback-v2-staging) 🚀
 
 - [Firebase console](https://console.firebase.google.com/project/feedzback-v2-staging)
 - [GCP console](https://console.cloud.google.com/home/dashboard?hl=en&project=feedzback-v2-staging)
 - [CircleCI context](https://app.circleci.com/settings/organization/github/Zenika/contexts/489bddb3-fe2e-465e-91f9-b9ba7a155e0d?return-to=%2F)
 
-### Production 🎬
+### Production (feedzback-v2) 🎬
 
 - [Firebase console](https://console.firebase.google.com/project/feedzback-v2)
 - [GCP console](https://console.cloud.google.com/home/dashboard?hl=en&project=feedzback-v2)

docs-source/docs/documentation.md

@@ -11,7 +11,7 @@ npm install
 npm start
 ```
 
-Then visit the URL http://localhost:4000/feedzback/.
+Then visit the URL http://localhost:4100/feedzback/.
 
 ## Contribute
 

docs-source/docs/technical-guides/client/firebase-hosting.md

@@ -7,7 +7,7 @@ The client app is deployed on Firebase Hosting which uses 2 configuration files.
 
 The deployment is handled by Circle-CI, but let's understand how it actually works.
 
-Assuming the client app has been built with the `ng build` command.
+Assuming the client app has been built with the `npm run build:dev` command (equivalent to the `ng build` command with some options).
 The built artefact is then available in the `dist/client/browser` directory.
 
 ## `.firebaserc`
@@ -80,7 +80,7 @@ This task is done be the `post-build` NPM script:
 }
 ```
 
-The HTML page [`src/404.html`](https://github.com/Zenika/feedzback/blob/main/client/src/404.html) simply redirects the user to "localized" page.
+The HTML page [`src/404.html`](https://github.com/Zenika/feedzback/blob/main/client/src/404.html) simply redirects the user to "localized" page (`/fr` or `/en`).
 
 For example :
 

docs-source/docs/technical-guides/client/i18n.md

@@ -62,25 +62,7 @@ You must be consistent when the same text is used several times in the source co
 ## Running the development server for the `en` locale
 
 As you probably know, the Angular development server does not support multiple locales
-(and the theme switcher button will do nothing in this environment).
+(and the language switch button will not work in this environment).
 
-To run the development server for the `en` locale, simply replace `"fr"` with `"en"` in the `angular.json` configuration file
-(but do not commit this change to keep the French version as default locale).
-
-```json
-{
-  "projects": {
-    "client": {
-      "architect": {
-        "build": {
-          "configurations": {
-            "development": {
-              "localize": ["fr"] // <!-- replace with "en"
-            }
-          }
-        }
-      }
-    }
-  }
-}
-```
+- To run the development server for the `fr` locale, use the command: `npm run start`.
+- To run the development server for the `en` locale, use the command: `npm run start:en`.

docs-source/docs/technical-guides/client/styles.md

@@ -81,7 +81,7 @@ The [`src/app/app.scss`](https://github.com/Zenika/feedzback/blob/main/client/sr
 
 ## Material
 
-Material design is enabled for the entire HTML page using the `.mat-typography` css class on the body tag:
+Material design typography is enabled for the entire HTML page using the `.mat-typography` css class on the body tag:
 
 ```html title="client/src/index.html"
 <!DOCTYPE html>
@@ -93,7 +93,7 @@ Material design is enabled for the entire HTML page using the `.mat-typography`
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   </head>
-  <body class="mat-typography">
+  <body class="mat-app-background mat-typography">
     <app-root></app-root>
   </body>
 </html>

docs-source/docs/technical-guides/environments/local.md

@@ -0,0 +1,57 @@
+---
+title: Local
+---
+
+# Local dev environment
+
+As explained in the [installation guide](/docs/installation), you can run the _client_ and _server_ apps locally, for development purposes.
+But you are still connecting to the remote `feedzback-v2-dev` Firebase project for Authentication and Firestore services.
+
+The good news is that you can run the entire stack locally, using the [Firebase emulator suite](https://firebase.google.com/docs/emulator-suite)!
+
+:::note
+When using the Firebase emulator, the Google Auth provider is no longer available.
+Only the Email/Password provider is enabled.
+:::
+
+## `*:emulators` scripts
+
+In this execution context, the _client_ and _server_ apps are running in "dev" mode (with hot-reloading).
+
+Only the Firebase _Auth_ and _Firestore_ emulators are started. The _Hosting_ emulator is not used in this context.
+
+Here are the NPM scripts for this execution context:
+
+```json title="/client/package.json"
+{
+  "scripts": {
+    "start:emulators": "ng serve -c development-emulators",
+    "firebase:emulators": "firebase emulators:start --only auth:dev,firestore:dev --import ./firebase-emulators-data",
+    "server:emulators": "npm --prefix ../server run start:emulators",
+
+    // To launch the stack with a single command:
+    "emulators": "concurrently \"npm run firebase:emulators\" \"npm run server:emulators\" \"npm run start:emulators\""
+  }
+}
+```
+
+## `*:e2e` scripts
+
+In this execution context, the _client_ and _server_ apps are running in "build" mode (no hot-reloading).
+
+This time, not only are the Firebase _Auth_ and _Firestore_ emulators started, but so is the _Hosting_ emulator that serves the client application.
+
+This environment is the closest to the production environment (with the exception of the authentication method) and is therefore ideal for e2e testing.
+
+```json title="/client/package.json"
+{
+  "scripts": {
+    "firebase:e2e": "firebase emulators:start --only auth:dev,firestore:dev,hosting:dev --import ./firebase-emulators-data",
+    "server:e2e": "npm --prefix ../server run start:e2e",
+
+    // To launch the stack with a single command:
+    "pree2e": "npm run build:e2e",
+    "e2e": "concurrently \"npm run firebase:e2e\" \"npm run server:e2e\""
+  }
+}
+```

docs-source/docs/technical-guides/environments/overview.md

@@ -0,0 +1,41 @@
+---
+title: Overview
+---
+
+# Environments
+
+There are 3 remote environments: `production`, `staging` and `development`.
+
+## Auth providers
+
+In _production_ and _staging_ environments, only **Google Auth** provider is enabled.
+
+In _development_ environment, both **Google Auth** and **Email/Password** providers are enabled.
+This lets you create users on the fly (from the Firebase console) to test easily the sending and receiving of feedZbacks.
+
+## MailGun
+
+In _staging_ and _development_ environments, MailGun service sends all emails to a unique recipient.
+These emails can be viewed from the following mailing list:
+
+- https://groups.google.com/a/zenika.com/g/feedzback
+
+## URLs
+
+### Production
+
+- **Client app:** https://feedzback.znk.io
+- **Server app:** https://server.feedzback.znk.io
+- **Firebase console:** https://console.firebase.google.com/project/feedzback-v2
+
+### Staging
+
+- **Client app:** https://staging.feedzback.znk.io
+- **Server app:** https://server.staging.feedzback.znk.io
+- **Firebase console:** https://console.firebase.google.com/project/feedzback-v2-staging
+
+### Development
+
+- **Client app:** https://dev.feedzback.znk.io
+- **Server app:** https://server.dev.feedzback.znk.io
+- **Firebase console:** https://console.firebase.google.com/project/feedzback-v2-dev

docs-source/docs/technical-guides/server/introduction.md → docs-source/docs/technical-guides/server/swagger.md

@@ -1,3 +1,3 @@
-# Introduction
+# Swagger
 
 Discover the server API via [Swagger dev](https://server.dev.feedzback.znk.io/swagger) or [Swagger staging](https://server.staging.feedzback.znk.io/swagger).

docs-source/docs/technical-stack.md

@@ -12,6 +12,9 @@ Powered by [NestJS](https://nestjs.com/) framework.
 
 Powered by [Cloud Firestore](https://firebase.google.com/docs/firestore) database.
 
+Cloud Firestore is one of the Google Firebase services.
+The app also relies on other Firebase services like [Authentication](https://firebase.google.com/docs/auth) and [Hosting](https://firebase.google.com/docs/hosting).
+
 ## Documentation app
 
 This documentation is powered by the [Docusaurus](https://docusaurus.io/) framework.