feat: update crud application readme

README.md

@@ -24,7 +24,7 @@ This goal of this project is to help you get better at Angular and NgRx buy reso
 <a href="./apps/projection/README.md"><img src="https://img.shields.io/badge/1-Projection-red" alt="Projection"/></a>
 <a href="./apps/ngfor-enhancement/README.md"><img src="https://img.shields.io/badge/3-Directive enhancement-orange" alt="Directive enhancement"/></a>
 <a href="./apps/context-outlet-type/README.md"><img src="https://img.shields.io/badge/4-ContextOutlet Typed-red" alt="Directive enhancement"/></a>
-<a href="./apps/http/README.md"><img src="https://img.shields.io/badge/5-Http-green" alt="http"/></a>
+<a href="./apps/http/README.md"><img src="https://img.shields.io/badge/5-CRUD-green" alt="crud application"/></a>
 
 </br>
 <img src="https://img.shields.io/badge/NgRx--gray" alt="NgRx"/>

apps/crud/README.md

@@ -1,10 +1,10 @@
-<h1>HttpClient</h1>
+<h1>CRUD application with local store</h1>
 
 > 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.
+Communicating and having a global/local state in sync with your backend is the heart of any application. You will need to master those following best practises to build strong and reliable Angular Application.
 
 ## Statement
 
@@ -17,7 +17,7 @@ Currently we have a working exemple but filled with lots of bad 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 a **separate service** for all your crud 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
 
@@ -36,7 +36,7 @@ this.todos = [
 
 ### Step 2: Improve
 
-- Add a **Delete** button: _<a href="https://jsonplaceholder.typicode.com/" target="_blank">Doc of fake API</a>_
+- Add a **Delete** button: _<a href="cruds://jsonplaceholder.typicode.com/" target="_blank">Doc of fake API</a>_
 - Handle **errors** correctly. _(Globaly)_
 - Add a Global **loading** indicator. _You can use MatProgressSpinnerModule_
 
@@ -54,11 +54,11 @@ this.todos = [
 1. Fork the project
 2. clone it
 3. npm install
-4. **nx serve http**
+4. **nx serve crud**
 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.
 
-<a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A5+label%3Aanswer" target="_blank"><img src="https://img.shields.io/badge/-Solutions-green" alt="Http"/></a>
+<a href="cruds://github.com/tomalaforge/angular-challenges/pulls?q=label%3A5+label%3Aanswer" target="_blank"><img src="cruds://img.shields.io/badge/-Solutions-green" alt="Http"/></a>
 
-_You can ask any question on_ <a href="https://twitter.com/laforge_toma" target="_blank"><img src="./../../logo/twitter.svg" height=20px alt="Twitter"/></a>
+_You can ask any question on_ <a href="cruds://twitter.com/laforge_toma" target="_blank"><img src="./../../logo/twitter.svg" height=20px alt="Twitter"/></a>

apps/crud/project.json

@@ -1,34 +1,27 @@
 {
-  "name": "http",
+  "name": "crud",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
-  "sourceRoot": "apps/http/src",
+  "sourceRoot": "apps/crud/src",
   "prefix": "app",
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
-      "outputs": [
+      "outputs": ["{options.outputPath}"],
-        "{options.outputPath}"
-      ],
       "options": {
-        "outputPath": "dist/apps/http",
+        "outputPath": "dist/apps/crud",
-        "index": "apps/http/src/index.html",
+        "index": "apps/crud/src/index.html",
-        "main": "apps/http/src/main.ts",
+        "main": "apps/crud/src/main.ts",
-        "polyfills": "apps/http/src/polyfills.ts",
+        "polyfills": "apps/crud/src/polyfills.ts",
-        "tsConfig": "apps/http/tsconfig.app.json",
+        "tsConfig": "apps/crud/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
-        "assets": [
+        "assets": ["apps/crud/src/favicon.ico", "apps/crud/src/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"
+          "apps/crud/src/styles.scss"
         ],
         "scripts": [],
-        "allowedCommonJsDependencies": [
+        "allowedCommonJsDependencies": ["seedrandom"]
-          "seedrandom"
-        ]
       },
       "configurations": {
         "production": {
@@ -46,8 +39,8 @@
           ],
           "fileReplacements": [
             {
-              "replace": "apps/http/src/environments/environment.ts",
+              "replace": "apps/crud/src/environments/environment.ts",
-              "with": "apps/http/src/environments/environment.prod.ts"
+              "with": "apps/crud/src/environments/environment.prod.ts"
             }
           ],
           "outputHashing": "all"
@@ -67,10 +60,10 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "http:build:production"
+          "browserTarget": "crud:build:production"
         },
         "development": {
-          "browserTarget": "http:build:development"
+          "browserTarget": "crud:build:development"
         }
       },
       "defaultConfiguration": "development"
@@ -78,16 +71,13 @@
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "http:build"
+        "browserTarget": "crud:build"
       }
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
       "options": {
-        "lintFilePatterns": [
+        "lintFilePatterns": ["apps/crud/**/*.ts", "apps/crud/**/*.html"]
-          "apps/http/**/*.ts",
-          "apps/http/**/*.html"
-        ]
       }
     }
   },

apps/crud/src/index.html

@@ -6,9 +6,13 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-          <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
-          <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link
-        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet" />
   </head>
   <body>
     <app-root></app-root>

apps/crud/src/styles.scss

@@ -1,10 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
 html,
 body {
-    height: 100%;
+  height: 100%;
 }
 
 body {
-    margin: 0;
+  margin: 0;
-    font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
 }