progress

README.md

 <!-- Course Image -->
-![](./assets/images/Reactive-architecture-and-ux-patterns_angular_michael-hladky.png)
+![](docs/assets/images/Reactive-architecture-and-ux-patterns_angular_michael-hladky.png)
 
 <!-- Course Title -->
 # Reactive Architecture and UX Patterns
@@ -10,7 +10,7 @@
 <!-- Course Description -->
 
 <!-- Course Description Intro Images -->
-![](./assets/images/Reactive-architecture-and-ux-patterns_secondary_angular_michael-hladky.png)
+![](docs/assets/images/Reactive-architecture-and-ux-patterns_secondary_angular_michael-hladky.png)
 
 <!-- Course Description Text -->
 

docs/episode.theory.structure.md

+# [EPISODE_NAME] - Theory
+    
+## Intro
+<!-- 
+    General usage, type transformations, behaviour
+-->
+
+## Marble diagram
+
+![[EPISODE_NAME]-[DIAGRAM_NAME]](../assets/images/episode-one_diagram1.png)
+
+## Example Snippet
+<!--
+    The snippet should
+- include all used imports
+    ```typescript
+import { Observable, from } from 'rxjs';
+import { map } from 'rxjs/operators';
+```
+- use typings as little as possible
+- use the `$` convention
+- name sources `source$`, `source1$`, `sourceA$`
+    ```typescript
+const source$ = from([1, 2, 3]);
+```
+- name resulting compositions `result$`, `result1$`, `resultA$`
+    ```typescript
+const result$ = source$.pipe(
+...
+);
+```
+- should have one operator per line in the `pipe` section
+    ```typescript
+source$.pipe(
+    map(...),
+    filter(...)
+);
+```
+- if possible, should have comments in the same line
+    ```typescript
+source$.pipe(
+    map(...), // transformation here
+    filter(...) // only valid emissions
+);
+```
+- should have subscribe block in the same line
+    ```typescript
+result$
+    .subscribe(
+        ...
+    );
+```
+- should have an observer object as it's most clear
+    ```typescript
+result$
+    .subscribe({
+        next(num: number) { console.log(num); }
+    });
+```
+- should have emissions comma separated and in the same line. The type should be clearly visible
+    ```typescript
+result$
+    .subscribe({
+        next(v) { console.log(v); } // false, 1, 'two', '3', {}, []
+    });
+```
+- name resulting subscriptions `subscription`, `subscription1`, `subscriptionA`
+    ```typescript
+const subscription = result$
+    .subscribe({
+      ...
+    });
+```
+
+-->
+
+## Example explanation

docs/general.structure.md

+# Workspace Folder:
+
+Following workspace structure is assumed:
+
+**Root structure**
+```
+├── root
+│   ├── ...
+│   ├── docs
+│   │   ├── assetc
+│   │   │   ├── images
+│   │   │   │   ├── img1.png    
+│   │   │   │   └── img2.png    
+│   │   │   └── overview.md    
+│   ├── angular.json
+│   └── package.json    
+│
+└───src
+│   ├── app.component.ts    
+│   ├── app.menu.ts    
+│   ├── app.routes.ts 
+│   └─── app.module.ts 
+│   
+└───projects
+    ├── episode-1
+    │   ├── src
+    │   │   ├── lib
+    │   │   ├── docs
+    │   │   │   ├── assets
+    │   │   │   │   └── images
+    │   │   │   │        ├── img1.png    
+    │   │   │   │        └── img2.png    
+    │   │   │   └── episode-1.overview.md
+    │   │   ├── exercises
+    │   │   │   ├── session-1
+    │   │   │   │   ├── docs
+    │   │   │   │   │   ├── assets
+    │   │   │   │   │   │   └── images
+    │   │   │   │   │   │       ├── img1.png    
+    │   │   │   │   │   │       └── img2.png    
+    │   │   │   │   │   ├── session-1.tyeory.md
+    │   │   │   │   │   ├── session-1.exercise.md
+    │   │   │   │   │   └── session-1.solution.md
+    │   │   │   └── session-[n]
+    │   │   ├── episode-1.component.ts  
+    │   │   ├── episode-1.menu.ts    
+    │   │   ├── episode-1.routes.ts 
+    │   │   └── episode-1.module.ts  
+
+```
+# Episode Structure:
+
+Following episode details are assumed:
+
+**episode-one structure**
+
+```
+libs
+└───episode-one
+│   │   README.md
+│   │   ...
+│   └───src
+│       └───lib
+│          │         index.ts
+│          │         episode-one.routes.ts
+│          │         episode-one.module.ts
+│          │         episode-one.menu.ts
+│          │         …
+│          └───exercise
+│          │            episode-one.theory.md
+│          │            episode-one.exercise.md
+│          │            episode-one.solution.md
+│          │            episode-one.exercise.component.ts
+│          │            episode-one.solution.component.ts
+│          │            …
+│          └───assets
+│                    │    slides.pdf
+│                    │    episode-one.theory.mp4
+│                    │    episode-one.exercise.mp4
+│                    │    episode-one.solution.mp4 
+│                    │    …
+│                    └───images
+│                                 image-one.png
+│                                 image-two.png
+│                                 …
+└───episode-two
+└───episode-three
+└───...
+```
+
+## `exercise` folder
+
+### `episode-one.theory.ts`
+
+# Course/Series Structure:
+
+Following course/series details are assumed:
+
+**course-one structure**
+
+```
+apps
+└───course-one
+│   │   README.md
+│   │   ...
+│   └───src
+│       └───app
+│          │   app.module.ts
+│          │   app.routes.ts
+│          │   app.menu.ts
+│          │   app.component.ts
+│          │   ...
+│          └───assets
+│             course-one.heading.png
+│             …
+└───course-two
+└───course-three
+└───...
+```
+
+TODO:
+Content für ersten 3 Kapitel (bis einschließlich Top 10 Operatoren)
+
+
+

docs/overview.md

+<!-- Course Image -->
+![](docs/assets/images/Reactive-architecture-and-ux-patterns_angular_michael-hladky.png)
+
+<!-- Course Title -->
+# Reactive Architecture and UX Patterns
+
+<!-- Course Tagline -->
+#### Getting the tools and understanding to craft fully reactive angular applications!
+
+<!-- Course Description -->
+
+<!-- Course Description Intro Images -->
+![](docs/assets/images/Reactive-architecture-and-ux-patterns_secondary_angular_michael-hladky.png)
+
+<!-- Course Description Text -->
+
+## Overview
+
+Welcome to my course! My name is Michael and I will lead you through this course.
+
+The title of this course is reactive architecture and UX patterns.
+As those are pretty broad terms let be elaborate a bit on the scope and target audience.
+
+
+## Level of this Course
+
+
+First the level. For this course, you definitely need some fundamental knowledge about RxJS,
+ and you should use it regularly in your Angular projects.
+General terms like subscription handling, multi-casting, or hot/cold Observables should at least ring a little bell.
+
+If this is not the case no big deal. As this, in an online course, you can consume it as fast or slow as you like.
+It's all about fun and explores new things, so the most important to enjoy! :)
+
+
+## Content and Learning Goals
+
+This course starts with the fundamentals of the different operator groups we will use,
+and points out some interesting details.
+
+With that in mind, we will start to work on our first patterns.
+
+Exercises we will master are:
+- Combining streams
+  - Overview of combination the operators
+  - Deriving state from HTTP calls
+  - Prevent over fetching with simple Http Caching
+  - Editing and user-controlled  opt-In updates
+  - Optimize View updates and  Performance
+  - Comparison of the combination patterns
+-  Reactive State-Management    
+  - State aggregation
+  - Model vs ViewModel
+  - Sharing state and instances
+  - Lazy-ness and component initialization
+  - Immutability and gotchas in operators
+- Higher-Order Operators
+  - Overview of the different flattening strategies
+  (merge, concat, exhaust, switch)
+  - Usage in the user Interface
+  - Usage in business logic or data layer interaction like effects/epic of REDUX
+- Resilience and Error-Handling
+  - HTTP error handling
+  - In-depth understanding of error handling
+  - How to encapsulate error-prone code
+  - Offline caching and polling with exponential backoff
+  - Comparison of the different retry & repeat mechanisms
+
+
+Let’s jump right in and start with the first section.

projects/combining-streams/src/lib/exercises/forkJoin/docs/forkJoin.overview.md

+# forkJoin
+
+Learn about forkJoin by combining HTTP request.

projects/combining-streams/src/lib/exercises/forkJoin/docs/forkJoin.theory.md

-# `forkJoin` creation function - Theory
+# forkJoin behavior and gotchas
 
 This exercise is about combining data coming from multiple HTTP Endpoints into one single set of data.
 Combination operators or creation functions enable us to process emissions