From 0a2229971eaff29ada1638b750bd7025662c0b9b Mon Sep 17 00:00:00 2001
From: kabrunko-dev <kabrunko.dev@gmail.com>
Date: Thu, 8 Feb 2024 16:57:11 -0300
Subject: [PATCH 01/16] docs(pt): translate challenge 3

---
 .../angular/3-directive-enhancement.md        | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md

diff --git a/docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md b/docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md
new file mode 100644
index 0000000..808f997
--- /dev/null
+++ b/docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md
@@ -0,0 +1,46 @@
+---
+title: 🟠 Aprimoramento de Diretiva
+description: Desafio 3 é sobre o aprimoramento de uma diretiva nativa
+author: thomas-laforge
+challengeNumber: 3
+command: angular-ngfor-enhancement
+blogLink: https://medium.com/@thomas.laforge/ngfor-enhancement-716b44656a6c
+sidebar:
+  order: 101
+---
+
+:::note[Nota]
+Este exercício pode ser obsoleto com o novo controle de fluxo e do bloco de empty state dentro do bloco `@for`. No entanto, **diretivas estruturais** não serão removidas tão cedo, por isso você ainda pode aprender bastante com este exercício.
+:::
+
+## Informação
+
+Diretiva é uma ferramente poderosa oferecida pelo framework Angular. Você pode usar o princípio DRY compartilhando a lógica dentro de uma diretiva e aplicando ela em qualquer componente que quiser.
+
+Mas a verdadeira vantagem é que você consegue melhorar uma diretiva pré-existente que não **pertence** a você.
+
+## Declaração
+
+Neste exercício, queremos mostrar uma lista de pessoas. Se a lista está vazio, você deve mostrar _" the list is empty !! "_.
+
+Atualmente, temos:
+
+```typescript
+    <ng-container *ngIf="persons.length > 0; else emptyList">
+      <div *ngFor="let person of persons">
+        {{ person.name }}
+      </div>
+    </ng-container>
+    <ng-template #emptyList>The list is empty !!</ng-template>
+```
+
+Queremos nos livrar do `ng-container` escrevendo:
+
+```typescript
+    <div *ngFor="let person of persons; empty: emptyList">
+    {{ person.name }}
+    </div>
+    <ng-template #emptyList>The list is empty !!</ng-template>
+```
+
+Objetivo é **melhorar a diretiva ngFor**.

From 77c7476bfa67eaaa0333d010dce94319dbdbeaa5 Mon Sep 17 00:00:00 2001
From: kabrunko-dev <kabrunko.dev@gmail.com>
Date: Thu, 8 Feb 2024 18:11:06 -0300
Subject: [PATCH 02/16] docs(en): fit typo

Also remove whitespaces before colons and add code highlight on word 'ng-container'
---
 .../docs/challenges/angular/3-directive-enhancement.md    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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 41a0cad..3f89860 100644
--- a/docs/src/content/docs/challenges/angular/3-directive-enhancement.md
+++ b/docs/src/content/docs/challenges/angular/3-directive-enhancement.md
@@ -15,7 +15,7 @@ This exercice can feel obsolete with the new control flow and the empty block in
 
 ## 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.
+Directive is a very powerful tool only offered by the Angular framework. You can apply the DRY principle 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.
 
@@ -23,7 +23,7 @@ But the real power is that you can enhance an already existing directive which m
 
 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 :
+Currently we have:
 
 ```typescript
     <ng-container *ngIf="persons.length > 0; else emptyList">
@@ -34,7 +34,7 @@ Currently we have :
     <ng-template #emptyList>The list is empty !!</ng-template>
 ```
 
-We want to get rid of the ng-container by writing :
+We want to get rid of the `ng-container` by writing:
 
 ```typescript
     <div *ngFor="let person of persons; empty: emptyList">
@@ -43,4 +43,4 @@ We want to get rid of the ng-container by writing :
     <ng-template #emptyList>The list is empty !!</ng-template>
 ```
 
-The goal is to **improve the ngFor directive**
+The goal is to **improve the ngFor directive**.

From 0f4f14c3518e310f7203ae01e5350f781598e0d6 Mon Sep 17 00:00:00 2001
From: Wandrille <wandrille.guesdon@gmail.com>
Date: Fri, 9 Feb 2024 09:25:05 +0100
Subject: [PATCH 03/16] feat: challenge 45 React in Angular

Add new challenge: React in Angular.
---
 README.md                                     |   2 +-
 apps/angular/react-in-angular/.eslintrc.json  |  36 ++++++++
 apps/angular/react-in-angular/README.md       |  13 +++
 apps/angular/react-in-angular/jest.config.ts  |  22 +++++
 apps/angular/react-in-angular/project.json    |  80 ++++++++++++++++++
 .../react-in-angular/src/app/app.component.ts |  62 ++++++++++++++
 .../react-in-angular/src/app/app.config.ts    |   5 ++
 .../src/app/react/ReactPost.tsx               |  27 ++++++
 .../src/app/react/post.component.ts           |  17 ++++
 .../react-in-angular/src/assets/.gitkeep      |   0
 apps/angular/react-in-angular/src/favicon.ico | Bin 0 -> 15086 bytes
 apps/angular/react-in-angular/src/index.html  |  13 +++
 apps/angular/react-in-angular/src/main.ts     |   7 ++
 apps/angular/react-in-angular/src/styles.scss |   5 ++
 .../react-in-angular/src/test-setup.ts        |   2 +
 .../react-in-angular/tailwind.config.js       |  14 +++
 .../react-in-angular/tsconfig.app.json        |  10 +++
 .../react-in-angular/tsconfig.editor.json     |   7 ++
 apps/angular/react-in-angular/tsconfig.json   |  33 ++++++++
 .../react-in-angular/tsconfig.spec.json       |  15 ++++
 challenge-number.json                         |   4 +-
 .../challenges/angular/45-react-in-angular.md |  76 +++++++++++++++++
 docs/src/content/docs/es/index.mdx            |  11 +--
 docs/src/content/docs/fr/index.mdx            |   8 +-
 docs/src/content/docs/index.mdx               |   9 +-
 docs/src/content/docs/pt/index.mdx            |  13 +--
 docs/src/content/docs/ru/index.mdx            |  31 ++++---
 27 files changed, 485 insertions(+), 37 deletions(-)
 create mode 100644 apps/angular/react-in-angular/.eslintrc.json
 create mode 100644 apps/angular/react-in-angular/README.md
 create mode 100644 apps/angular/react-in-angular/jest.config.ts
 create mode 100644 apps/angular/react-in-angular/project.json
 create mode 100644 apps/angular/react-in-angular/src/app/app.component.ts
 create mode 100644 apps/angular/react-in-angular/src/app/app.config.ts
 create mode 100644 apps/angular/react-in-angular/src/app/react/ReactPost.tsx
 create mode 100644 apps/angular/react-in-angular/src/app/react/post.component.ts
 create mode 100644 apps/angular/react-in-angular/src/assets/.gitkeep
 create mode 100644 apps/angular/react-in-angular/src/favicon.ico
 create mode 100644 apps/angular/react-in-angular/src/index.html
 create mode 100644 apps/angular/react-in-angular/src/main.ts
 create mode 100644 apps/angular/react-in-angular/src/styles.scss
 create mode 100644 apps/angular/react-in-angular/src/test-setup.ts
 create mode 100644 apps/angular/react-in-angular/tailwind.config.js
 create mode 100644 apps/angular/react-in-angular/tsconfig.app.json
 create mode 100644 apps/angular/react-in-angular/tsconfig.editor.json
 create mode 100644 apps/angular/react-in-angular/tsconfig.json
 create mode 100644 apps/angular/react-in-angular/tsconfig.spec.json
 create mode 100644 docs/src/content/docs/challenges/angular/45-react-in-angular.md

diff --git a/README.md b/README.md
index 1e43bdf..de88144 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
 
 ## Challenges
 
-Check [all 44 challenges](https://angular-challenges.vercel.app/)
+Check [all 45 challenges](https://angular-challenges.vercel.app/)
 
 ## Contributors ✨
 
diff --git a/apps/angular/react-in-angular/.eslintrc.json b/apps/angular/react-in-angular/.eslintrc.json
new file mode 100644
index 0000000..8ebcbfd
--- /dev/null
+++ b/apps/angular/react-in-angular/.eslintrc.json
@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/angular/react-in-angular/README.md b/apps/angular/react-in-angular/README.md
new file mode 100644
index 0000000..0a8679a
--- /dev/null
+++ b/apps/angular/react-in-angular/README.md
@@ -0,0 +1,13 @@
+# React in angular
+
+> author: wandrille-guesdon
+
+### Run Application
+
+```bash
+npx nx serve angular-react-in-angular
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/45-react-in-angular/).
diff --git a/apps/angular/react-in-angular/jest.config.ts b/apps/angular/react-in-angular/jest.config.ts
new file mode 100644
index 0000000..92d5f25
--- /dev/null
+++ b/apps/angular/react-in-angular/jest.config.ts
@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'angular-react-in-angular',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/apps/angular/react-in-angular',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};
diff --git a/apps/angular/react-in-angular/project.json b/apps/angular/react-in-angular/project.json
new file mode 100644
index 0000000..8153ec8
--- /dev/null
+++ b/apps/angular/react-in-angular/project.json
@@ -0,0 +1,80 @@
+{
+  "name": "angular-react-in-angular",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/angular/react-in-angular/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/angular/react-in-angular",
+        "index": "apps/angular/react-in-angular/src/index.html",
+        "browser": "apps/angular/react-in-angular/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/angular/react-in-angular/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          "apps/angular/react-in-angular/src/favicon.ico",
+          "apps/angular/react-in-angular/src/assets"
+        ],
+        "styles": ["apps/angular/react-in-angular/src/styles.scss"],
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "angular-react-in-angular:build:production"
+        },
+        "development": {
+          "buildTarget": "angular-react-in-angular:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "angular-react-in-angular:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/angular/react-in-angular/jest.config.ts"
+      }
+    }
+  }
+}
diff --git a/apps/angular/react-in-angular/src/app/app.component.ts b/apps/angular/react-in-angular/src/app/app.component.ts
new file mode 100644
index 0000000..a914cc6
--- /dev/null
+++ b/apps/angular/react-in-angular/src/app/app.component.ts
@@ -0,0 +1,62 @@
+import { Component, signal } from '@angular/core';
+import { PostComponent } from './react/post.component';
+
+type Post = { title: string; description: string };
+
+@Component({
+  standalone: true,
+  imports: [PostComponent],
+  selector: 'app-root',
+  template: `
+    <div class="flex flex-col gap-2 p-12">
+      <div class="flex gap-2">
+        @for (post of posts; track post.title) {
+          <div class="rounded-lg bg-gray-100 p-4">
+            <app-post
+              (selectPost)="selectPost(post)"
+              [post]="post"
+              [isSelected]="post.title === selectedPost()?.title"></app-post>
+          </div>
+        }
+      </div>
+      <div class="flex flex-col gap-2 border p-4">
+        <span class="text-xs font-medium">Selected Post:</span>
+        <span class="text-lg text-blue-700">
+          {{ selectedPost()?.title ?? '-' }}
+        </span>
+      </div>
+    </div>
+  `,
+  styles: [''],
+})
+export class AppComponent {
+  readonly posts = [
+    {
+      title: 'A Deep Dive into Angular',
+      description:
+        "Explore Angular's core features, its evolution, and best practices in development for creating dynamic, efficient web applications in our comprehensive guide.",
+      pictureLink:
+        'https://images.unsplash.com/photo-1471958680802-1345a694ba6d',
+    },
+    {
+      title: 'The Perfect Combination',
+      description:
+        'Unveil the power of combining Angular & React in web development, maximizing efficiency and flexibility for building scalable, sophisticated applications.',
+      pictureLink:
+        'https://images.unsplash.com/photo-1518717202715-9fa9d099f58a',
+    },
+    {
+      title: 'Taking Angular to the Next Level',
+      description:
+        "Discover how integrating React with Angular elevates web development, blending Angular's structure with React's UI prowess for advanced applications.",
+      pictureLink:
+        'https://images.unsplash.com/photo-1532103050105-860af53bc6aa',
+    },
+  ];
+
+  readonly selectedPost = signal<Post | null>(null);
+
+  selectPost(post: Post) {
+    this.selectedPost.set(post);
+  }
+}
diff --git a/apps/angular/react-in-angular/src/app/app.config.ts b/apps/angular/react-in-angular/src/app/app.config.ts
new file mode 100644
index 0000000..81a6edd
--- /dev/null
+++ b/apps/angular/react-in-angular/src/app/app.config.ts
@@ -0,0 +1,5 @@
+import { ApplicationConfig } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [],
+};
diff --git a/apps/angular/react-in-angular/src/app/react/ReactPost.tsx b/apps/angular/react-in-angular/src/app/react/ReactPost.tsx
new file mode 100644
index 0000000..6ff7b4d
--- /dev/null
+++ b/apps/angular/react-in-angular/src/app/react/ReactPost.tsx
@@ -0,0 +1,27 @@
+// import React from 'react';
+
+export default function ReactPost(props: {
+  title?: string,
+  description?: string,
+  pictureLink?: string,
+  selected?: boolean,
+  handleClick: () => void
+}) {
+  return (
+    <div className={props.selected ? 'bg-blue-100' : 'bg-white'}>
+      <div className="max-w-sm rounded overflow-hidden shadow-lg">
+        <img className="w-full h-32 object-cover" src={props.pictureLink} alt={props.title}></img>
+        <div className="px-6 py-4 flex flex-col gap-2">
+          <div className="font-bold text-xl mb-2">{props.title}</div>
+          <p className="text-gray-700 text-base">
+            {props.description}
+          </p>
+          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                  onClick={props.handleClick}>
+            Select
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/angular/react-in-angular/src/app/react/post.component.ts b/apps/angular/react-in-angular/src/app/react/post.component.ts
new file mode 100644
index 0000000..2a35eac
--- /dev/null
+++ b/apps/angular/react-in-angular/src/app/react/post.component.ts
@@ -0,0 +1,17 @@
+import { Component, EventEmitter, input, Output } from '@angular/core';
+
+type Post = { title: string; description: string; pictureLink: string };
+
+@Component({
+  standalone: true,
+  selector: 'app-post',
+  template: `
+    <div></div>
+  `,
+  styles: [''],
+})
+export class PostComponent {
+  post = input<Post | undefined>(undefined);
+  isSelected = input<boolean>(false);
+  @Output() selectPost = new EventEmitter<void>();
+}
diff --git a/apps/angular/react-in-angular/src/assets/.gitkeep b/apps/angular/react-in-angular/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/angular/react-in-angular/src/favicon.ico b/apps/angular/react-in-angular/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..317ebcb2336e0833a22dddf0ab287849f26fda57
GIT binary patch
literal 15086
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
X*GBfq^a!*Sks)$E_17kl@BRM)`^nwN

literal 0
HcmV?d00001

diff --git a/apps/angular/react-in-angular/src/index.html b/apps/angular/react-in-angular/src/index.html
new file mode 100644
index 0000000..9d9dd39
--- /dev/null
+++ b/apps/angular/react-in-angular/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>angular-react-in-angular</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/apps/angular/react-in-angular/src/main.ts b/apps/angular/react-in-angular/src/main.ts
new file mode 100644
index 0000000..f3a7223
--- /dev/null
+++ b/apps/angular/react-in-angular/src/main.ts
@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);
diff --git a/apps/angular/react-in-angular/src/styles.scss b/apps/angular/react-in-angular/src/styles.scss
new file mode 100644
index 0000000..77e408a
--- /dev/null
+++ b/apps/angular/react-in-angular/src/styles.scss
@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* You can add global styles to this file, and also import other style files */
diff --git a/apps/angular/react-in-angular/src/test-setup.ts b/apps/angular/react-in-angular/src/test-setup.ts
new file mode 100644
index 0000000..15de72a
--- /dev/null
+++ b/apps/angular/react-in-angular/src/test-setup.ts
@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import 'jest-preset-angular/setup-jest';
diff --git a/apps/angular/react-in-angular/tailwind.config.js b/apps/angular/react-in-angular/tailwind.config.js
new file mode 100644
index 0000000..38183db
--- /dev/null
+++ b/apps/angular/react-in-angular/tailwind.config.js
@@ -0,0 +1,14 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/apps/angular/react-in-angular/tsconfig.app.json b/apps/angular/react-in-angular/tsconfig.app.json
new file mode 100644
index 0000000..5822042
--- /dev/null
+++ b/apps/angular/react-in-angular/tsconfig.app.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}
diff --git a/apps/angular/react-in-angular/tsconfig.editor.json b/apps/angular/react-in-angular/tsconfig.editor.json
new file mode 100644
index 0000000..8ae117d
--- /dev/null
+++ b/apps/angular/react-in-angular/tsconfig.editor.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {
+    "types": ["jest", "node"]
+  }
+}
diff --git a/apps/angular/react-in-angular/tsconfig.json b/apps/angular/react-in-angular/tsconfig.json
new file mode 100644
index 0000000..7a9f4b7
--- /dev/null
+++ b/apps/angular/react-in-angular/tsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json",
+    },
+    {
+      "path": "./tsconfig.spec.json",
+    },
+    {
+      "path": "./tsconfig.editor.json",
+    },
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true,
+  },
+}
diff --git a/apps/angular/react-in-angular/tsconfig.spec.json b/apps/angular/react-in-angular/tsconfig.spec.json
new file mode 100644
index 0000000..1a4817a
--- /dev/null
+++ b/apps/angular/react-in-angular/tsconfig.spec.json
@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/challenge-number.json b/challenge-number.json
index a48a4f1..6970465 100644
--- a/challenge-number.json
+++ b/challenge-number.json
@@ -1,6 +1,6 @@
 {
-  "total": 44,
+  "total": 45,
   "🟢": 16,
   "🟠": 120,
-  "🔴": 208
+  "🔴": 209
 }
diff --git a/docs/src/content/docs/challenges/angular/45-react-in-angular.md b/docs/src/content/docs/challenges/angular/45-react-in-angular.md
new file mode 100644
index 0000000..6aae8fb
--- /dev/null
+++ b/docs/src/content/docs/challenges/angular/45-react-in-angular.md
@@ -0,0 +1,76 @@
+---
+title: 🔴 React in angular
+description: Challenge 45 is about learning how to benefit from the numerous libraries in React
+author: Wandrille Guesdon
+challengeNumber: 45
+command: angular-react-in-angular
+sidebar:
+  order: NaN
+  badge: New
+---
+
+The goal of this challenge is to use a React component inside an Angular application.
+
+Many components are available in React, and it can be interesting to use them in an Angular application. The goal is to create a React component and use it in an Angular application.
+
+## Information
+
+In this challenge, we have a simple application and a react component `ReactPost` in `app/react` to illustrate a react component from a library.
+
+## Statement
+
+- Your task is to display the posts with the React component `ReactPost`.
+- When you select a post, the post should be highlighted.
+
+In order to play with the react component, you should start by installing the react dependencies.
+
+```bash
+npm i --save react react-dom
+npm i --save-dev @types/react @types/react-dom
+```
+
+## Constraints
+
+- Do not transform the react component in an angular component. The React component is pretty simple and can be written with ease in Angular. But **the goal is to use the React component**.
+
+### Hint
+
+<details>
+  <summary>Hint 1 - Configuration</summary>
+  Allow the React files in tsconfig.json
+
+```
+{
+...
+"compilerOptions": {
+  ...
+  "jsx": "react"
+},
+...
+}
+```
+
+</details>
+
+<details>
+  <summary>Hint 2 - Initialization</summary>
+  Create a react root with `createRoot(...)`
+</details>
+
+<details>
+  <summary>Hint 3 - Display</summary>
+  To render the component, it should look like this:
+  
+    ```
+    <react root>.render(
+        <React.StrictMode>
+        ...
+        </React.StrictMode>
+    )
+    ``` 
+</details>
+
+<details>
+  <summary>Hint 4 - Design</summary>
+  Do not forget to allow the react file in Tailwind.
+</details>
diff --git a/docs/src/content/docs/es/index.mdx b/docs/src/content/docs/es/index.mdx
index e164844..ce07092 100644
--- a/docs/src/content/docs/es/index.mdx
+++ b/docs/src/content/docs/es/index.mdx
@@ -23,16 +23,16 @@ hero:
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 import MyIcon from '../../../components/MyIcon.astro';
-import SubscriptionForm from '../../../components/SubscriptionForm.astro'
+import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <CardGrid>
-<Card title="44 Desafíos">
-  Este repositorio contiene 44 desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>.
+<Card title="45 Desafíos">
+  Este repositorio contiene 45 Desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>.
   Estos desafíos se resuelven en torno a problemas de la vida real o características específicas para mejorar tus habilidades.
 </Card>
 
 <Card title="Suscríbete para ser notificado sobre los últimos retos">
-<SubscriptionForm isNote={false} lang="es"/>
+  <SubscriptionForm isNote={false} lang="es" />
 </Card>
 
 <Card title="Conviértete en un Contribuidor de OSS">
@@ -57,7 +57,8 @@ import SubscriptionForm from '../../../components/SubscriptionForm.astro'
 </Card>
 
 <Card title="Prepárate para Entrevistas">
-  Completar estos desafíos te preparará para cualquier desafío técnico que puedas encontrar en un rol de frontend durante las entrevistas.
+  Completar estos desafíos te preparará para cualquier desafío técnico que
+  puedas encontrar en un rol de frontend durante las entrevistas.
 </Card>
 
 <Card title="Patrocinio">
diff --git a/docs/src/content/docs/fr/index.mdx b/docs/src/content/docs/fr/index.mdx
index 892cda6..2388d8d 100644
--- a/docs/src/content/docs/fr/index.mdx
+++ b/docs/src/content/docs/fr/index.mdx
@@ -25,15 +25,15 @@ hero:
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 import MyIcon from '../../../components/MyIcon.astro';
-import SubscriptionForm from '../../../components/SubscriptionForm.astro'
+import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <CardGrid>
-<Card title="44 Défis">
-    Ce répertoire rassemble 44 défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
+<Card title="45 Défis">
+    Ce répertoire rassemble 45 Défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
 </Card>
 
 <Card title="Subscribe to get notify of latest challenges">
-<SubscriptionForm isNote={false} lang="fr"/>
+  <SubscriptionForm isNote={false} lang="fr" />
 </Card>
 
 <Card title="Devenir un Mainteneur OSS">
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 968084a..7185c30 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -24,17 +24,16 @@ hero:
 import { Card, CardGrid } from '@astrojs/starlight/components';
 import MyIcon from '../../components/MyIcon.astro';
 
-import SubscriptionForm from '../../components/SubscriptionForm.astro'
-
+import SubscriptionForm from '../../components/SubscriptionForm.astro';
 
 <CardGrid>
-<Card title="44 Challenges">
-    This repository gathers 44 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
+<Card title="45 Challenges">
+    This repository gathers 45 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
     These challenges resolve around real-life issues or specific features to elevate your skills.
 </Card>
 
 <Card title="Subscribe to get notify of latest challenges">
-<SubscriptionForm isNote={false}/>
+  <SubscriptionForm isNote={false} />
 </Card>
 
 <Card title="Become an OSS Maintainer">
diff --git a/docs/src/content/docs/pt/index.mdx b/docs/src/content/docs/pt/index.mdx
index 3004dae..a2bd9bb 100644
--- a/docs/src/content/docs/pt/index.mdx
+++ b/docs/src/content/docs/pt/index.mdx
@@ -23,19 +23,20 @@ hero:
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 import MyIcon from '../../../components/MyIcon.astro';
-import SubscriptionForm from '../../../components/SubscriptionForm.astro'
+import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <CardGrid>
-  <Card title="44 Desafios">
-    Este repositório possui 44 desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
+  <Card title="45 Desafios">
+    Este repositório possui 45 Desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
     <b>Ngrx</b> e <b>Typescript</b>.
     Esses desafios são voltados para problemas reais ou funcionalidades específicas afim de
     melhorar suas habilidades.
   </Card>
 
-  <Card title="Inscreva-se para ser notificado do desafio mais recente">
-  <SubscriptionForm isNote={false} lang="pt"/>
-  </Card>
+{' '}
+<Card title="Inscreva-se para ser notificado do desafio mais recente">
+  <SubscriptionForm isNote={false} lang="pt" />
+</Card>
 
 {' '}
 
diff --git a/docs/src/content/docs/ru/index.mdx b/docs/src/content/docs/ru/index.mdx
index ac0cb90..349ac70 100644
--- a/docs/src/content/docs/ru/index.mdx
+++ b/docs/src/content/docs/ru/index.mdx
@@ -23,36 +23,38 @@ hero:
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 import MyIcon from '../../../components/MyIcon.astro';
-import SubscriptionForm from '../../../components/SubscriptionForm.astro'
+import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <CardGrid>
-<Card title="44 Испытания">
-  Этот репозиторий содержит 44 испытания, связанных с <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
+<Card title="45 Испытания">
+  Этот репозиторий содержит 45 Испытания, связанных с <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
   Испытания основаны на реальных задачах или инструментах для того, чтобы прокачать вас.
 </Card>
 
 <Card title="Subscribe to get notify of latest challenges">
-<SubscriptionForm isNote={false} lang="ru"/>
+  <SubscriptionForm isNote={false} lang="ru" />
 </Card>
 
 <Card title="Станьте мейнтейнером открытого программного обеспечения (OSS)">
-  Одна из целей этого репозитория <b>снизить барьер</b> для разработки
-  открытого программного обеспечения (OSS). Решив эти задачи, вы поймете,
-  как начать вносить свой вклад в любой другой проект с открытым исходным кодом.
+  Одна из целей этого репозитория <b>снизить барьер</b> для разработки открытого
+  программного обеспечения (OSS). Решив эти задачи, вы поймете, как начать
+  вносить свой вклад в любой другой проект с открытым исходным кодом.
 </Card>
 
 <Card title="Учитесь вместе с другими">
-  Изучение и использование нового фреймворка всегда сопряжено с трудностями.
-  В этом наборе испытаний содержатся реальные примеры задач, чтобы закрепить на практике то, чему вы научились.
-  Любой может оставить комментарий или предложить помощь.
+  Изучение и использование нового фреймворка всегда сопряжено с трудностями. В
+  этом наборе испытаний содержатся реальные примеры задач, чтобы закрепить на
+  практике то, чему вы научились. Любой может оставить комментарий или
+  предложить помощь.
   <b>
-    Учиться одному - здорово, но обучение вместе с другими поможет вам добиться большего.
+    Учиться одному - здорово, но обучение вместе с другими поможет вам добиться
+    большего.
   </b>
 </Card>
 
 <Card title="Вносите свой вклад">
   У вас есть идея или интересный баг? Не стесняйтесь;{' '}
-  <b>Создавайте свои  собственные испытания</b> не теряя времени.
+  <b>Создавайте свои собственные испытания</b> не теряя времени.
 </Card>
 
 <Card title="Подготовьтесь к собеседованию">
@@ -61,8 +63,9 @@ import SubscriptionForm from '../../../components/SubscriptionForm.astro'
 </Card>
 
 <Card title="Поддержка">
-  Это бесплатный проект, и он будет оставаться таковым как можно дольше.
-  Однако вся работа ведется в мое свободное время, включая создание новых испытаний и ревью их решений(PRs).
+  Это бесплатный проект, и он будет оставаться таковым как можно дольше. Однако
+  вся работа ведется в мое свободное время, включая создание новых испытаний и
+  ревью их решений(PRs).
   <b>Спонсорство может поддержать меня и способствовать развитию проекта</b>.
 </Card>
 

From 7458977d354145ad34f03ce8e987313b2d105ff0 Mon Sep 17 00:00:00 2001
From: Wandrille <wandrille.guesdon@gmail.com>
Date: Fri, 9 Feb 2024 09:25:05 +0100
Subject: [PATCH 04/16] feat: add answer for challenge 45

add one possible answer for the new challenge 45.
---
 .../src/app/react/ReactPost.tsx               |  2 +-
 .../src/app/react/post.component.tsx          | 48 +++++++++++
 .../react-in-angular/tailwind.config.js       |  2 +-
 apps/angular/react-in-angular/tsconfig.json   |  1 +
 package-lock.json                             | 84 +++++++++++++++++++
 package.json                                  |  4 +
 6 files changed, 139 insertions(+), 2 deletions(-)
 create mode 100644 apps/angular/react-in-angular/src/app/react/post.component.tsx

diff --git a/apps/angular/react-in-angular/src/app/react/ReactPost.tsx b/apps/angular/react-in-angular/src/app/react/ReactPost.tsx
index 6ff7b4d..a49d932 100644
--- a/apps/angular/react-in-angular/src/app/react/ReactPost.tsx
+++ b/apps/angular/react-in-angular/src/app/react/ReactPost.tsx
@@ -1,4 +1,4 @@
-// import React from 'react';
+import React from 'react';
 
 export default function ReactPost(props: {
   title?: string,
diff --git a/apps/angular/react-in-angular/src/app/react/post.component.tsx b/apps/angular/react-in-angular/src/app/react/post.component.tsx
new file mode 100644
index 0000000..882e21b
--- /dev/null
+++ b/apps/angular/react-in-angular/src/app/react/post.component.tsx
@@ -0,0 +1,48 @@
+import { AfterViewInit, Component, ElementRef, EventEmitter, input, OnChanges, Output, ViewChild } from '@angular/core';
+import { createRoot, Root } from 'react-dom/client';
+import React from 'react';
+import ReactPost from './ReactPost';
+
+type Post = { title: string; description: string, pictureLink: string };
+
+
+@Component({
+  standalone: true,
+  selector: 'app-post',
+  template: `
+    <div #react></div>`,
+  styles: ['']
+})
+export class PostComponent implements AfterViewInit, OnChanges {
+  @ViewChild('react', { static: true }) containerRef!: ElementRef;
+
+  post = input<Post | undefined>(undefined);
+  isSelected = input<boolean>(false);
+  @Output() selectPost = new EventEmitter<void>();
+  root?: Root;
+
+  ngOnChanges(): void {
+    this.render();
+  }
+
+  ngAfterViewInit() {
+    this.root = createRoot(this.containerRef.nativeElement);
+    this.render();
+  }
+
+  private render() {
+    if (this.root) {
+      this.root.render(
+        <React.StrictMode>
+          <ReactPost
+            title={this.post()?.title}
+            description={this.post()?.description}
+            pictureLink={this.post()?.pictureLink}
+            handleClick={() => this.selectPost.emit()}
+            selected={this.isSelected()}
+          />
+        </React.StrictMode>
+      );
+    }
+  }
+}
diff --git a/apps/angular/react-in-angular/tailwind.config.js b/apps/angular/react-in-angular/tailwind.config.js
index 38183db..99b4c14 100644
--- a/apps/angular/react-in-angular/tailwind.config.js
+++ b/apps/angular/react-in-angular/tailwind.config.js
@@ -4,7 +4,7 @@ const { join } = require('path');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html,tsx}'),
     ...createGlobPatternsForDependencies(__dirname),
   ],
   theme: {
diff --git a/apps/angular/react-in-angular/tsconfig.json b/apps/angular/react-in-angular/tsconfig.json
index 7a9f4b7..3c5ef57 100644
--- a/apps/angular/react-in-angular/tsconfig.json
+++ b/apps/angular/react-in-angular/tsconfig.json
@@ -9,6 +9,7 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "jsx": "react",
   },
   "files": [],
   "include": [],
diff --git a/package-lock.json b/package-lock.json
index 7952718..b292ca4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,8 @@
         "@rx-angular/template": "^17.0.0",
         "@swc/helpers": "0.5.3",
         "@tanstack/angular-query-experimental": "^5.12.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "rxjs": "7.8.1",
         "tailwindcss": "^3.3.5",
         "tslib": "^2.3.0",
@@ -71,6 +73,8 @@
         "@testing-library/user-event": "^14.5.1",
         "@types/jest": "29.4.0",
         "@types/node": "18.16.9",
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19",
         "@typescript-eslint/eslint-plugin": "6.11.0",
         "@typescript-eslint/parser": "6.11.0",
         "all-contributors-cli": "^6.26.1",
@@ -8837,6 +8841,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.11",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
+      "dev": true
+    },
     "node_modules/@types/qs": {
       "version": "6.9.11",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.11.tgz",
@@ -8847,6 +8857,26 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
+    "node_modules/@types/react": {
+      "version": "18.2.55",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz",
+      "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
+      "dev": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.2.19",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
+      "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -8867,6 +8897,12 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
+      "dev": true
+    },
     "node_modules/@types/semver": {
       "version": "7.5.6",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
@@ -12674,6 +12710,12 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "devOptional": true
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
+    },
     "node_modules/cuint": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
@@ -20348,6 +20390,17 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -24012,6 +24065,29 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -24972,6 +25048,14 @@
         "node": ">=v12.22.7"
       }
     },
+    "node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
diff --git a/package.json b/package.json
index 3507f1b..a4aa3dd 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,8 @@
     "@rx-angular/template": "^17.0.0",
     "@swc/helpers": "0.5.3",
     "@tanstack/angular-query-experimental": "^5.12.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rxjs": "7.8.1",
     "tailwindcss": "^3.3.5",
     "tslib": "^2.3.0",
@@ -74,6 +76,8 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "29.4.0",
     "@types/node": "18.16.9",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "6.11.0",
     "@typescript-eslint/parser": "6.11.0",
     "all-contributors-cli": "^6.26.1",

From ebf6b135f88c36ec075ee93941eed194e99312bf Mon Sep 17 00:00:00 2001
From: Wandrille <wandrille.guesdon@gmail.com>
Date: Thu, 15 Feb 2024 07:54:55 +0100
Subject: [PATCH 05/16] Revert "feat: add answer for challenge 45"

This reverts commit 7458977d354145ad34f03ce8e987313b2d105ff0.
---
 .../src/app/react/ReactPost.tsx               |  2 +-
 .../src/app/react/post.component.tsx          | 48 -----------
 .../react-in-angular/tailwind.config.js       |  2 +-
 apps/angular/react-in-angular/tsconfig.json   |  1 -
 package-lock.json                             | 84 -------------------
 package.json                                  |  4 -
 6 files changed, 2 insertions(+), 139 deletions(-)
 delete mode 100644 apps/angular/react-in-angular/src/app/react/post.component.tsx

diff --git a/apps/angular/react-in-angular/src/app/react/ReactPost.tsx b/apps/angular/react-in-angular/src/app/react/ReactPost.tsx
index a49d932..6ff7b4d 100644
--- a/apps/angular/react-in-angular/src/app/react/ReactPost.tsx
+++ b/apps/angular/react-in-angular/src/app/react/ReactPost.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+// import React from 'react';
 
 export default function ReactPost(props: {
   title?: string,
diff --git a/apps/angular/react-in-angular/src/app/react/post.component.tsx b/apps/angular/react-in-angular/src/app/react/post.component.tsx
deleted file mode 100644
index 882e21b..0000000
--- a/apps/angular/react-in-angular/src/app/react/post.component.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, input, OnChanges, Output, ViewChild } from '@angular/core';
-import { createRoot, Root } from 'react-dom/client';
-import React from 'react';
-import ReactPost from './ReactPost';
-
-type Post = { title: string; description: string, pictureLink: string };
-
-
-@Component({
-  standalone: true,
-  selector: 'app-post',
-  template: `
-    <div #react></div>`,
-  styles: ['']
-})
-export class PostComponent implements AfterViewInit, OnChanges {
-  @ViewChild('react', { static: true }) containerRef!: ElementRef;
-
-  post = input<Post | undefined>(undefined);
-  isSelected = input<boolean>(false);
-  @Output() selectPost = new EventEmitter<void>();
-  root?: Root;
-
-  ngOnChanges(): void {
-    this.render();
-  }
-
-  ngAfterViewInit() {
-    this.root = createRoot(this.containerRef.nativeElement);
-    this.render();
-  }
-
-  private render() {
-    if (this.root) {
-      this.root.render(
-        <React.StrictMode>
-          <ReactPost
-            title={this.post()?.title}
-            description={this.post()?.description}
-            pictureLink={this.post()?.pictureLink}
-            handleClick={() => this.selectPost.emit()}
-            selected={this.isSelected()}
-          />
-        </React.StrictMode>
-      );
-    }
-  }
-}
diff --git a/apps/angular/react-in-angular/tailwind.config.js b/apps/angular/react-in-angular/tailwind.config.js
index 99b4c14..38183db 100644
--- a/apps/angular/react-in-angular/tailwind.config.js
+++ b/apps/angular/react-in-angular/tailwind.config.js
@@ -4,7 +4,7 @@ const { join } = require('path');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html,tsx}'),
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
     ...createGlobPatternsForDependencies(__dirname),
   ],
   theme: {
diff --git a/apps/angular/react-in-angular/tsconfig.json b/apps/angular/react-in-angular/tsconfig.json
index 3c5ef57..7a9f4b7 100644
--- a/apps/angular/react-in-angular/tsconfig.json
+++ b/apps/angular/react-in-angular/tsconfig.json
@@ -9,7 +9,6 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "jsx": "react",
   },
   "files": [],
   "include": [],
diff --git a/package-lock.json b/package-lock.json
index b292ca4..7952718 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,8 +32,6 @@
         "@rx-angular/template": "^17.0.0",
         "@swc/helpers": "0.5.3",
         "@tanstack/angular-query-experimental": "^5.12.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
         "rxjs": "7.8.1",
         "tailwindcss": "^3.3.5",
         "tslib": "^2.3.0",
@@ -73,8 +71,6 @@
         "@testing-library/user-event": "^14.5.1",
         "@types/jest": "29.4.0",
         "@types/node": "18.16.9",
-        "@types/react": "^18.2.55",
-        "@types/react-dom": "^18.2.19",
         "@typescript-eslint/eslint-plugin": "6.11.0",
         "@typescript-eslint/parser": "6.11.0",
         "all-contributors-cli": "^6.26.1",
@@ -8841,12 +8837,6 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
     },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.11",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
-    },
     "node_modules/@types/qs": {
       "version": "6.9.11",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.11.tgz",
@@ -8857,26 +8847,6 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
-    "node_modules/@types/react": {
-      "version": "18.2.55",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz",
-      "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
-      "dev": true,
-      "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "18.2.19",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
-      "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -8897,12 +8867,6 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
-    },
     "node_modules/@types/semver": {
       "version": "7.5.6",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
@@ -12710,12 +12674,6 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "devOptional": true
     },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
-    },
     "node_modules/cuint": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
@@ -20390,17 +20348,6 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -24065,29 +24012,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
-      },
-      "peerDependencies": {
-        "react": "^18.2.0"
-      }
-    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -25048,14 +24972,6 @@
         "node": ">=v12.22.7"
       }
     },
-    "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
     "node_modules/schema-utils": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
diff --git a/package.json b/package.json
index a4aa3dd..3507f1b 100644
--- a/package.json
+++ b/package.json
@@ -35,8 +35,6 @@
     "@rx-angular/template": "^17.0.0",
     "@swc/helpers": "0.5.3",
     "@tanstack/angular-query-experimental": "^5.12.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "rxjs": "7.8.1",
     "tailwindcss": "^3.3.5",
     "tslib": "^2.3.0",
@@ -76,8 +74,6 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "29.4.0",
     "@types/node": "18.16.9",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "6.11.0",
     "@typescript-eslint/parser": "6.11.0",
     "all-contributors-cli": "^6.26.1",

From 0e7851f6e1bbb54f9575da081d9af062f90fab78 Mon Sep 17 00:00:00 2001
From: Wandrille <wandrille.guesdon@gmail.com>
Date: Thu, 15 Feb 2024 07:56:52 +0100
Subject: [PATCH 06/16] fix: add author file

---
 docs/src/content/authors/wandrille-guesdon.json | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 docs/src/content/authors/wandrille-guesdon.json

diff --git a/docs/src/content/authors/wandrille-guesdon.json b/docs/src/content/authors/wandrille-guesdon.json
new file mode 100644
index 0000000..a240cba
--- /dev/null
+++ b/docs/src/content/authors/wandrille-guesdon.json
@@ -0,0 +1,5 @@
+{
+  "name": "Wandrille Guesdon",
+  "linkedin": "https://www.linkedin.com/in/wandrille-guesdon-53a54684/",
+  "github": "https://github.com/wandri"
+}

From cf588ff92572ffa5a70057f277f84f2ea5813c85 Mon Sep 17 00:00:00 2001
From: Wandrille <wandrille.guesdon@gmail.com>
Date: Thu, 15 Feb 2024 16:54:36 +0100
Subject: [PATCH 07/16] fix: the author field matches the name of the file

---
 docs/src/content/docs/challenges/angular/45-react-in-angular.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/content/docs/challenges/angular/45-react-in-angular.md b/docs/src/content/docs/challenges/angular/45-react-in-angular.md
index 6aae8fb..e71ab68 100644
--- a/docs/src/content/docs/challenges/angular/45-react-in-angular.md
+++ b/docs/src/content/docs/challenges/angular/45-react-in-angular.md
@@ -1,7 +1,7 @@
 ---
 title: 🔴 React in angular
 description: Challenge 45 is about learning how to benefit from the numerous libraries in React
-author: Wandrille Guesdon
+author: wandrille-guesdon
 challengeNumber: 45
 command: angular-react-in-angular
 sidebar:

From 8cdaef0b3829c98c718389e49a1e5e6a9fff6486 Mon Sep 17 00:00:00 2001
From: thomas <toma.laforge@gmail.com>
Date: Thu, 15 Feb 2024 17:37:29 +0100
Subject: [PATCH 08/16] fix: frontmatter

---
 .../content/docs/challenges/angular/44-view-transition.md  | 1 -
 .../content/docs/challenges/angular/45-react-in-angular.md | 7 ++++---
 .../docs/pt/challenges/angular/44-view-transition.md       | 1 -
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/docs/src/content/docs/challenges/angular/44-view-transition.md b/docs/src/content/docs/challenges/angular/44-view-transition.md
index 46ae580..6dbf211 100644
--- a/docs/src/content/docs/challenges/angular/44-view-transition.md
+++ b/docs/src/content/docs/challenges/angular/44-view-transition.md
@@ -6,7 +6,6 @@ challengeNumber: 44
 command: angular-view-transition
 sidebar:
   order: 208
-  badge: New
 ---
 
 ## Information
diff --git a/docs/src/content/docs/challenges/angular/45-react-in-angular.md b/docs/src/content/docs/challenges/angular/45-react-in-angular.md
index e71ab68..96443c7 100644
--- a/docs/src/content/docs/challenges/angular/45-react-in-angular.md
+++ b/docs/src/content/docs/challenges/angular/45-react-in-angular.md
@@ -5,7 +5,7 @@ author: wandrille-guesdon
 challengeNumber: 45
 command: angular-react-in-angular
 sidebar:
-  order: NaN
+  order: 209
   badge: New
 ---
 
@@ -60,14 +60,15 @@ npm i --save-dev @types/react @types/react-dom
 <details>
   <summary>Hint 3 - Display</summary>
   To render the component, it should look like this:
-  
+
     ```
     <react root>.render(
         <React.StrictMode>
         ...
         </React.StrictMode>
     )
-    ``` 
+    ```
+
 </details>
 
 <details>
diff --git a/docs/src/content/docs/pt/challenges/angular/44-view-transition.md b/docs/src/content/docs/pt/challenges/angular/44-view-transition.md
index 7391bb4..ead29d4 100644
--- a/docs/src/content/docs/pt/challenges/angular/44-view-transition.md
+++ b/docs/src/content/docs/pt/challenges/angular/44-view-transition.md
@@ -6,7 +6,6 @@ challengeNumber: 44
 command: angular-view-transition
 sidebar:
   order: 208
-  badge: New
 ---
 
 ## Informação

From 115ec09d391e609e9e7ccfb4edb7986b94a5584d Mon Sep 17 00:00:00 2001
From: thomas <toma.laforge@gmail.com>
Date: Thu, 15 Feb 2024 17:47:21 +0100
Subject: [PATCH 09/16] fix: homepage link

---
 docs/src/content/docs/index.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 7185c30..b9a5715 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -13,7 +13,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Go to the latest Challenge
-      link: /challenges/angular/44-view-transition/
+      link: /challenges/angular/45-react-in-angular/
       icon: rocket
     - text: Give a star
       link: https://github.com/tomalaforge/angular-challenges

From 25d6b513b4aa6bbc7996e5b83cd8466fd0e668ff Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Thu, 15 Feb 2024 17:08:23 +0000
Subject: [PATCH 10/16] docs: update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index de88144..3fc04fb 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,7 @@ Check [all 45 challenges](https://angular-challenges.vercel.app/)
       <td align="center" valign="top" width="14.28%"><a href="http://www.streamoverlaypro.com"><img src="https://avatars.githubusercontent.com/u/1978642?v=4?s=100" width="100px;" alt="Erick Rodriguez"/><br /><sub><b>Erick Rodriguez</b></sub></a><br /><a href="#translation-es-ErickRodrCodes" title="Translate in Spanish">🇪🇸</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://eduardoroth.dev"><img src="https://avatars.githubusercontent.com/u/5419161?v=4?s=100" width="100px;" alt="Eduardo Roth"/><br /><sub><b>Eduardo Roth</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=eduardoRoth" title="Documentation">📖</a> <a href="#translation-es-eduardoRoth" title="Translate in Spanish">🇪🇸</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/1fbr"><img src="https://avatars.githubusercontent.com/u/63980689?v=4?s=100" width="100px;" alt="Fernando Bello"/><br /><sub><b>Fernando Bello</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=1fbr" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://wandrille-guesdon.com/"><img src="https://avatars.githubusercontent.com/u/15016833?v=4?s=100" width="100px;" alt="Wandrille"/><br /><sub><b>Wandrille</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=wandri" title="Code">💻</a></td>
     </tr>
   </tbody>
   <tfoot>

From c68b8f30e9e25ca4dbb081f85db3ca3bcaa92aeb Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Thu, 15 Feb 2024 17:08:24 +0000
Subject: [PATCH 11/16] docs: update .all-contributorsrc

---
 .all-contributorsrc | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 38856b4..5c281a2 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -201,6 +201,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "wandri",
+      "name": "Wandrille",
+      "avatar_url": "https://avatars.githubusercontent.com/u/15016833?v=4",
+      "profile": "https://wandrille-guesdon.com/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

From b3f863a60d7016219d16c077cb9b21b1be86753b Mon Sep 17 00:00:00 2001
From: thomas <toma.laforge@gmail.com>
Date: Thu, 15 Feb 2024 18:11:19 +0100
Subject: [PATCH 12/16] feat: update contribution

---
 .all-contributorsrc | 20 ++++++++++----------
 README.md           |  6 +++---
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 5c281a2..062fd18 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -79,6 +79,15 @@
         "translation-ru"
       ]
     },
+    {
+      "login": "wandri",
+      "name": "Wandrille",
+      "avatar_url": "https://avatars.githubusercontent.com/u/15016833?v=4",
+      "profile": "https://wandrille-guesdon.com/",
+      "contributions": [
+        "challenge"
+      ]
+    },
     {
       "login": "alan-bio",
       "name": "Alan Dragicevich",
@@ -201,18 +210,9 @@
       "contributions": [
         "doc"
       ]
-    },
-    {
-      "login": "wandri",
-      "name": "Wandrille",
-      "avatar_url": "https://avatars.githubusercontent.com/u/15016833?v=4",
-      "profile": "https://wandrille-guesdon.com/",
-      "contributions": [
-        "code"
-      ]
     }
   ],
   "contributorsPerLine": 7,
   "linkToUsage": true,
   "commitType": "docs"
-}
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 3fc04fb..d8662ab 100644
--- a/README.md
+++ b/README.md
@@ -38,24 +38,24 @@ Check [all 45 challenges](https://angular-challenges.vercel.app/)
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/jdegand"><img src="https://avatars.githubusercontent.com/u/70610011?v=4?s=100" width="100px;" alt="J. Degand"/><br /><sub><b>J. Degand</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=jdegand" title="Documentation">📖</a> <a href="#content-jdegand" title="Content">🖋</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=jdegand" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/DeveshChau"><img src="https://avatars.githubusercontent.com/u/9509673?v=4?s=100" width="100px;" alt="Devesh Chaudhari"/><br /><sub><b>Devesh Chaudhari</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=DeveshChau" title="Code">💻</a> <a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3ADeveshChau" title="Bug reports">🐛</a> <a href="#challenge-DeveshChau" title="Create a challenge">🧩</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/stillst"><img src="https://avatars.githubusercontent.com/u/1463098?v=4?s=100" width="100px;" alt="stillst"/><br /><sub><b>stillst</b></sub></a><br /><a href="#challenge-stillst" title="Create a challenge">🧩</a> <a href="#translation-ru-stillst" title="Translate in Russian">🇷🇺</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://wandrille-guesdon.com/"><img src="https://avatars.githubusercontent.com/u/15016833?v=4?s=100" width="100px;" alt="Wandrille"/><br /><sub><b>Wandrille</b></sub></a><br /><a href="#challenge-wandri" title="Create a challenge">🧩</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/alan-bio"><img src="https://avatars.githubusercontent.com/u/31838230?v=4?s=100" width="100px;" alt="Alan Dragicevich"/><br /><sub><b>Alan Dragicevich</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=alan-bio" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/edimitchel"><img src="https://avatars.githubusercontent.com/u/2922851?v=4?s=100" width="100px;" alt="Michel EDIGHOFFER"/><br /><sub><b>Michel EDIGHOFFER</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=edimitchel" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/gsgonzalez88"><img src="https://avatars.githubusercontent.com/u/39884678?v=4?s=100" width="100px;" alt="Gerardo Sebastian Gonzalez"/><br /><sub><b>Gerardo Sebastian Gonzalez</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=gsgonzalez88" title="Documentation">📖</a></td>
     </tr>
     <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/gsgonzalez88"><img src="https://avatars.githubusercontent.com/u/39884678?v=4?s=100" width="100px;" alt="Gerardo Sebastian Gonzalez"/><br /><sub><b>Gerardo Sebastian Gonzalez</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=gsgonzalez88" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/marryday"><img src="https://avatars.githubusercontent.com/u/57489315?v=4?s=100" width="100px;" alt="Evseev Yuriy"/><br /><sub><b>Evseev Yuriy</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3Amarryday" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/tomer953"><img src="https://avatars.githubusercontent.com/u/1807493?v=4?s=100" width="100px;" alt="Tomer953"/><br /><sub><b>Tomer953</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3Atomer953" title="Bug reports">🐛</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomer953" title="Documentation">📖</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomer953" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/dmmishchenko"><img src="https://avatars.githubusercontent.com/u/51910160?v=4?s=100" width="100px;" alt="Dmitriy Mishchenko"/><br /><sub><b>Dmitriy Mishchenko</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=dmmishchenko" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://www.sagardev.com.np"><img src="https://avatars.githubusercontent.com/u/30800393?v=4?s=100" width="100px;" alt="Sagar Devkota"/><br /><sub><b>Sagar Devkota</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=Sagardevkota" title="Documentation">📖</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=Sagardevkota" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://nelsonguti.dev/"><img src="https://avatars.githubusercontent.com/u/62297014?v=4?s=100" width="100px;" alt="Nelson Gutierrez"/><br /><sub><b>Nelson Gutierrez</b></sub></a><br /><a href="#translation-es-nelsongutidev" title="Translate in Spanish">🇪🇸</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ho-ssain"><img src="https://avatars.githubusercontent.com/u/61125174?v=4?s=100" width="100px;" alt="Hossain K. M."/><br /><sub><b>Hossain K. M.</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=ho-ssain" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/kabrunko-dev/"><img src="https://avatars.githubusercontent.com/u/142346548?v=4?s=100" width="100px;" alt="Diogo Nishikawa"/><br /><sub><b>Diogo Nishikawa</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Code">💻</a> <a href="#translation-pt-kabrunko-dev" title="Translate in Portuguese">🇵🇹</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Documentation">📖</a></td>
     </tr>
     <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/kabrunko-dev/"><img src="https://avatars.githubusercontent.com/u/142346548?v=4?s=100" width="100px;" alt="Diogo Nishikawa"/><br /><sub><b>Diogo Nishikawa</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Code">💻</a> <a href="#translation-pt-kabrunko-dev" title="Translate in Portuguese">🇵🇹</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://www.streamoverlaypro.com"><img src="https://avatars.githubusercontent.com/u/1978642?v=4?s=100" width="100px;" alt="Erick Rodriguez"/><br /><sub><b>Erick Rodriguez</b></sub></a><br /><a href="#translation-es-ErickRodrCodes" title="Translate in Spanish">🇪🇸</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://eduardoroth.dev"><img src="https://avatars.githubusercontent.com/u/5419161?v=4?s=100" width="100px;" alt="Eduardo Roth"/><br /><sub><b>Eduardo Roth</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=eduardoRoth" title="Documentation">📖</a> <a href="#translation-es-eduardoRoth" title="Translate in Spanish">🇪🇸</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/1fbr"><img src="https://avatars.githubusercontent.com/u/63980689?v=4?s=100" width="100px;" alt="Fernando Bello"/><br /><sub><b>Fernando Bello</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=1fbr" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://wandrille-guesdon.com/"><img src="https://avatars.githubusercontent.com/u/15016833?v=4?s=100" width="100px;" alt="Wandrille"/><br /><sub><b>Wandrille</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=wandri" title="Code">💻</a></td>
     </tr>
   </tbody>
   <tfoot>

From f27cc5e1eac2a1ffa955afbc0bd607805e72eb6c Mon Sep 17 00:00:00 2001
From: Sven Brodny <sven.brodny@yolawo.de>
Date: Thu, 15 Feb 2024 21:51:43 +0100
Subject: [PATCH 13/16] docs: fix exercice typo in docs french to english

---
 docs/src/content/docs/challenges/angular/10-pipe-utility.md   | 2 +-
 docs/src/content/docs/challenges/angular/22-router-input.md   | 2 +-
 .../docs/challenges/angular/3-directive-enhancement.md        | 4 ++--
 .../content/docs/challenges/angular/4-context-outlet-typed.md | 4 ++--
 docs/src/content/docs/challenges/angular/5-crud.md            | 2 +-
 docs/src/content/docs/challenges/angular/8-pipe-pure.md       | 2 +-
 docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md     | 2 +-
 docs/src/content/docs/challenges/ngrx/2-effect-selector.md    | 2 +-
 8 files changed, 10 insertions(+), 10 deletions(-)

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 f8688dd..bab3886 100644
--- a/docs/src/content/docs/challenges/angular/10-pipe-utility.md
+++ b/docs/src/content/docs/challenges/angular/10-pipe-utility.md
@@ -14,7 +14,7 @@ Pure pipes are a very useful way to transform data from your template. The diffe
 
 ## Information:
 
-In this third exercice, you want to access utils functions. Currently you 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.
+In this third exercise, you want to access utils functions. Currently you 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:
 
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 75ac297..59676ce 100644
--- a/docs/src/content/docs/challenges/angular/22-router-input.md
+++ b/docs/src/content/docs/challenges/angular/22-router-input.md
@@ -23,4 +23,4 @@ In version 16, Angular introduced a new `Input` that can listen to route data. Y
 
 ## Statement
 
-The goal of this exercice is to refactor the code to use the new `RouterInput` strategy.
+The goal of this exercise is to refactor the code to use the new `RouterInput` strategy.
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 41a0cad..3c8182c 100644
--- a/docs/src/content/docs/challenges/angular/3-directive-enhancement.md
+++ b/docs/src/content/docs/challenges/angular/3-directive-enhancement.md
@@ -10,7 +10,7 @@ sidebar:
 ---
 
 :::note
-This exercice can feel obsolete with the new control flow and the empty block inside the `@for` block. However **structural directives** are not going to be deleted any time soon, so you can still learn a lot from this exercice.
+This exercise can feel obsolete with the new control flow and the empty block inside the `@for` block. However **structural directives** are not going to be deleted any time soon, so you can still learn a lot from this exercise.
 :::
 
 ## Information
@@ -21,7 +21,7 @@ But the real power is that you can enhance an already existing directive which m
 
 ## 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 !! "_.
+In this exercise, 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 :
 
diff --git a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md
index 43f8a2d..88d4e5b 100644
--- a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md
+++ b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md
@@ -17,9 +17,9 @@ However the context of **NgTemplateOutlet** type is **Object**. But with the hel
 
 ## Statement
 
-In this exercice, we want to learn how to strongly type our ng-template in our AppComponent.
+In this exercise, we want to learn how to strongly type our ng-template in our AppComponent.
 
-This exercice has two levels of complexity.
+This exercise has two levels of complexity.
 
 ### Level 1: known Interface
 
diff --git a/docs/src/content/docs/challenges/angular/5-crud.md b/docs/src/content/docs/challenges/angular/5-crud.md
index dfc909f..9d34d5a 100644
--- a/docs/src/content/docs/challenges/angular/5-crud.md
+++ b/docs/src/content/docs/challenges/angular/5-crud.md
@@ -14,7 +14,7 @@ Communicating and having a global/local state in sync with your backend is the h
 
 ## Statement
 
-In this exercice, you have a small CRUD application, which get a list of TODOS, update and delete some todos.
+In this exercise, you have a small CRUD application, which get a list of TODOS, update and delete some todos.
 
 Currently we have a working example but filled with lots of bad practices.
 
diff --git a/docs/src/content/docs/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/challenges/angular/8-pipe-pure.md
index 58620cb..04fe2c6 100644
--- a/docs/src/content/docs/challenges/angular/8-pipe-pure.md
+++ b/docs/src/content/docs/challenges/angular/8-pipe-pure.md
@@ -15,7 +15,7 @@ Pure pipes are a very useful way to transform data from your template. The diffe
 
 ## Information
 
-In this first exercice, you call a simple function inside your template. The goal is to convert it to a pipe.
+In this first exercise, you call a simple function inside your template. The goal is to convert it to a pipe.
 
 ## Constraints
 
diff --git a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md
index a50aa09..2048f35 100644
--- a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md
+++ b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md
@@ -15,7 +15,7 @@ Pure pipes are a very useful way to transform data from your template. The diffe
 
 ## Information:
 
-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.
+In this second exercise, 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:
diff --git a/docs/src/content/docs/challenges/ngrx/2-effect-selector.md b/docs/src/content/docs/challenges/ngrx/2-effect-selector.md
index f571bbf..ea7914b 100644
--- a/docs/src/content/docs/challenges/ngrx/2-effect-selector.md
+++ b/docs/src/content/docs/challenges/ngrx/2-effect-selector.md
@@ -9,7 +9,7 @@ sidebar:
   order: 113
 ---
 
-For this exercice, you will have a dashboard of activities displaying the name, the main teacher and a list of subtitutes.
+For this exercise, you will have a dashboard of activities displaying the name, the main teacher and a list of subtitutes.
 
 ## Information
 

From 1ebbf66a28e252a185406efbd72ed58c892fa2c2 Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Thu, 15 Feb 2024 21:14:28 +0000
Subject: [PATCH 14/16] docs: update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index d8662ab..a350212 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,7 @@ Check [all 45 challenges](https://angular-challenges.vercel.app/)
       <td align="center" valign="top" width="14.28%"><a href="http://www.streamoverlaypro.com"><img src="https://avatars.githubusercontent.com/u/1978642?v=4?s=100" width="100px;" alt="Erick Rodriguez"/><br /><sub><b>Erick Rodriguez</b></sub></a><br /><a href="#translation-es-ErickRodrCodes" title="Translate in Spanish">🇪🇸</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://eduardoroth.dev"><img src="https://avatars.githubusercontent.com/u/5419161?v=4?s=100" width="100px;" alt="Eduardo Roth"/><br /><sub><b>Eduardo Roth</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=eduardoRoth" title="Documentation">📖</a> <a href="#translation-es-eduardoRoth" title="Translate in Spanish">🇪🇸</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/1fbr"><img src="https://avatars.githubusercontent.com/u/63980689?v=4?s=100" width="100px;" alt="Fernando Bello"/><br /><sub><b>Fernando Bello</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=1fbr" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://svenson95.github.io/sb-portfolio/"><img src="https://avatars.githubusercontent.com/u/46655156?v=4?s=100" width="100px;" alt="Sven Brodny"/><br /><sub><b>Sven Brodny</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=svenson95" title="Documentation">📖</a></td>
     </tr>
   </tbody>
   <tfoot>

From 6c40408b3e1c5543f901b235e43d7c79313339e6 Mon Sep 17 00:00:00 2001
From: "allcontributors[bot]"
 <46447321+allcontributors[bot]@users.noreply.github.com>
Date: Thu, 15 Feb 2024 21:14:29 +0000
Subject: [PATCH 15/16] docs: update .all-contributorsrc

---
 .all-contributorsrc | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 062fd18..5e94f8a 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -210,9 +210,18 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "svenson95",
+      "name": "Sven Brodny",
+      "avatar_url": "https://avatars.githubusercontent.com/u/46655156?v=4",
+      "profile": "https://svenson95.github.io/sb-portfolio/",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,
   "linkToUsage": true,
   "commitType": "docs"
-}
\ No newline at end of file
+}

From 2f41cc8e615280ee19c2615ba80489da842a02a5 Mon Sep 17 00:00:00 2001
From: Sven Brodny <svenbrodny@googlemail.com>
Date: Thu, 15 Feb 2024 23:24:05 +0100
Subject: [PATCH 16/16] docs(projection): add related link reasons for avoiding
 magic strings

---
 docs/src/content/docs/challenges/angular/1-projection.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/content/docs/challenges/angular/1-projection.md b/docs/src/content/docs/challenges/angular/1-projection.md
index 1602510..f3409b1 100644
--- a/docs/src/content/docs/challenges/angular/1-projection.md
+++ b/docs/src/content/docs/challenges/angular/1-projection.md
@@ -40,4 +40,4 @@ While the application works, the developer experience is far from being optimal.
 
 - Try to work with the new built-in control flow syntax for loops and conditionals (documentation [here](https://angular.dev/guide/templates/control-flow))
 - Use the signal API to manage your components state (documentation [here](https://angular.dev/guide/signals))
-- To reference the template, use a directive instead of magic strings
+- To reference the template, use a directive instead of magic strings ([What is wrong with magic strings?](https://softwareengineering.stackexchange.com/a/365344))