+# Anchor Navigation
> Author: Thomas Laforge
-### Information
+### Run Application
-You begin with an application that has basic navigation and anchor navigation in the `HomeComponent`. However, using `href` recreates the path each time and refreshes the page.
+```bash
+npx nx serve anchor-scrolling
+```
-### Statement
+### Documentation and Instruction
-- Your task is to refactor this application to use the built-in navigation tool to better fit within the Angular Framework. You can explore the router, but it's better to stay within the template and use the `RouterLink` directive.
-- To improve the user experience, add smooth scrolling.
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve anchor-scrolling`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:21** that I will review and other dev can review.
-
-
-
-
-
-
-/
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/21-achor-scrolling.md/).
diff --git a/apps/bug-cd/README.md b/apps/bug-cd/README.md
index f52e1cf..1a66129 100644
--- a/apps/bug-cd/README.md
+++ b/apps/bug-cd/README.md
@@ -1,45 +1,13 @@
-
Bug Change Detection
+# Change Detection Bug
> Author: Thomas Laforge
-This challenge is inspired by a real-life example that I simplified to create this nice challenge.
+### Run Application
-### Information
+```bash
+npx nx serve bug-cd
+```
-In this small application, we have a navigation menu to route our application to either `barComponent` or `FooComponent`. However our application is not loading and no errors are displayed inside the console.
+### Documentation and Instruction
-### Statement
-
-The goal of the challenge is to debug this application and make it work.
-
-#### Hints
-
-
- Hint 1
-
- If you comment out `routerLinkActive="isSelected"` inside `NavigationComponent`: the application loads correctly.
-
-
-
- Hint 2
-
-If you open the [`RouterLinkActive` source code](https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link_active.ts) and go to **line 196**, Angular is calling `this.cdr.markForCheck` inside a microTask which triggers a new CD cycle. If you comment out this line, the application loads again, however the bug is not inside the Angular Framework. 😅😯
-
-
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve bug-cd`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:32** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/32-bug-cd.md/).
diff --git a/apps/context-outlet-type/README.md b/apps/context-outlet-type/README.md
index fe7a0a2..b7ed1db 100644
--- a/apps/context-outlet-type/README.md
+++ b/apps/context-outlet-type/README.md
@@ -1,49 +1,13 @@
-
NgTemplateOutlet Strongly Typed
+# Typed ContextOutlet
> Author: Thomas Laforge
-## Information
+### Run Application
-Angular offer the static function **ngTemplateContextGuard** to strongly type structural directive.
+```bash
+npx nx serve context-outlet-type
+```
-However the context of **NgTemplateOutlet** type is **Object**. But which the help of the above guard, we can improve that behavior.
+### Documentation and Instruction
-## Statement
-
-In this exercice, we want to learn how to strongly typed our ng-template in our AppComponent.
-
-This exercice has two level of complexity.
-
-### Level 1: known Interface
-
-Currently we have the following piece of code.
-
-
-
-As we can see, name is of type "any". We want to infer the correct type.
-
-### Level 2: generic Interface
-
-Currently we have the following piece of code.
-
-
-
-As we can see, student is of type "any". We want to infer the correct type.
-
-But in this part, we can pass to ListComponent, a list of **any object**. And we still want the correct type to be infered.
-
-## Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. **nx serve context-outlet-type**
-5. _...work On it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:4** that I will review and other dev can review.
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/4-context-outlet-typed.md/).
diff --git a/apps/create-harness/README.md b/apps/create-harness/README.md
index ab57cae..772d8af 100644
--- a/apps/create-harness/README.md
+++ b/apps/create-harness/README.md
@@ -1,55 +1,13 @@
-
Create a component harness
+# Harness Creation
> Author: Thomas Laforge
-### Information
+### Run Application
-The goal of this challenge is to create a test harness for `slider.component.ts`. The harness file, `slider.harness.ts`, has already been created.
-
-The following API needs to be implemented:
-
-```ts
- async clickPlus(): Promise ;
-
- async clickMinus(): Promise;
-
- async getValue(): Promise ;
-
- async getMinValue(): Promise;
-
- async disabled(): Promise;
-
- async setValue(value: number): Promise;
+```bash
+npx nx serve create-harness
```
-Additionally, you should create a `HarnessPredicate` with the default predicate and the `minValue` property.
+### Documentation and Instruction
-```ts
- static with(
- this: ComponentHarnessConstructor,
- options: SliderHarnessFilters = {}
- ): HarnessPredicate;
-```
-
-Lastly, you will need to create the test suite for `app.component`. Some default tests have already been written, but feel free to add as many tests as you want and create as many harness methods as you need.
-
-> Angular Material documentation can be found [here](https://material.angular.io/cdk/test-harnesses/overview)
-
-Good luck !!! 💪
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve create-harness`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:24** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/testing/24-harness-creation.md/).
diff --git a/apps/crud/README.md b/apps/crud/README.md
index 8fadba3..acd682c 100644
--- a/apps/crud/README.md
+++ b/apps/crud/README.md
@@ -1,63 +1,13 @@
-
CRUD application with local store
+# Crud application
> Author: Thomas Laforge
-## Information
+### Run Application
-Communicating and having a global/local state in sync with your backend is the heart of any application. You will need to master those following best practises to build strong and reliable Angular Application.
-
-## Statement
-
-In this exercice, you have a small CRUD application, which get a list of TODOS, update and delete some todo.
-
-Currently we have a working exemple but filled with lots of bad practices.
-
-### Step 1: refactor with best practices
-
-What you will need to do:
-
-- Avoid **any** as a type. Using Interface to leverage Typescript type system prevent errors
-- Use a **separate service** for all your http calls and use a **BehaviourSubject** for your todoList
-- Use **AsyncPipe** to suscribe to your todo list. _(Let you handle subscription, unsuscription and refresh of the page when data has changed)_, avoir manual subscribe when it's not needed
-- Don't **mutate** data
-
-```typescript
-// Avoid this
-this.todos[todoUpdated.id - 1] = todoUpdated;
-
-// Prefer something like this, but need to be improved because we still want the same order
-this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated];
+```bash
+npx nx serve crud
```
-- Use **ChangeDectection.OnPush**
+### Documentation and Instruction
-### Step 2: Improve
-
-- Add a **Delete** button: _Doc of fake API_
-- Handle **errors** correctly. _(Globaly)_
-- Add a Global **loading** indicator. _You can use MatProgressSpinnerModule_
-
-### Step 3: Maintainability!! add some test
-
-- Add 2/3 tests
-
-### Step 4: Awesomeness!!! master your state.
-
-- Use the **component store of ngrx** as a local state of your component. _(or any other 3rd Party lib)_
-- Have a **localize** Loading/Error indicator, e.g. only on the Todo being processed and **disable** all buttons of the processed Todo. _(Hint: you will need to create an ItemComponent)_
-
-## Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. **nx serve crud**
-5. _...work On it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:5** that I will review and other dev can review.
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/5-crud.md/).
diff --git a/apps/declarative-to-reactive/README.md b/apps/declarative-to-reactive/README.md
index 9c5e152..e7d891d 100644
--- a/apps/declarative-to-reactive/README.md
+++ b/apps/declarative-to-reactive/README.md
@@ -1,33 +1,13 @@
-
Declarative Programming to Reactive Programming
+# Highly Customizable CSS
> Author: Thomas Laforge
-
+### Run Application
-### Information
+```bash
+npx nx serve declarative-to-reactive
+```
-### Statement
+### Documentation and Instruction
-### Step 1
-
-### Step 2
-
-### Constraints:
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. **nx serve declarative-to-reactive**
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:13** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/13-styling.md/).
diff --git a/apps/decoupling/README.md b/apps/decoupling/README.md
index b670716..13e5ca4 100644
--- a/apps/decoupling/README.md
+++ b/apps/decoupling/README.md
@@ -1,43 +1,13 @@
-
decoupling component with InjectionToken
+# Decoupling Components
> Author: Thomas Laforge
-> Big thanks to **Robin Goetz** and his [Spartan Project](https://github.com/goetzrobin/spartan).
-> This challenge was proposed by Robin and is strongly inspired by his project.
+### Run Application
-### Information
+```bash
+npx nx serve decoupling
+```
-The goal of this challenge is to separate the behavior of a component from its style. For the purpose of this challenge, we will be working on a button element. When we click on it, we will toggle a _disabled_ property which will change the style of the element. This is quite useless in real life but the challenge aims to demonstate a useful concept.
+### Documentation and Instruction
-The behavior of the component (referred to as the _brain_ in the Spartan stack) is located in the brain library. The styling part (referred to as the _helmet_) is located inside the helmet library. Both libraries cannot depend on each other because we want to be able to publish them separatly. To help us address the issue, we are using the Nx enforce eslint rule. You can find more details [here](https://nx.dev/core-features/enforce-module-boundaries);
-
-However the button's helmet needs to access the state of the component to style the button differently based on its state. As mention above, we cannot import the `BtnDisabledDirective` directly into the helmet library as done currently. If you go to [`BtnHelmetDirective`](../../libs/decoupling/helmet/src/lib/btn-style.directive.ts), you will encounter a linting error. **A project tagged with "type:hlm" can only depend on libs tagged with "type:core"**.
-
-### Statement
-
-The goal of this challenge is to find a way to decouple both Directives.
-
-### Hint
-
-
- Hint 1
- Carefully read the title of the challenge 😇
-
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx lint decoupling-helmet` to visualize the error.
-5. `npx nx serve decoupling`
-6. _...work on it_
-7. Commit your work
-8. Submit a PR with a title beginning with **Answer:33** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/33-decoupling.md/).
diff --git a/apps/di/README.md b/apps/di/README.md
index 45fa7c4..6dfb608 100644
--- a/apps/di/README.md
+++ b/apps/di/README.md
@@ -1,40 +1,13 @@
-
Dependancy Injection
+# Master Dependancy Injection
> Author: Thomas Laforge
-### Information
+### Run Application
-To successfully complete this challenge, you will need to have a good understanding of how Dependency Injection works inside Angular.
+```bash
+npx nx serve di
+```
-The goal is to provide the CurrencyService at the row level, so that each row displays the correct currency. Currently, the CurrencyService is only provided at the table level, which results in an error as the same currency is displayed for each row, despite each product having a different currency.
+### Documentation and Instruction
-One way to achieve this is by adding a second argument to the pipe, but this is not allowed.
-
-### Statement
-
-- Your task is to display the correct currency for each row.
-
-### Constraints:
-
-- You cannot modify the pipe.
-- You cannot wrap the row inside a component, as this will break the layout.
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve di`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:16** that I will review and other dev can review.
-
-
-
-
-
-
-
-
-/
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/16-di.md/).
diff --git a/apps/interop-rxjs-signal/README.md b/apps/interop-rxjs-signal/README.md
index d6a6a51..6533b9e 100644
--- a/apps/interop-rxjs-signal/README.md
+++ b/apps/interop-rxjs-signal/README.md
@@ -1,26 +1,13 @@
-
interoperability Rxjs and Signal
+# Interoperability Rxjs/Signal
> Author: Thomas Laforge
-### Information
+### Run Application
-In this challenge, we have a small reactive application using RxJS and NgRx/Component-Store.
+```bash
+npx nx serve interop-rxjs-signal
+```
-The goal of this challenge is to use the new **Signal API** introduced in Angular v16. However, we should not convert everything. Certain portions of the code are better suited for RxJS rather than Signal. It is up to you to determine the threshold and observe how **Signal and RxJS coexist**, as well as how the interoperability is achieved in Angular.
+### Documentation and Instruction
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve interop-rxjs-signal`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:30** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/30-interop-rxjs-signal.md/).
diff --git a/apps/module-to-standalone/README.md b/apps/module-to-standalone/README.md
index 797b8db..b320965 100644
--- a/apps/module-to-standalone/README.md
+++ b/apps/module-to-standalone/README.md
@@ -1,34 +1,13 @@
-
refactor module to standalone
+# Module to Standalone
> Author: Thomas Laforge
-### Information
+### Run Application
-In v14, standalone components were released and made stable in v15. If you haven't played with them, it's never too late. You can try them out in this challenge.
+```bash
+npx nx serve module-to-standalone
+```
-Moreover, the goal is to see how Nx and standalone components work together, and experience the process of decoupling your app with Nx lib and standalone components.
+### Documentation and Instruction
-Finally, standalone components are very simple to understand, but routing/lazy-loaded components can be a bit harder to grasp. This challenge will allow you to manipulate components at different levels of nesting and work with lazy loaded routes.
-
-After completing this challenge, standalone components will no longer hold any secrets for you.
-
-### Statement
-
-The goal of this challenge is to migrate your application from module based components to standalone components.
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm install
-4. `npx nx serve module-to-standalone`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:31** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/31-module-to-standalone.md/).
diff --git a/apps/ngfor-enhancement/README.md b/apps/ngfor-enhancement/README.md
index 33bb772..947f01c 100644
--- a/apps/ngfor-enhancement/README.md
+++ b/apps/ngfor-enhancement/README.md
@@ -1,51 +1,13 @@
-
Directive enhancement
+# Directive Enhancement
> Author: Thomas Laforge
-## Information
+### Run Application
-Directive is a very powerful tool only offered by the Angular framework. You can apply the DRY principal by having shared logic inside a directive and applying it to any component you want.
-
-But the real power is that you can enhance an already existing directive which moreover doesn't **belong** to you.
-
-## Statement
-
-In this exercice, we have a want to display a list of persons. If the list is empty, you must display _" the list is empty !! "_.
-
-Currently we have :
-
-```typescript
-
-
- {{ person.name }}
-
-
- The list is empty !!
+```bash
+npx nx serve ngfor-enhancement
```
-We want to get rid of the ng-container by writing :
+### Documentation and Instruction
-```typescript
-
- {{ person.name }}
-
- The list is empty !!
-```
-
-The goal is to **improve the ngFor directive**
-
-## Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. **nx serve ngfor-enhancement**
-5. _...work On it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:3** that I will review and other dev can review.
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/3-directive-enhancement.md/).
diff --git a/apps/ngrx-1/README.md b/apps/ngrx-1/README.md
index f456e92..9bd8313 100644
--- a/apps/ngrx-1/README.md
+++ b/apps/ngrx-1/README.md
@@ -1,41 +1,13 @@
-
NgRx Effect vs Selector
+# Effect vs Selector
> Author: Thomas Laforge
-For this exercice, you will have a dashboard of activities displaying the name, the main teacher and a list of subtitutes.
+### Run Application
-## Information
+```bash
+npx nx serve ngrx-1
+```
-In NgRx, **selectors** is a very powerful tool often **misused**. You should use them as soon as you need to transform an already existing data in the store.
+### Documentation and Instruction
-- You shouldn't store **derived state**. This is error prone because when your data change, you will have to change it at multiple places => you should have only one place of truth with that data, and every transformation should be done in a **selector**.
-
-- Inside a component, you shouldn't transform a selector (using map operator), or you shouldn't have to call a selector from a function in your view. The useful data for a component should be done in a **selector**.
-
-## Statement
-
-##### You will have to
-
-1. Refactor this working example of a dashboard of activities.
-
-##### Rules:
-
-- Only **one action** should be dispatched from a component
-- Status effect is useless. Using **combineLatest** should be a red flag. And Effect are made for side effect, not transforming data. That's a selector role
-- Status state might not be useful, it's only a **derived state** of existing state.
-
-## Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. **nx serve ngrx-1**
-5. _...work On it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:2** that I will review and other dev can review.
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/ngrx/2-effect-selector.md/).
diff --git a/apps/ngrx-notification/README.md b/apps/ngrx-notification/README.md
index fccf7a8..bbd8d60 100644
--- a/apps/ngrx-notification/README.md
+++ b/apps/ngrx-notification/README.md
@@ -1,44 +1,13 @@
-
Ngrx Notification
+# Power of Effect
> Author: Thomas Laforge
-### Information
+### Run Application
-NgRx Effect is a very powerful library develop by the NgRx team. Effects subscribe to a HOT Observable and listen to any event dispatch from any place inside the application.
+```bash
+npx nx serve ngrx-notification
+```
-But what we often forget is that Effects can subscribe to ANY observables. Which means we can wrap a hot observable inside an effect and had logic in it.
+### Documentation and Instruction
-In this exercice, we will find a way to create a very powerful, scalable and maintanable push messages listener. Currently, the code is located inside a single file with a if else condition to send the push data to the right location. This code is not very scalable since we need to add more and more else, and so not very maintanable since the piece of code will become bigger and bigger.
-
-Also, we load the whole file at startup even if we haven't load some part of the application (lazy loading); and so we don't need to listen or update that part of the store. We need to decouple that logic.
-
-### Step 1
-
-create an injection token to hide the push service implementation.
-
-### Step 2
-
-create one ngrx effect, or component store effect for each push type, and implement your logic
-
-### Step 3
-
-load your effect only when necessary.
-the application contain a root route, a lazy loaded route and a component with a local state (implemented with Component store)
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. **nx serve ngrx-notification**
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:7** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/ngrx/7-power-effect.md/).
diff --git a/apps/overload/README.md b/apps/overload/README.md
index 1123dd7..27a4c02 100644
--- a/apps/overload/README.md
+++ b/apps/overload/README.md
@@ -1,33 +1,13 @@
-
Function overload
+# Function Overload
> Author: Thomas Laforge
-### Information
+### Run Application
-Angular uses TypeScript, and mastering TypeScript can help you avoid runtime errors by catching them at compile time.
+```bash
+npx nx serve overload`
+```
-In this challenge, we have a function to create a vehicle. However, each vehicle type requires different mandatory properties.
-Currently, we are getting an error at runtime if one property is missing and we don't get the return Type, which is not ideal.
-One solution would be to create a separate function for each vehicle type, but for this challenge, I want to use the same function and have TypeScript automatically complete the properties depending on the type passed as the first parameter.
+### Documentation and Instruction
-To achieve this, we will use overload functions.
-
-### Statement
-
-- Use function overload
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. **`npx nx serve overload`**
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:15** that I will review and other dev can review.
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/typescript/15-overload-fn.md/).
diff --git a/apps/performance/default-onpush/README.md b/apps/performance/default-onpush/README.md
index 8d4b638..94ecb8a 100644
--- a/apps/performance/default-onpush/README.md
+++ b/apps/performance/default-onpush/README.md
@@ -1,58 +1,13 @@
-
OnPush to optimize Change Detection
+# Default vs OnPush
> Author: Thomas Laforge
-### Information
+### Run Application
-In this series of challenges, you will learn how to optimize and enhance the performance of your Angular Application.
+```bash
+npx nx serve performance-default-onpush
+```
-The first step is to download the [Angular DevTools Chrome extention](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) if you haven't already done so. This extension allows you to profile your application and detect performance issues.
+### Documentation and Instruction
-In this challenge, we will explore the differences and impacts of using `ChangeDetectionStrategy.Default` versus `ChangeDetectionStrategy.OnPush`. To provide a clearer demonstration, I have added color enlightment to each component and each row in our application. However, in real-world scenarios, you will not have such visualization. This is where the Angular DevTool profiler comes to the rescue.
-
-Start by serving this application by running: `npx nx serve performance-default-onpush` inside your terminal. Then open Chrome DevTool by pressing **F12** and switch to the Angular Tab. From there you can select the Profiler tab as shown below.
-
-
-
-Start profiling your application and type some letters inside the input field. You will notice that each element of your application will flash at each change detection cycle and the profiler will show you a bar for each change detection cycle.
-
-If you click on one of the bars (indicated by the yellow arrow on the picture below), you can see that `PersonListComponent`, `RandomComponent` and all the `MatListItem` are impacted by the change detection cycle, even when we only interact with the input field.
-
-
-
-### Statement
-
-The goal of this challenge is to improve the clustering of change detection within the application.
-
-### Hints:
-
-
- Hint 1
-
-Use `ChangeDetectionStrategy.OnPush` but this will not be enough.
-
-
-
-
- Hint 2
-
-Create smaller components to better separate the input field from the list.
-
-
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve performance-default-onpush`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:34** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/34-default-onpush.md/).
diff --git a/apps/permissions/README.md b/apps/permissions/README.md
index f6ede3e..1256582 100644
--- a/apps/permissions/README.md
+++ b/apps/permissions/README.md
@@ -1,65 +1,13 @@
-
Permissions
+# Structural Directive
> Author: Thomas Laforge
-### Information
+### Run Application
-Structural directive is an important concept you will need to master to improve your angular skills and knowledge. This will be the first part of this challenge.
-
-Guard is also very important since you will always need it in every application you build.
-
-### Statement
-
-In LoginComponent, you will find 6 buttons corresponding at 6 differents users.
-
-- Admin
-- Manager
-- Reader
-- Writer
-- Reader and Writer
-- Client
-- Everyone
-
-### Step 1
-
-In **InformationComponent**, display the correct piece of information for each roles.
-
-#### Constraints:
-
-- no ngIf directive inside **InformationComponent**
-- importing the store inside **InformationComponent** is not allowed.
-
-You should end up with something like below:
-
-```html
-
Info for Role1
+```bash
+npx nx serve permissions
```
-```html
-
Info for Role1 and Role2
-```
+### Documentation and Instruction
-```html
-
Info Only for superadmin
-```
-
-### Step 2
-
-In **Routes.ts**, route all user to the correct **DashboardComponent** using **CanMatch** guard.
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. **nx serve permissions**
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:6** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/6-permissions.md/).
diff --git a/apps/pipe-easy/README.md b/apps/pipe-easy/README.md
index 66ceee9..1f8c3c3 100644
--- a/apps/pipe-easy/README.md
+++ b/apps/pipe-easy/README.md
@@ -1,31 +1,13 @@
-
Simple Pure pipe
+# Pure Pipe
> Author: Thomas Laforge
-The goal of this serie of 3 pipe challenges is to master PIPES in Angular.
+### Run Application
-Pure pipe are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pire are memoized. So they won't be recalculated every change detection cycle if the inputs hasn't changed.
+```bash
+npx nx serve pipe-easy
+```
-### Information:
+### Documentation and Instruction
-In this first exercice, you add calling a simple function inside your template. The goal is to convert it to a pipe.
-
-### Constraints:
-
-- must be strongly typed
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve pipe-easy`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:8** that I will review and other dev can review.
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/8-pipe-pure.md/).
diff --git a/apps/pipe-hard/README.md b/apps/pipe-hard/README.md
index b64c5e0..a6e6d96 100644
--- a/apps/pipe-hard/README.md
+++ b/apps/pipe-hard/README.md
@@ -1,32 +1,13 @@
-
Strongly typed pipe
+# Utility Wrapper Pipe
> Author: Thomas Laforge
-The goal of this serie of 3 pipe challenges is to master PIPES in Angular.
+### Run Application
-Pure pipe are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pire are memoized. So they won't be recalculated every change detection cycle if the inputs hasn't changed.
+```bash
+npx nx serve pipe-hard
+```
-### Information:
+### Documentation and Instruction
-In this third exercice, you want to access utils functions. Currently we cannot access them directly from your template. The goal is to create a specific pipe for this utils file where you will need to pass the name of the function you want to call and the needed arguments.
-
-### Constraints:
-
-- must be strongly typed
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve pipe-hard`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:10** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/10-pipe-utility.md/).
diff --git a/apps/pipe-intermediate/README.md b/apps/pipe-intermediate/README.md
index 0e8786c..095ccdd 100644
--- a/apps/pipe-intermediate/README.md
+++ b/apps/pipe-intermediate/README.md
@@ -1,32 +1,13 @@
-
WrapFn pipe
+# Wrap Function Pipe
> Author: Thomas Laforge
-The goal of this serie of 3 pipe challenges is to master PIPES in Angular.
+### Run Application
-Pure pipe are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pire are memoized. So they won't be recalculated every change detection cycle if the inputs hasn't changed.
+```bash
+npx nx serve pipe-intermediate
+```
-### Information:
+### Documentation and Instruction
-In this second exercice, you are calling multiple functions inside your template. You can create a specific pipe for each of the functions but this will be too cumbersome.
-The goal is to create a `wrapFn` pipe to wrap your callback function though a pipe. Your function MUST remain inside your component. `WrapFn` must be highly reusable.
-
-### Constraints:
-
-- must be strongly typed
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve pipe-intermediate`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:9** that I will review and other dev can review.
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/9-pipe-wrapFn.md/).
diff --git a/apps/router-input/README.md b/apps/router-input/README.md
index e38d128..bc3c681 100644
--- a/apps/router-input/README.md
+++ b/apps/router-input/README.md
@@ -1,23 +1,13 @@
-
Router Input
+# @RouterInput()
> Author: Thomas Laforge
-### Statement
+### Run Application
-In this small application, you can pass data though routing to `TestComponent`. v16 of Angular introduiced `RouterInput`. The goal of this exercice is to refactor the code to use the new `RouterInput` strategy.
+```bash
+npx nx serve router-input
+```
-### Submitting your work
+### Documentation and Instruction
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve router-input`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:22** that I will review and other dev can review.
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/22-router-input.md/).
diff --git a/apps/rxjs-pipe-bug/README.md b/apps/rxjs-pipe-bug/README.md
index 9f06555..0133609 100644
--- a/apps/rxjs-pipe-bug/README.md
+++ b/apps/rxjs-pipe-bug/README.md
@@ -1,41 +1,13 @@
-
BUG: RxJs chaining operators
+# High Order Operator Bug
> Author: Thomas Laforge
-Let's dive inside the wonderful word of RxJs.
+### Run Application
-This challenge is inspired by a real-life example.
+```bash
+npx nx serve rxjs-pipe-bug
+```
-### Presentation of the challenge
+### Documentation and Instruction
-#### User Story
-
-We need a button for each `Topic`. When we click on it, we delete all objects with this `Topic` in our database _(Fake DB in our case)_. Finally we display **All [topic] have been deleted** is everything was deleted successfully or **Error: deletion of some [topic] failed** if some deletions failed
-
-#### Constraints:
-
-We can only pass one object to our DB for deletion at the time. The DB will respond true if the data was successfully deleted and false otherwise.
-
-### What you need to do
-
-The QA team reports a **bug**. The UI shows **All [topic] have been deleted** all the time, even if some deletions fail.
-
-👉 Spot the bug and correct it.
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve rxjs-pipe-bug`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:11** that I will review and other dev can review.
-
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/rxjs/11-bug-chaining-operator.md/).
diff --git a/apps/rxjs-race-condition/README.md b/apps/rxjs-race-condition/README.md
index 78d92c2..7068bc0 100644
--- a/apps/rxjs-race-condition/README.md
+++ b/apps/rxjs-race-condition/README.md
@@ -1,41 +1,13 @@
-
RxJs race condition
+# Race Condition
> Author: Thomas Laforge
-### Information
+### Run Application
-The goal of this application is to display a list of topics in a modal when a button is clicked. The application functions correctly. However, your tech lead has asked you to add tests and they are failing.
+```bash
+npx nx serve rxjs-race-condition
+```
-### Statement
+### Documentation and Instruction
-Correct your application to pass the test
-
-### Constraints:
-
-- I can see you coming 🤣 => You CANNOT change the test (Test is working fine) 😳
-- You CANNOT change the `fakeGetHttpTopic` method. A delay has been added to fake a slow network.
-
-### Run the test
-
-HEADLESS : `npx nx component-test rxjs-race-condition`
-WATCH MODE : `npx nx component-test rxjs-race-condition --watch`
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve rxjs-race-condition`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:14** that I will review and other dev can review.
-
-
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/rxjs/14-race-condition.md/).
diff --git a/apps/scroll-cd/README.md b/apps/scroll-cd/README.md
index 870285b..fffad1e 100644
--- a/apps/scroll-cd/README.md
+++ b/apps/scroll-cd/README.md
@@ -1,42 +1,13 @@
-
Mastering Change Detection cycle with a scroll example
+# Optimize Change Detection
> Author: Thomas Laforge
-### Information
+### Run Application
-In this challenge, you will need to optimize the change detection cycles run by Angular.
+```bash
+npx nx serve scroll-cd
+```
-Zone.js triggers a change detection cycle each time a scroll event is dispatched. However we only want to show or hide a button at a specific scroll position. Therefore, we only want to refresh our application once.
+### Documentation and Instruction
-> You can vizualise how many times CD is triggered by installing the [Angular chrome devTool](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) and starting a new recording on the profiler tab.
-
-The following video will explain what is the goal of this challenge.
-
-
-
-### Statement
-
-Your goal for this challenge is to avoid all unnecessary change detection cycles and trigger a CD only when needed.
-
-#### Constraint:
-
-You cannot opt-out of zone.js. If this code is part of a large project and you opt out of zone.js, you will break many things within your application.
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. **nx serve scroll-cd**
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:12** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/12-scroll-cd.md/).
diff --git a/apps/styling/README.md b/apps/styling/README.md
index 1652a72..064de67 100644
--- a/apps/styling/README.md
+++ b/apps/styling/README.md
@@ -1,32 +1,13 @@
-
Customizable style
+# Highly Customizable CSS
> Author: Thomas Laforge
-Styling is an important part of a day job of a frontend developer often underestimated. In Angular application, I often see people use `@Input()` to customize the style of their component. But `@Input()` should be used only for the logic and we should use other technique for styling. We can take advantage of css variable and host-context.
+### Run Application
-In this challenge, you will need to use both to delete all `@Input()` from your code.
+```bash
+npx nx serve styling
+```
-Styling is an important aspect of a frontend developer's day job, but it is often underestimated. In Angular applications, I frequently see people using `@Input()` to customize the style of their components. However, `@Input()` should only be used for logic; and other techniques, such as CSS variables and host-context, should be used for styling.
+### Documentation and Instruction
-In this challenge, you will need to use both CSS variables and :host-context to remove all `@Input()` from your code.
-
-### Constraints:
-
-- In your final submission, your component should not contain any lines of code. All styling should be handled within the decorator _(or external css files if you prefer)_
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. **nx serve styling**
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:13** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/13-styling.md/).
diff --git a/apps/testing-checkbox/README.md b/apps/testing-checkbox/README.md
index 86d5dce..affcf5d 100644
--- a/apps/testing-checkbox/README.md
+++ b/apps/testing-checkbox/README.md
@@ -1,32 +1,13 @@
-
Test of a simple checkbox
+# Checkbox
> Author: Thomas Laforge
-### Information
+### Run Application
-This is the perfect example to get started with `Testing Library`.
+```bash
+npx nx serve testing-checkbox
+```
-You will need to only check if the button gets enabled when clicking on the checkbox
+### Documentation and Instruction
-You can look into debug function to get full power of `Testing Library` like:
-
-- logRoles(...);
-- screen.debug(); // you can pass a element as input
-- screen.logTestingPlaygroundURL(); // you can pass a element as input
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve testing-checkbox`
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:28** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/testing/28-checkbox.md/).
diff --git a/apps/testing-harness/README.md b/apps/testing-harness/README.md
index 957b76a..fcd12cc 100644
--- a/apps/testing-harness/README.md
+++ b/apps/testing-harness/README.md
@@ -1,32 +1,13 @@
-
Testing with Angular CDK Harness
+# Harness
> Author: Thomas Laforge
-### Statement:
+### Run Application
-The objective of this challenge is to have a better understanding of the CDK test harness API. In this initial challenge, we will only use Angular Material's built-in harnesses.
+```bash
+npx nx serve testing-harness
+```
-The goal is to test the functionality of `child.component.ts`. I have prepared a test suite that you need to implement, but feel free to include additional tests as well.
+### Documentation and Instruction
-**Note:** You are welcome to use Testing Library if you wish.
-
-Documentation for CDK Component Harness is [here](https://material.angular.io/cdk/test-harnesses/overview#api-for-test-authors)
-Documentation for Angular Material component is [here](https://material.angular.io/components/button/overview)
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve testing-harness` to play with the application
-5. `npx nx test testing-harness` to test your application with Testing Library
-6. _...work on it_
-7. Commit your work
-8. Submit a PR with a title beginning with **Answer:23** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/testing/23-harness.md/).
diff --git a/apps/testing-input-output/README.md b/apps/testing-input-output/README.md
index e7d4be5..14169b3 100644
--- a/apps/testing-input-output/README.md
+++ b/apps/testing-input-output/README.md
@@ -1,35 +1,13 @@
-
Input / Output testing
+# Input Output
> Author: Thomas Laforge
-### Statement:
+### Run Application
-We have a small counter application that increment or decrement a number.
-You can play with it by running : `npx nx serve testing-input-output`.
+```bash
+npx nx serve testing-input-output
+```
-The goal is to test `CounterComponent` with Testing library and Cypress
+### Documentation and Instruction
-The file named `counter.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test testing-nested`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
-
-For testing cypress, you will execute your test inside the `counter.component.cy.ts` and run `npx nx component-test testing-nested` to execute your test suits. You can add the `--watch` flag to execute your test in watch mode.
-
-I created some `it` blocks but feel free to add more test if you like to.
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve testing-input-output` to play with the application
-5. `npx nx test testing-input-output` to test your application with Testing Library
-6. `npx nx component-test testing-input-output --watch` to test your application with Cypress
-7. _...work on it_
-8. Commit your work
-9. Submit a PR with a title beginning with **Answer:19** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/testing/19-input-output.md/).
diff --git a/apps/testing-modal/README.md b/apps/testing-modal/README.md
index 597351e..8d36094 100644
--- a/apps/testing-modal/README.md
+++ b/apps/testing-modal/README.md
@@ -1,38 +1,13 @@
-
Modal testing
+# Modal
> Author: Thomas Laforge
-### Statement:
+### Run Application
-The goal of this challenge is to test dialogs inside your application.
-Within this program, you will get an error modal if the user doesn't input a name, while a confirmation modal will appear in all other cases.
-In the confirmation modal, if you click the "confirm" button, a message confirming the submission of the form will appear. Otherwise, if the user clicks on "Cancel", an error message will be displayed.
+```bash
+npx nx serve testing-modal
+```
-You can play with it by running : `npx nx serve testing-modal`.
+### Documentation and Instruction
-The goal is to test this behavior with Testing library and Cypress
-
-The file named `app.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test testing-modal`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
-
-For testing cypress, you will execute your test inside the `app.component.cy.ts` and run `npx nx component-test testing-modal` to execute your test suits. You can add the `--watch` flag to execute your test in watch mode.
-
-I created some `it` blocks but feel free to add more test if you like to.
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve testing-modal` to play with the application
-5. `npx nx test testing-modal` to test your application with Testing Library
-6. `npx nx component-test testing-modal --watch` to test your application with Cypress
-7. _...work on it_
-8. Commit your work
-9. Submit a PR with a title beginning with **Answer:20** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/testing/20-modal.md/).
diff --git a/apps/testing-nested/README.md b/apps/testing-nested/README.md
index 9710d04..7067d22 100644
--- a/apps/testing-nested/README.md
+++ b/apps/testing-nested/README.md
@@ -1,36 +1,13 @@
-
Nested component testing
+# Nested Components
> Author: Thomas Laforge
-### Statement:
+### Run Application
-We have a small application that send a title to a fake backend that you type inside a input.
-If the title is correctly typed, you can send the request otherwise you get a nice error and the request is not sent.
-You can play with it by running : `npx nx serve testing-nested`.
+```bash
+npx nx serve testing-nested
+```
-The goal is to test this behavior with Testing library and Cypress
+### Documentation and Instruction
-The file named `child.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test testing-nested`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
-
-For testing cypress, you will execute your test inside the `child.component.cy.ts` and run `npx nx component-test testing-nested` to execute your test suits. You can add the `--watch` flag to execute your test in watch mode.
-
-I created some `it` blocks but feel free to add more test if you like to.
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve testing-nested` to play with the application
-5. `npx nx test testing-nested` to test your application with Testing Library
-6. `npx nx component-test testing-nested --watch` to test your application with Cypress
-7. _...work on it_
-8. Commit your work
-9. Submit a PR with a title beginning with **Answer:18** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/testing/18-nested-comp.md/).
diff --git a/apps/testing-router-outlet/README.md b/apps/testing-router-outlet/README.md
index e0d62af..241aa82 100644
--- a/apps/testing-router-outlet/README.md
+++ b/apps/testing-router-outlet/README.md
@@ -1,42 +1,13 @@
-
Router Testing
+# Router
> Author: Thomas Laforge
-### Information
+### Run Application
-Testing is a crucial step in building scalable, maintainable, and trustworthy applications.
-Testing should never be avoided, even in the face of short deadlines or strong pressure from the product team.
-Nowadays, there are numerous awesome tools available that make it easy to test your code and provide a great developer experience.
+```bash
+npx nx serve testing-router-outlet
+```
-In this series of testing exercises, we will learn and master [Testing Library](https://testing-library.com/docs/) and [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/angular/overview) that simplifies DOM manipulation for testing any Angular component.
+### Documentation and Instruction
-### Statement:
-
-We have a functional application that lists available books for borrowing inside a library. If the book you searched is available, you will be directed to the corresponding book(s), otherwise, you will end up on an error page.
-
-The goal is to test this behavior with Testing library and Cypress
-
-The file named `app.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test testing-router-outlet`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
-
-For testing cypress, you will execute your test inside the `app.component.cy.ts` and run `npx nx component-test testing-router-outlet` to execute your test suits. You can add the `--watch` flag to execute your test in watch mode.
-
-I created some `it` blocks but feel free to add more test if you like to.
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve testing-router-outlet` to play with the application
-5. `npx nx test testing-router-outlet` to test your application with Testing Library
-6. `npx nx component-test testing-router-outlet --watch` to test your application with Cypress
-7. _...work on it_
-8. Commit your work
-9. Submit a PR with a title beginning with **Answer:17** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/testing/17-router.md/).
diff --git a/apps/testing-todos-list/README.md b/apps/testing-todos-list/README.md
index 82bebe9..b69b70e 100644
--- a/apps/testing-todos-list/README.md
+++ b/apps/testing-todos-list/README.md
@@ -1,33 +1,13 @@
-
Todo list app testing
+# Real-life Application
> Author: Thomas Laforge
-### Statement:
+### Run Application
-I built this more real life application to create more real life test cases.
-In this application, you can search for tickets, you can assign or finish them. You can also create new tickets.
+```bash
+npx nx serve testing-todos-list
+```
-This is a very simple application, but it will let you deal with asynchronous task and mocks
+### Documentation and Instruction
-The goal of this challenge is to write all test cases of `ticket.store` , `list.component` and `row.component` with Testing Library.
-
-You can also do it with cypress.
-
-### Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. `npx nx serve testing-todos-list` to play with the application
-5. `npx nx test testing-todos-list` to test your application with Testing Library
-6. `npx nx component-test testing-todos-list --watch` to test your application with Cypress
-7. _...work on it_
-8. Commit your work
-9. Submit a PR with a title beginning with **Answer:29** that I will review and other dev can review.
-
-
-
-
-
-
-_You can ask any question on_
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/testing/29-real-application.md/).
diff --git a/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md b/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md
index 54fbfee..eaf037c 100644
--- a/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md
+++ b/docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md
@@ -4,5 +4,51 @@ description: Challenge 12 about optimizing the number of change detection cycle
---
:::note
-WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/scroll-cd/README.md) if you want to do this challenge
+WIP
:::
+
+
Challenge #12
+
+### Information
+
+In this challenge, you will need to optimize the change detection cycles run by Angular.
+
+Zone.js triggers a change detection cycle each time a scroll event is dispatched. However we only want to show or hide a button at a specific scroll position. Therefore, we only want to refresh our application once.
+
+> You can vizualise how many times CD is triggered by installing the [Angular chrome devTool](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) and starting a new recording on the profiler tab.
+
+The following video will explain what is the goal of this challenge.
+
+
+
+### Statement
+
+Your goal for this challenge is to avoid all unnecessary change detection cycles and trigger a CD only when needed.
+
+#### Constraint:
+
+You cannot opt-out of zone.js. If this code is part of a large project and you opt out of zone.js, you will break many things within your application.
+
+---
+
+:::note
+Start the project by running: `npx nx serve scroll-cd`.
+:::
+
+:::tip[Reminder]
+Your PR title must start with Answer:12.
+:::
+
+
diff --git a/docs/src/content/docs/challenges/angular-performance/32-bug-cd.md b/docs/src/content/docs/challenges/angular-performance/32-bug-cd.md
index 16d6234..014b94f 100644
--- a/docs/src/content/docs/challenges/angular-performance/32-bug-cd.md
+++ b/docs/src/content/docs/challenges/angular-performance/32-bug-cd.md
@@ -4,5 +4,55 @@ description: Challenge 32 is about debugging an application that has issue when
---
:::note
-WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/bug-cd/README.md) if you want to do this challenge
+WIP
:::
+
+
Challenge #32
+
+This challenge is inspired by a real-life example that I simplified to create this nice challenge.
+
+### Information
+
+In this small application, we have a navigation menu to route our application to either `barComponent` or `FooComponent`. However our application is not loading and no errors are displayed inside the console.
+
+### Statement
+
+The goal of the challenge is to debug this application and make it work.
+
+#### Hints
+
+
+ Hint 1
+
+ If you comment out `routerLinkActive="isSelected"` inside `NavigationComponent`: the application loads correctly.
+
+
+
+ Hint 2
+
+If you open the [`RouterLinkActive` source code](https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link_active.ts) and go to **line 196**, Angular is calling `this.cdr.markForCheck` inside a microTask which triggers a new CD cycle. If you comment out this line, the application loads again, however the bug is not inside the Angular Framework. 😅😯
+
+
+
+---
+
+:::note
+Start the project by running: `npx nx serve bug-cd`.
+:::
+
+:::tip[Reminder]
+Your PR title must start with Answer:32.
+:::
+
+
diff --git a/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md b/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md
index 88ddef7..1c6426b 100644
--- a/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md
+++ b/docs/src/content/docs/challenges/angular-performance/34-default-onpush.md
@@ -4,5 +4,68 @@ description: Challenge 34 is about learning the difference between Default and O
---
:::note
-WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/performance/default-onpush/README.md) if you want to do this challenge
+WIP
:::
+
+
Challenge #34
+
+### Information
+
+In this series of challenges, you will learn how to optimize and enhance the performance of your Angular Application.
+
+The first step is to download the [Angular DevTools Chrome extention](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) if you haven't already done so. This extension allows you to profile your application and detect performance issues.
+
+In this challenge, we will explore the differences and impacts of using `ChangeDetectionStrategy.Default` versus `ChangeDetectionStrategy.OnPush`. To provide a clearer demonstration, I have added color enlightment to each component and each row in our application. However, in real-world scenarios, you will not have such visualization. This is where the Angular DevTool profiler comes to the rescue.
+
+Start by serving this application by running: `npx nx serve performance-default-onpush` inside your terminal. Then open Chrome DevTool by pressing **F12** and switch to the Angular Tab. From there you can select the Profiler tab as shown below.
+
+
+
+Start profiling your application and type some letters inside the input field. You will notice that each element of your application will flash at each change detection cycle and the profiler will show you a bar for each change detection cycle.
+
+If you click on one of the bars (indicated by the yellow arrow on the picture below), you can see that `PersonListComponent`, `RandomComponent` and all the `MatListItem` are impacted by the change detection cycle, even when we only interact with the input field.
+
+
+
+### Statement
+
+The goal of this challenge is to improve the clustering of change detection within the application.
+
+### Hints:
+
+
+ Hint 1
+
+Use `ChangeDetectionStrategy.OnPush` but this will not be enough.
+
+
+
+
+ Hint 2
+
+Create smaller components to better separate the input field from the list.
+
+
+
+---
+
+:::note
+Start the project by running: `npx nx serve performance-default-onpush`.
+:::
+
+:::tip[Reminder]
+Your PR title must start with Answer:34.
+:::
+
+
diff --git a/docs/src/content/docs/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/challenges/angular/10-pipe-utility.md
index 39940ac..9ed65d0 100644
--- a/docs/src/content/docs/challenges/angular/10-pipe-utility.md
+++ b/docs/src/content/docs/challenges/angular/10-pipe-utility.md
@@ -4,5 +4,42 @@ description: Challenge 10 is about creating a pipe to wrap utilities
---
:::note
-WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/pipe-hard/README.md) if you want to do this challenge
+WIP
:::
+
+
Challenge #10
+
+The goal of this serie of 3 pipe challenges is to master PIPES in Angular.
+
+Pure pipe are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pire are memoized. So they won't be recalculated every change detection cycle if the inputs hasn't changed.
+
+### Information:
+
+In this third exercice, you want to access utils functions. Currently we cannot access them directly from your template. The goal is to create a specific pipe for this utils file where you will need to pass the name of the function you want to call and the needed arguments.
+
+### Constraints:
+
+- must be strongly typed
+
+---
+
+:::note
+Start the project by running: `npx nx serve pipe-hard`.
+:::
+
+:::tip[Reminder]
+Your PR title must start with Answer:10.
+:::
+
+
diff --git a/docs/src/content/docs/challenges/angular/13-styling.md b/docs/src/content/docs/challenges/angular/13-styling.md
index b99e52b..7b9a042 100644
--- a/docs/src/content/docs/challenges/angular/13-styling.md
+++ b/docs/src/content/docs/challenges/angular/13-styling.md
@@ -4,5 +4,42 @@ description: Challenge 13 is about creating highly customizable CSS styles
---
:::note
-WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/styling/README.md) if you want to do this challenge
+WIP
:::
+
+
Challenge #13
+
+Styling is an important part of a day job of a frontend developer often underestimated. In Angular application, I often see people use `@Input()` to customize the style of their component. But `@Input()` should be used only for the logic and we should use other technique for styling. We can take advantage of css variable and host-context.
+
+In this challenge, you will need to use both to delete all `@Input()` from your code.
+
+Styling is an important aspect of a frontend developer's day job, but it is often underestimated. In Angular applications, I frequently see people using `@Input()` to customize the style of their components. However, `@Input()` should only be used for logic; and other techniques, such as CSS variables and host-context, should be used for styling.
+
+In this challenge, you will need to use both CSS variables and :host-context to remove all `@Input()` from your code.
+
+### Constraints:
+
+- In your final submission, your component should not contain any lines of code. All styling should be handled within the decorator _(or external css files if you prefer)_
+
+---
+
+:::note
+Start the project by running: `npx nx serve styling`.
+:::
+
+:::tip[Reminder]
+Your PR title must start with Answer:13.
+:::
+
+
diff --git a/docs/src/content/docs/challenges/angular/16-di.md b/docs/src/content/docs/challenges/angular/16-di.md
index 2e31a67..e50a0e6 100644
--- a/docs/src/content/docs/challenges/angular/16-di.md
+++ b/docs/src/content/docs/challenges/angular/16-di.md
@@ -4,5 +4,47 @@ description: Challenge 16 is about masjering how dependancy injection works
---
:::note
-WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/di/README.md) if you want to do this challenge
+WIP
:::
+
+
Challenge #16
+
+### Information
+
+To successfully complete this challenge, you will need to have a good understanding of how Dependency Injection works inside Angular.
+
+The goal is to provide the CurrencyService at the row level, so that each row displays the correct currency. Currently, the CurrencyService is only provided at the table level, which results in an error as the same currency is displayed for each row, despite each product having a different currency.
+
+One way to achieve this is by adding a second argument to the pipe, but this is not allowed.
+
+### Statement
+
+- Your task is to display the correct currency for each row.
+
+### Constraints:
+
+- You cannot modify the pipe.
+- You cannot wrap the row inside a component, as this will break the layout.
+
+---
+
+:::note
+Start the project by running: `npx nx serve di`.
+:::
+
+:::tip[Reminder]
+Your PR title must start with Answer:16.
+:::
+
+
diff --git a/docs/src/content/docs/challenges/angular/21-achor-scrolling.md b/docs/src/content/docs/challenges/angular/21-achor-scrolling.md
index 7f394b2..40af3cf 100644
--- a/docs/src/content/docs/challenges/angular/21-achor-scrolling.md
+++ b/docs/src/content/docs/challenges/angular/21-achor-scrolling.md
@@ -4,5 +4,39 @@ description: Challenge 21 is about navigating inside the page with anchor
---
:::note
-WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/anchor-scrolling/README.md) if you want to do this challenge
+WIP
:::
+
+
Challenge #21
+
+### Information
+
+You begin with an application that has basic navigation and anchor navigation in the `HomeComponent`. However, using `href` recreates the path each time and refreshes the page.
+
+### Statement
+
+- Your task is to refactor this application to use the built-in navigation tool to better fit within the Angular Framework. You can explore the router, but it's better to stay within the template and use the `RouterLink` directive.
+- To improve the user experience, add smooth scrolling.
+
+---
+
+:::note
+Start the project by running: `npx nx serve anchor-scrolling`.
+:::
+
+:::tip[Reminder]
+Your PR title must start with Answer:21.
+:::
+
+
diff --git a/docs/src/content/docs/challenges/angular/22-router-input.md b/docs/src/content/docs/challenges/angular/22-router-input.md
index 295068a..e88ad4f 100644
--- a/docs/src/content/docs/challenges/angular/22-router-input.md
+++ b/docs/src/content/docs/challenges/angular/22-router-input.md
@@ -4,5 +4,42 @@ description: Challenge 22 is about using the @Input decorator to retreive router
---
:::note
-WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/router-input/README.md) if you want to do this challenge
+WIP
:::
+
+
Challenge #22
+
+### Statement
+
+In this small application, you can pass data though routing to `TestComponent`. v16 of Angular introduiced `RouterInput`. The goal of this exercice is to refactor the code to use the new `RouterInput` strategy.
+
+---
+
+:::note
+Start the project by running: `npx nx serve router-input`.
+:::
+
+:::tip[Reminder]
+Your PR title must start with Answer:22.
+:::
+
+
diff --git a/docs/src/content/docs/challenges/angular/3-directive-enhancement.md b/docs/src/content/docs/challenges/angular/3-directive-enhancement.md
index 030534d..dbdd6ed 100644
--- a/docs/src/content/docs/challenges/angular/3-directive-enhancement.md
+++ b/docs/src/content/docs/challenges/angular/3-directive-enhancement.md
@@ -4,16 +4,42 @@ description: Challenge 3 is about enhancing a built-in directive
---
:::note
-WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/ngfor-enhancement/README.md) if you want to do this challenge
+WIP
:::
Challenge #3
## Information
+Directive is a very powerful tool only offered by the Angular framework. You can apply the DRY principal by having shared logic inside a directive and applying it to any component you want.
+
+But the real power is that you can enhance an already existing directive which moreover doesn't **belong** to you.
+
## Statement
-## Constraints
+In this exercice, we have a want to display a list of persons. If the list is empty, you must display _" the list is empty !! "_.
+
+Currently we have :
+
+```typescript
+
+
+ {{ person.name }}
+
+
+ The list is empty !!
+```
+
+We want to get rid of the ng-container by writing :
+
+```typescript
+
+ {{ person.name }}
+
+ The list is empty !!
+```
+
+The goal is to **improve the ngFor directive**
---
@@ -27,20 +53,20 @@ Your PR title must start with Answer:3.
-
-
-
-/
-_You can ask any question on_ 
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/21-achor-scrolling.md/).
diff --git a/apps/bug-cd/README.md b/apps/bug-cd/README.md
index f52e1cf..1a66129 100644
--- a/apps/bug-cd/README.md
+++ b/apps/bug-cd/README.md
@@ -1,45 +1,13 @@
-
-
-As we can see, name is of type "any". We want to infer the correct type.
-
-### Level 2: generic Interface
-
-Currently we have the following piece of code.
-
-
-
-As we can see, student is of type "any". We want to infer the correct type.
-
-But in this part, we can pass to ListComponent, a list of **any object**. And we still want the correct type to be infered.
-
-## Submitting your work
-
-1. Fork the project
-2. clone it
-3. npm ci
-4. **nx serve context-outlet-type**
-5. _...work On it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:4** that I will review and other dev can review.
-
-
-
-_You can ask any question on_ 
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/34-default-onpush.md/).
diff --git a/apps/permissions/README.md b/apps/permissions/README.md
index f6ede3e..1256582 100644
--- a/apps/permissions/README.md
+++ b/apps/permissions/README.md
@@ -1,65 +1,13 @@
-
-
-
-_You can ask any question on_