diff --git a/README.md b/README.md
index dcbbd35..11cc185 100644
--- a/README.md
+++ b/README.md
@@ -13,16 +13,22 @@ This goal of this project is to help you get better at Angular and NgRx buy reso
## Challenges
> Click the following badges to join your next challenge.
+>
+>
+>
-
+
+
-
-
+
+
+
-
+
+
-
+
## License
diff --git a/apps/context-outlet-type/README.md b/apps/context-outlet-type/README.md
index b3ae16e..87edfa6 100644
--- a/apps/context-outlet-type/README.md
+++ b/apps/context-outlet-type/README.md
@@ -1,5 +1,7 @@
NgTemplateOutlet Strongly Typed
+> Author: Thomas Laforge
+
## Information
Angular offer the static function **ngTemplateContextGuard** to strongly type structural directive.
diff --git a/apps/context-outlet-type/project.json b/apps/context-outlet-type/project.json
index 5a0659f..4193aa9 100644
--- a/apps/context-outlet-type/project.json
+++ b/apps/context-outlet-type/project.json
@@ -7,7 +7,9 @@
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:browser",
- "outputs": ["{options.outputPath}"],
+ "outputs": [
+ "{options.outputPath}"
+ ],
"options": {
"outputPath": "dist/apps/context-outlet-type",
"index": "apps/context-outlet-type/src/index.html",
@@ -19,7 +21,9 @@
"apps/context-outlet-type/src/favicon.ico",
"apps/context-outlet-type/src/assets"
],
- "styles": ["apps/context-outlet-type/src/styles.scss"],
+ "styles": [
+ "apps/context-outlet-type/src/styles.scss"
+ ],
"scripts": []
},
"configurations": {
diff --git a/apps/http/.browserslistrc b/apps/http/.browserslistrc
new file mode 100644
index 0000000..4f9ac26
--- /dev/null
+++ b/apps/http/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+# npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/apps/http/.eslintrc.json b/apps/http/.eslintrc.json
new file mode 100644
index 0000000..028ce09
--- /dev/null
+++ b/apps/http/.eslintrc.json
@@ -0,0 +1,36 @@
+{
+ "extends": ["../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts"],
+ "extends": [
+ "plugin:@nrwl/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:@nrwl/nx/angular-template"],
+ "rules": {}
+ }
+ ]
+}
diff --git a/apps/http/README.md b/apps/http/README.md
new file mode 100644
index 0000000..ee0b5fd
--- /dev/null
+++ b/apps/http/README.md
@@ -0,0 +1,64 @@
+
HttpClient
+
+> Author: Thomas Laforge
+
+## Information
+
+Http request 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,
+];
+```
+
+- Use **ChangeDectection.OnPush**
+
+### 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 install
+4. **nx serve http**
+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_
diff --git a/apps/http/project.json b/apps/http/project.json
new file mode 100644
index 0000000..1bd6721
--- /dev/null
+++ b/apps/http/project.json
@@ -0,0 +1,95 @@
+{
+ "name": "http",
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "sourceRoot": "apps/http/src",
+ "prefix": "app",
+ "targets": {
+ "build": {
+ "executor": "@angular-devkit/build-angular:browser",
+ "outputs": [
+ "{options.outputPath}"
+ ],
+ "options": {
+ "outputPath": "dist/apps/http",
+ "index": "apps/http/src/index.html",
+ "main": "apps/http/src/main.ts",
+ "polyfills": "apps/http/src/polyfills.ts",
+ "tsConfig": "apps/http/tsconfig.app.json",
+ "inlineStyleLanguage": "scss",
+ "assets": [
+ "apps/http/src/favicon.ico",
+ "apps/http/src/assets"
+ ],
+ "styles": [
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+ "apps/http/src/styles.scss"
+ ],
+ "scripts": [],
+ "allowedCommonJsDependencies": [
+ "seedrandom"
+ ]
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kb",
+ "maximumError": "4kb"
+ }
+ ],
+ "fileReplacements": [
+ {
+ "replace": "apps/http/src/environments/environment.ts",
+ "with": "apps/http/src/environments/environment.prod.ts"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "buildOptimizer": false,
+ "optimization": false,
+ "vendorChunk": true,
+ "extractLicenses": false,
+ "sourceMap": true,
+ "namedChunks": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "executor": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "browserTarget": "http:build:production"
+ },
+ "development": {
+ "browserTarget": "http:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "executor": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "browserTarget": "http:build"
+ }
+ },
+ "lint": {
+ "executor": "@nrwl/linter:eslint",
+ "options": {
+ "lintFilePatterns": [
+ "apps/http/**/*.ts",
+ "apps/http/**/*.html"
+ ]
+ }
+ }
+ },
+ "tags": []
+}
diff --git a/apps/http/src/app/app.component.ts b/apps/http/src/app/app.component.ts
new file mode 100644
index 0000000..3a6584e
--- /dev/null
+++ b/apps/http/src/app/app.component.ts
@@ -0,0 +1,52 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { randText } from '@ngneat/falso';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule],
+ selector: 'app-root',
+ template: `
+
+ {{ todo.title }}
+
+
+ `,
+ styles: [],
+})
+export class AppComponent implements OnInit {
+ todos!: any[];
+
+ constructor(private http: HttpClient) {}
+
+ ngOnInit(): void {
+ this.http
+ .get('https://jsonplaceholder.typicode.com/todos')
+ .subscribe((todos) => {
+ console.log('return', todos);
+ this.todos = todos;
+ });
+ }
+
+ update(todo: any) {
+ this.http
+ .put(
+ `https://jsonplaceholder.typicode.com/todos/${todo.id}`,
+ JSON.stringify({
+ todo: todo.id,
+ title: randText(),
+ body: todo.body,
+ userId: todo.userId,
+ }),
+ {
+ headers: {
+ 'Content-type': 'application/json; charset=UTF-8',
+ },
+ }
+ )
+ .subscribe((todoUpdated: any) => {
+ this.todos[todoUpdated.id - 1] = todoUpdated;
+ });
+ }
+}
diff --git a/apps/http/src/assets/.gitkeep b/apps/http/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/http/src/environments/environment.prod.ts b/apps/http/src/environments/environment.prod.ts
new file mode 100644
index 0000000..c966979
--- /dev/null
+++ b/apps/http/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true,
+};
diff --git a/apps/http/src/environments/environment.ts b/apps/http/src/environments/environment.ts
new file mode 100644
index 0000000..66998ae
--- /dev/null
+++ b/apps/http/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+ production: false,
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
diff --git a/apps/http/src/favicon.ico b/apps/http/src/favicon.ico
new file mode 100644
index 0000000..317ebcb
Binary files /dev/null and b/apps/http/src/favicon.ico differ
diff --git a/apps/http/src/index.html b/apps/http/src/index.html
new file mode 100644
index 0000000..bd885fc
--- /dev/null
+++ b/apps/http/src/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+ Http
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/http/src/main.ts b/apps/http/src/main.ts
new file mode 100644
index 0000000..755cf1b
--- /dev/null
+++ b/apps/http/src/main.ts
@@ -0,0 +1,13 @@
+import { HttpClientModule } from '@angular/common/http';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+bootstrapApplication(AppComponent, {
+ providers: [importProvidersFrom(HttpClientModule)],
+}).catch((err) => console.error(err));
diff --git a/apps/http/src/polyfills.ts b/apps/http/src/polyfills.ts
new file mode 100644
index 0000000..e4555ed
--- /dev/null
+++ b/apps/http/src/polyfills.ts
@@ -0,0 +1,52 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ * (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/apps/http/src/styles.scss b/apps/http/src/styles.scss
new file mode 100644
index 0000000..7e087c3
--- /dev/null
+++ b/apps/http/src/styles.scss
@@ -0,0 +1,10 @@
+/* You can add global styles to this file, and also import other style files */
+html,
+body {
+ height: 100%;
+}
+
+body {
+ margin: 0;
+ font-family: Roboto, "Helvetica Neue", sans-serif;
+}
\ No newline at end of file
diff --git a/apps/http/tsconfig.app.json b/apps/http/tsconfig.app.json
new file mode 100644
index 0000000..915ae8b
--- /dev/null
+++ b/apps/http/tsconfig.app.json
@@ -0,0 +1,10 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "types": []
+ },
+ "files": ["src/main.ts", "src/polyfills.ts"],
+ "include": ["src/**/*.d.ts"],
+ "exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"]
+}
diff --git a/apps/http/tsconfig.editor.json b/apps/http/tsconfig.editor.json
new file mode 100644
index 0000000..0f9036b
--- /dev/null
+++ b/apps/http/tsconfig.editor.json
@@ -0,0 +1,7 @@
+{
+ "extends": "./tsconfig.json",
+ "include": ["**/*.ts"],
+ "compilerOptions": {
+ "types": []
+ }
+}
diff --git a/apps/http/tsconfig.json b/apps/http/tsconfig.json
new file mode 100644
index 0000000..0b7a078
--- /dev/null
+++ b/apps/http/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.app.json"
+ },
+ {
+ "path": "./tsconfig.editor.json"
+ }
+ ],
+ "compilerOptions": {
+ "target": "es2020",
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
+}
diff --git a/apps/ngfor-enhancement/README.md b/apps/ngfor-enhancement/README.md
index da961e2..c483e84 100644
--- a/apps/ngfor-enhancement/README.md
+++ b/apps/ngfor-enhancement/README.md
@@ -1,5 +1,7 @@
Directive enhancement
+> Author: Thomas Laforge
+
## 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.
diff --git a/apps/ngfor-enhancement/project.json b/apps/ngfor-enhancement/project.json
index 7f91ae1..382f74a 100644
--- a/apps/ngfor-enhancement/project.json
+++ b/apps/ngfor-enhancement/project.json
@@ -7,7 +7,9 @@
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:browser",
- "outputs": ["{options.outputPath}"],
+ "outputs": [
+ "{options.outputPath}"
+ ],
"options": {
"outputPath": "dist/apps/ngfor-enhancement",
"index": "apps/ngfor-enhancement/src/index.html",
@@ -19,7 +21,9 @@
"apps/ngfor-enhancement/src/favicon.ico",
"apps/ngfor-enhancement/src/assets"
],
- "styles": ["apps/ngfor-enhancement/src/styles.scss"],
+ "styles": [
+ "apps/ngfor-enhancement/src/styles.scss"
+ ],
"scripts": []
},
"configurations": {
diff --git a/apps/ngrx-1/README.md b/apps/ngrx-1/README.md
index c9f9afd..7b06456 100644
--- a/apps/ngrx-1/README.md
+++ b/apps/ngrx-1/README.md
@@ -1,5 +1,7 @@
NgRx 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.
## Information
diff --git a/apps/ngrx-1/project.json b/apps/ngrx-1/project.json
index f09f5d4..fa3e510 100644
--- a/apps/ngrx-1/project.json
+++ b/apps/ngrx-1/project.json
@@ -7,7 +7,9 @@
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:browser",
- "outputs": ["{options.outputPath}"],
+ "outputs": [
+ "{options.outputPath}"
+ ],
"options": {
"outputPath": "dist/apps/ngrx-1",
"index": "apps/ngrx-1/src/index.html",
@@ -15,10 +17,17 @@
"polyfills": "apps/ngrx-1/src/polyfills.ts",
"tsConfig": "apps/ngrx-1/tsconfig.app.json",
"inlineStyleLanguage": "scss",
- "assets": ["apps/ngrx-1/src/favicon.ico", "apps/ngrx-1/src/assets"],
- "styles": ["apps/ngrx-1/src/styles.scss"],
+ "assets": [
+ "apps/ngrx-1/src/favicon.ico",
+ "apps/ngrx-1/src/assets"
+ ],
+ "styles": [
+ "apps/ngrx-1/src/styles.scss"
+ ],
"scripts": [],
- "allowedCommonJsDependencies": ["seedrandom"]
+ "allowedCommonJsDependencies": [
+ "seedrandom"
+ ]
},
"configurations": {
"production": {
@@ -74,12 +83,17 @@
"lint": {
"executor": "@nrwl/linter:eslint",
"options": {
- "lintFilePatterns": ["apps/ngrx-1/**/*.ts", "apps/ngrx-1/**/*.html"]
+ "lintFilePatterns": [
+ "apps/ngrx-1/**/*.ts",
+ "apps/ngrx-1/**/*.html"
+ ]
}
},
"test": {
"executor": "@nrwl/jest:jest",
- "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+ "outputs": [
+ "{workspaceRoot}/coverage/{projectRoot}"
+ ],
"options": {
"jestConfig": "apps/ngrx-1/jest.config.ts",
"passWithNoTests": true
diff --git a/apps/projection/README.md b/apps/projection/README.md
index d99b97d..83de6fb 100644
--- a/apps/projection/README.md
+++ b/apps/projection/README.md
@@ -1,5 +1,7 @@
+> 
+> 
-
+
+
-
+
+
-
+
+
-
+
## License
diff --git a/apps/context-outlet-type/README.md b/apps/context-outlet-type/README.md
index b3ae16e..87edfa6 100644
--- a/apps/context-outlet-type/README.md
+++ b/apps/context-outlet-type/README.md
@@ -1,5 +1,7 @@
+
+_You can ask any question on_ 
diff --git a/apps/http/project.json b/apps/http/project.json
new file mode 100644
index 0000000..1bd6721
--- /dev/null
+++ b/apps/http/project.json
@@ -0,0 +1,95 @@
+{
+ "name": "http",
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "sourceRoot": "apps/http/src",
+ "prefix": "app",
+ "targets": {
+ "build": {
+ "executor": "@angular-devkit/build-angular:browser",
+ "outputs": [
+ "{options.outputPath}"
+ ],
+ "options": {
+ "outputPath": "dist/apps/http",
+ "index": "apps/http/src/index.html",
+ "main": "apps/http/src/main.ts",
+ "polyfills": "apps/http/src/polyfills.ts",
+ "tsConfig": "apps/http/tsconfig.app.json",
+ "inlineStyleLanguage": "scss",
+ "assets": [
+ "apps/http/src/favicon.ico",
+ "apps/http/src/assets"
+ ],
+ "styles": [
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+ "apps/http/src/styles.scss"
+ ],
+ "scripts": [],
+ "allowedCommonJsDependencies": [
+ "seedrandom"
+ ]
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kb",
+ "maximumError": "4kb"
+ }
+ ],
+ "fileReplacements": [
+ {
+ "replace": "apps/http/src/environments/environment.ts",
+ "with": "apps/http/src/environments/environment.prod.ts"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "buildOptimizer": false,
+ "optimization": false,
+ "vendorChunk": true,
+ "extractLicenses": false,
+ "sourceMap": true,
+ "namedChunks": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "executor": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "browserTarget": "http:build:production"
+ },
+ "development": {
+ "browserTarget": "http:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "executor": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "browserTarget": "http:build"
+ }
+ },
+ "lint": {
+ "executor": "@nrwl/linter:eslint",
+ "options": {
+ "lintFilePatterns": [
+ "apps/http/**/*.ts",
+ "apps/http/**/*.html"
+ ]
+ }
+ }
+ },
+ "tags": []
+}
diff --git a/apps/http/src/app/app.component.ts b/apps/http/src/app/app.component.ts
new file mode 100644
index 0000000..3a6584e
--- /dev/null
+++ b/apps/http/src/app/app.component.ts
@@ -0,0 +1,52 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { randText } from '@ngneat/falso';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule],
+ selector: 'app-root',
+ template: `
+