last step

first-app/db.json

@@ -0,0 +1,104 @@
+{
+  "locations": [
+    {
+      "id": 0,
+      "name": "Acme Fresh Start Housing",
+      "city": "Chicago",
+      "state": "IL",
+      "photo": "https://angular.dev/assets/images/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg",
+      "availableUnits": 4,
+      "wifi": true,
+      "laundry": true
+    },
+    {
+      "id": 1,
+      "name": "A113 Transitional Housing",
+      "city": "Santa Monica",
+      "state": "CA",
+      "photo": "https://angular.dev/assets/images/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg",
+      "availableUnits": 0,
+      "wifi": false,
+      "laundry": true
+    },
+    {
+      "id": 2,
+      "name": "Warm Beds Housing Support",
+      "city": "Juneau",
+      "state": "AK",
+      "photo": "https://angular.dev/assets/images/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg",
+      "availableUnits": 1,
+      "wifi": false,
+      "laundry": false
+    },
+    {
+      "id": 3,
+      "name": "Homesteady Housing",
+      "city": "Chicago",
+      "state": "IL",
+      "photo": "https://angular.dev/assets/images/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg",
+      "availableUnits": 1,
+      "wifi": true,
+      "laundry": false
+    },
+    {
+      "id": 4,
+      "name": "Happy Homes Group",
+      "city": "Gary",
+      "state": "IN",
+      "photo": "https://angular.dev/assets/images/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg",
+      "availableUnits": 1,
+      "wifi": true,
+      "laundry": false
+    },
+    {
+      "id": 5,
+      "name": "Hopeful Apartment Group",
+      "city": "Oakland",
+      "state": "CA",
+      "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg",
+      "availableUnits": 2,
+      "wifi": true,
+      "laundry": true
+    },
+    {
+      "id": 6,
+      "name": "Seriously Safe Towns",
+      "city": "Oakland",
+      "state": "CA",
+      "photo": "https://angular.dev/assets/images/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg",
+      "availableUnits": 5,
+      "wifi": true,
+      "laundry": true
+    },
+    {
+      "id": 7,
+      "name": "Hopeful Housing Solutions",
+      "city": "Oakland",
+      "state": "CA",
+      "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg",
+      "availableUnits": 2,
+      "wifi": true,
+      "laundry": true
+    },
+    {
+      "id": 8,
+      "name": "Seriously Safe Towns",
+      "city": "Oakland",
+      "state": "CA",
+      "photo": "https://angular.dev/assets/images/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg",
+      "availableUnits": 10,
+      "wifi": false,
+      "laundry": false
+    },
+    {
+      "id": 9,
+      "name": "Capital Safe Towns",
+      "city": "Portland",
+      "state": "OR",
+      "photo": "https://angular.dev/assets/images/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg",
+      "availableUnits": 6,
+      "wifi": true,
+      "laundry": true
+    }
+  ]
+}

first-app/package-lock.json

@@ -14,6 +14,7 @@
         "@angular/forms": "^20.2.0-next",
         "@angular/platform-browser": "^20.2.0-next",
         "@angular/router": "^20.2.0-next",
+        "json-server": "^1.0.0-beta.3",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -3394,6 +3395,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "license": "MIT"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.52.3",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.3.tgz",
@@ -3799,6 +3806,262 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/@tinyhttp/accepts": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/accepts/-/accepts-2.2.3.tgz",
+      "integrity": "sha512-9pQN6pJAJOU3McmdJWTcyq7LLFW8Lj5q+DadyKcvp+sxMkEpktKX5sbfJgJuOvjk6+1xWl7pe0YL1US1vaO/1w==",
+      "license": "MIT",
+      "dependencies": {
+        "mime": "4.0.4",
+        "negotiator": "^0.6.3"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/accepts/node_modules/negotiator": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
+      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@tinyhttp/app": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/app/-/app-2.5.2.tgz",
+      "integrity": "sha512-DcB3Y8GQppLQlO2VxRYF7LzTEAoZb+VRQXuIsErcu2fNaM1xdx6NQZDso5rlZUiaeg6KYYRfU34N4XkZbv6jSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/cookie": "2.1.1",
+        "@tinyhttp/proxy-addr": "2.2.1",
+        "@tinyhttp/req": "2.2.5",
+        "@tinyhttp/res": "2.2.5",
+        "@tinyhttp/router": "2.2.3",
+        "header-range-parser": "1.1.3",
+        "regexparam": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/content-disposition": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/content-disposition/-/content-disposition-2.2.2.tgz",
+      "integrity": "sha512-crXw1txzrS36huQOyQGYFvhTeLeG0Si1xu+/l6kXUVYpE0TjFjEZRqTbuadQLfKGZ0jaI+jJoRyqaWwxOSHW2g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/content-type": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/content-type/-/content-type-0.1.4.tgz",
+      "integrity": "sha512-dl6f3SHIJPYbhsW1oXdrqOmLSQF/Ctlv3JnNfXAE22kIP7FosqJHxkz/qj2gv465prG8ODKH5KEyhBkvwrueKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4"
+      }
+    },
+    "node_modules/@tinyhttp/cookie": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cookie/-/cookie-2.1.1.tgz",
+      "integrity": "sha512-h/kL9jY0e0Dvad+/QU3efKZww0aTvZJslaHj3JTPmIPC9Oan9+kYqmh3M6L5JUQRuTJYFK2nzgL2iJtH2S+6dA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/cookie-signature": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cookie-signature/-/cookie-signature-2.1.1.tgz",
+      "integrity": "sha512-VDsSMY5OJfQJIAtUgeQYhqMPSZptehFSfvEEtxr+4nldPA8IImlp3QVcOVuK985g4AFR4Hl1sCbWCXoqBnVWnw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/cors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cors/-/cors-2.0.1.tgz",
+      "integrity": "sha512-qrmo6WJuaiCzKWagv2yA/kw6hIISfF/hOqPWwmI6w0o8apeTMmRN3DoCFvQ/wNVuWVdU5J4KU7OX8aaSOEq51A==",
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/vary": "^0.1.3"
+      },
+      "engines": {
+        "node": ">=12.20 || 14.x || >=16"
+      }
+    },
+    "node_modules/@tinyhttp/encode-url": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/encode-url/-/encode-url-2.1.1.tgz",
+      "integrity": "sha512-AhY+JqdZ56qV77tzrBm0qThXORbsVjs/IOPgGCS7x/wWnsa/Bx30zDUU/jPAUcSzNOzt860x9fhdGpzdqbUeUw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/etag": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/etag/-/etag-2.1.2.tgz",
+      "integrity": "sha512-j80fPKimGqdmMh6962y+BtQsnYPVCzZfJw0HXjyH70VaJBHLKGF+iYhcKqzI3yef6QBNa8DKIPsbEYpuwApXTw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/forwarded": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/forwarded/-/forwarded-2.1.2.tgz",
+      "integrity": "sha512-9H/eulJ68ElY/+zYpTpNhZ7vxGV+cnwaR6+oQSm7bVgZMyuQfgROW/qvZuhmgDTIxnGMXst+Ba4ij6w6Krcs3w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/logger": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/logger/-/logger-2.1.0.tgz",
+      "integrity": "sha512-Ma1fJ9CwUbn9r61/4HW6+nflsVoslpOnCrfQ6UeZq7GGIgwLzofms3HoSVG7M+AyRMJpxlfcDdbH5oFVroDMKA==",
+      "license": "MIT",
+      "dependencies": {
+        "colorette": "^2.0.20",
+        "dayjs": "^1.11.13",
+        "http-status-emojis": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=14.18 || >=16.20"
+      }
+    },
+    "node_modules/@tinyhttp/proxy-addr": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/proxy-addr/-/proxy-addr-2.2.1.tgz",
+      "integrity": "sha512-BicqMqVI91hHq2BQmnqJUh0FQUnx7DncwSGgu2ghlh+JZG2rHK2ZN/rXkfhrx1rrUw6hnd0L36O8GPMh01+dDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/forwarded": "2.1.2",
+        "ipaddr.js": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/proxy-addr/node_modules/ipaddr.js": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
+      "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tinyhttp/req": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/req/-/req-2.2.5.tgz",
+      "integrity": "sha512-trfsXwtmsNjMcGKcLJ+45h912kLRqBQCQD06ams3Tq0kf4gHLxjHjoYOC1Z9yGjOn81XllRx8wqvnvr+Kbe3gw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/accepts": "2.2.3",
+        "@tinyhttp/type-is": "2.2.4",
+        "@tinyhttp/url": "2.1.1",
+        "header-range-parser": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/res": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/res/-/res-2.2.5.tgz",
+      "integrity": "sha512-yBsqjWygpuKAVz4moWlP4hqzwiDDqfrn2mA0wviJAcgvGiyOErtlQwXY7aj3aPiCpURvxvEFO//Gdy6yV+xEpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/content-disposition": "2.2.2",
+        "@tinyhttp/cookie": "2.1.1",
+        "@tinyhttp/cookie-signature": "2.1.1",
+        "@tinyhttp/encode-url": "2.1.1",
+        "@tinyhttp/req": "2.2.5",
+        "@tinyhttp/send": "2.2.3",
+        "@tinyhttp/vary": "^0.1.3",
+        "es-escape-html": "^0.1.1",
+        "mime": "4.0.4"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/router": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/router/-/router-2.2.3.tgz",
+      "integrity": "sha512-O0MQqWV3Vpg/uXsMYg19XsIgOhwjyhTYWh51Qng7bxqXixxx2PEvZWnFjP7c84K7kU/nUX41KpkEBTLnznk9/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/send": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/send/-/send-2.2.3.tgz",
+      "integrity": "sha512-o4cVHHGQ8WjVBS8UT0EE/2WnjoybrfXikHwsRoNlG1pfrC/Sd01u1N4Te8cOd/9aNGLr4mGxWb5qTm2RRtEi7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/content-type": "^0.1.4",
+        "@tinyhttp/etag": "2.1.2",
+        "mime": "4.0.4"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/type-is": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/type-is/-/type-is-2.2.4.tgz",
+      "integrity": "sha512-7F328NheridwjIfefBB2j1PEcKKABpADgv7aCJaE8x8EON77ZFrAkI3Rir7pGjopV7V9MBmW88xUQigBEX2rmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/content-type": "^0.1.4",
+        "mime": "4.0.4"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/url": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/url/-/url-2.1.1.tgz",
+      "integrity": "sha512-POJeq2GQ5jI7Zrdmj22JqOijB5/GeX+LEX7DUdml1hUnGbJOTWDx7zf2b5cCERj7RoXL67zTgyzVblBJC+NJWg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/vary": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/vary/-/vary-0.1.3.tgz",
+      "integrity": "sha512-SoL83sQXAGiHN1jm2VwLUWQSQeDAAl1ywOm6T0b0Cg1CZhVsjoiZadmjhxF6FHCCY7OHHVaLnTgSMxTPIDLxMg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
@@ -4306,7 +4569,6 @@
       "version": "5.6.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
       "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
@@ -4326,7 +4588,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "readdirp": "^4.0.1"
@@ -4443,7 +4704,6 @@
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/content-disposition": {
@@ -4562,6 +4822,12 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.19",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -4670,6 +4936,21 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
+    "node_modules/dot-prop": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-9.0.0.tgz",
+      "integrity": "sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^4.18.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4797,6 +5078,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-escape-html": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/es-escape-html/-/es-escape-html-0.1.1.tgz",
+      "integrity": "sha512-yUx1o+8RsG7UlszmYPtks+dm6Lho2m8lgHMOsLJQsFI0R8XwUJwiMhM1M4E/S8QLeGyf6MkDV/pWgjQ0tdTSyQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.x"
+      }
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -4869,6 +5159,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/eta": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/eta/-/eta-3.5.0.tgz",
+      "integrity": "sha512-e3x3FBvGzeCIHhF+zhK8FZA2vC5uFn6b4HJjegUbIWrDb4mJ7JjTGMJY9VGIbRVpmSwHopNiaJibhjIr+HfLug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/eta-dev/eta?sponsor=1"
+      }
+    },
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -5277,6 +5579,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/header-range-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/header-range-parser/-/header-range-parser-1.1.3.tgz",
+      "integrity": "sha512-B9zCFt3jH8g09LR1vHL4pcAn8yMEtlSlOUdQemzHMRKMImNIhhszdeosYFfNW0WXKQtXIlWB+O4owHJKvEJYaA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.22.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-9.0.2.tgz",
@@ -5381,6 +5692,12 @@
         "node": ">= 14"
       }
     },
+    "node_modules/http-status-emojis": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/http-status-emojis/-/http-status-emojis-2.2.0.tgz",
+      "integrity": "sha512-ompKtgwpx8ff0hsbpIB7oE4ax1LXoHmftsHHStMELX56ivG3GhofTX8ZHWlUaFKfGjcGjw6G3rPk7dJRXMmbbg==",
+      "license": "MIT"
+    },
     "node_modules/https-proxy-agent": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
@@ -5454,6 +5771,15 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inflection": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-3.0.2.tgz",
+      "integrity": "sha512-+Bg3+kg+J6JUWn8J6bzFmOWkTQ6L/NHfDRSYU+EVvuKHDxUDHAXgqixHfVlzuBQaPOTac8hn43aPhMNk6rMe3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -5676,11 +6002,37 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-server": {
+      "version": "1.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/json-server/-/json-server-1.0.0-beta.3.tgz",
+      "integrity": "sha512-DwE69Ep5ccwIJZBUIWEENC30Yj8bwr4Ax9W9VoIWAYnB8Sj4ReptscO8/DRHv/nXwVlmb3Bk73Ls86+VZdYkkA==",
+      "license": "SEE LICENSE IN ./LICENSE",
+      "dependencies": {
+        "@tinyhttp/app": "^2.4.0",
+        "@tinyhttp/cors": "^2.0.1",
+        "@tinyhttp/logger": "^2.0.0",
+        "chalk": "^5.3.0",
+        "chokidar": "^4.0.1",
+        "dot-prop": "^9.0.0",
+        "eta": "^3.5.0",
+        "inflection": "^3.0.0",
+        "json5": "^2.2.3",
+        "lowdb": "^7.0.1",
+        "milliparsec": "^4.0.0",
+        "sirv": "^2.0.4",
+        "sort-on": "^6.1.0"
+      },
+      "bin": {
+        "json-server": "lib/bin.js"
+      },
+      "engines": {
+        "node": ">=18.3"
+      }
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "json5": "lib/cli.js"
@@ -5835,6 +6187,21 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
+    "node_modules/lowdb": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/lowdb/-/lowdb-7.0.1.tgz",
+      "integrity": "sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==",
+      "license": "MIT",
+      "dependencies": {
+        "steno": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -5947,6 +6314,30 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/milliparsec": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/milliparsec/-/milliparsec-4.0.0.tgz",
+      "integrity": "sha512-/wk9d4Z6/9ZvoEH/6BI4TrTCgmkpZPuSRN/6fI9aUHOfXdNTuj/VhLS7d+NqG26bi6L9YmGXutVYvWC8zQ0qtA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/mime": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.4.tgz",
+      "integrity": "sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "license": "MIT",
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.54.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
@@ -6169,7 +6560,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
       "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -7078,7 +7468,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 14.18.0"
@@ -7095,6 +7484,15 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/regexparam": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
+      "integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -7466,6 +7864,20 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/slice-ansi": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
@@ -7524,6 +7936,21 @@
         "node": ">= 14"
       }
     },
+    "node_modules/sort-on": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/sort-on/-/sort-on-6.1.1.tgz",
+      "integrity": "sha512-PB8pVvXAoRBijBCvuKJnmo06D8mSnQlLij0abfB2VdOpfFm29sPGYD4ft2prUPo1AZXTnkn3pP48AppRWyMkrw==",
+      "license": "MIT",
+      "dependencies": {
+        "dot-prop": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
@@ -7637,6 +8064,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/steno": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/steno/-/steno-4.0.2.tgz",
+      "integrity": "sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/string-width": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
@@ -7893,6 +8332,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/ts-node": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
@@ -7958,6 +8406,18 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/type-is": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",

first-app/package.json

@@ -15,6 +15,7 @@
     "@angular/forms": "^20.2.0-next",
     "@angular/platform-browser": "^20.2.0-next",
     "@angular/router": "^20.2.0-next",
+    "json-server": "^1.0.0-beta.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"

first-app/src/app/app.html

@@ -1,8 +1,7 @@
-<main>
-    <header class="brand-name">
-        <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
-    </header>
+<main><a [routerLink]="['/']">
+    <header class="brand-name"><img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true"/></header>
+</a>
     <section class="content">
-        <app-home></app-home>
+        <router-outlet></router-outlet>
     </section>
 </main>

first-app/src/app/app.ts

@@ -1,12 +1,13 @@
 import {Component} from '@angular/core';
 import {Home} from './home/home';
+import {RouterModule} from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  imports: [Home],
-  templateUrl: './app.html',
-  styleUrls: ['./app.css'],
+    selector: 'app-root',
+    imports: [Home, RouterModule],
+    templateUrl: './app.html',
+    styleUrls: ['./app.css'],
 })
 export class App {
-  title = 'homes';
+    title = 'homes';
 }

first-app/src/app/details/details.css

@@ -0,0 +1,62 @@
+.listing-photo {
+    height: 600px;
+    width: 50%;
+    object-fit: cover;
+    border-radius: 30px;
+    float: right;
+}
+.listing-heading {
+    font-size: 48pt;
+    font-weight: bold;
+    margin-bottom: 15px;
+}
+.listing-location::before {
+    content: url('/assets/location-pin.svg') / '';
+}
+.listing-location {
+    font-size: 24pt;
+    margin-bottom: 15px;
+}
+.listing-features > .section-heading {
+    color: var(--secondary-color);
+    font-size: 24pt;
+    margin-bottom: 15px;
+}
+.listing-features {
+    margin-bottom: 20px;
+}
+.listing-features li {
+    font-size: 14pt;
+}
+li {
+    list-style-type: none;
+}
+.listing-apply .section-heading {
+    font-size: 18pt;
+    margin-bottom: 15px;
+}
+label, input {
+    display: block;
+}
+label {
+    color: var(--secondary-color);
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 12pt;
+}
+input {
+    font-size: 16pt;
+    margin-bottom: 15px;
+    padding: 10px;
+    width: 400px;
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    border-bottom: solid .3px;
+}
+@media (max-width: 1024px) {
+    .listing-photo {
+        width: 100%;
+        height: 400px;
+    }
+}

first-app/src/app/details/details.html

@@ -0,0 +1,32 @@
+<article>
+    <img
+            class="listing-photo"
+            [src]="housingLocation?.photo"
+            alt="Exterior photo of {{ housingLocation?.name }}"
+            crossorigin
+    />
+    <section class="listing-description">
+        <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
+        <p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
+    </section>
+    <section class="listing-features">
+        <h2 class="section-heading">About this housing location</h2>
+        <ul>
+            <li>Units available: {{ housingLocation?.availableUnits }}</li>
+            <li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
+            <li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
+        </ul>
+    </section>
+    <section class="listing-apply">
+        <h2 class="section-heading">Apply now to live here</h2>
+        <form [formGroup]="applyForm" (submit)="submitApplication()">
+            <label for="first-name">First Name</label>
+            <input id="first-name" type="text" formControlName="firstName"/>
+            <label for="last-name">Last Name</label>
+            <input id="last-name" type="text" formControlName="lastName"/>
+            <label for="email">Email</label>
+            <input id="email" type="email" formControlName="email"/>
+            <button type="submit" class="primary">Apply now</button>
+        </form>
+    </section>
+</article>

first-app/src/app/details/details.ts

@@ -0,0 +1,36 @@
+import {Component, inject} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {HousingService} from '../housing';
+import {HousingLocationInfo} from '../housinglocation';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+@Component({
+    selector: 'app-details',
+    imports: [ReactiveFormsModule],
+    templateUrl: 'details.html',
+    styleUrls: ['./details.css'],
+})
+
+export class Details {
+    route: ActivatedRoute = inject(ActivatedRoute);
+    housingService = inject(HousingService);
+    housingLocation: HousingLocationInfo | undefined;
+    applyForm = new FormGroup({
+        firstName: new FormControl(''),
+        lastName: new FormControl(''),
+        email: new FormControl(''),
+    });
+    constructor() {
+        const housingLocationId = parseInt(this.route.snapshot.params['id'], 10);
+        this.housingService.getHousingLocationById(housingLocationId).then((housingLocation) => {
+            this.housingLocation = housingLocation;
+        });
+    }
+
+    submitApplication() {
+        this.housingService.submitApplication(
+            this.applyForm.value.firstName ?? '',
+            this.applyForm.value.lastName ?? '',
+            this.applyForm.value.email ?? '',
+        );
+    }
+}

first-app/src/app/home/home.html

@@ -1,9 +1,10 @@
 <section>
-    <form><input type="text" placeholder="Filter by city"/>
-        <button class="primary" type="button">Search</button>
+    <form><input type="text" placeholder="Filter by city" #filter/>
+        <button class="primary" type="button" (click)="filterResults(filter.value)">Search</button>
     </form>
 </section>
-
 <section class="results">
-    <app-housing-location [housingLocation]="housingLocation"/>
+    @for (housingLocation of filteredLocationList; track $index) {
+        <app-housing-location [housingLocation]="housingLocation"></app-housing-location>
+    }
 </section>

first-app/src/app/home/home.ts

@@ -1,25 +1,38 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {HousingLocation} from '../housing-location/housing-location';  //Importation du component ici pour l'intégrer à la page
 
 import {HousingLocationInfo} from '../housinglocation'; // Importation de l'interface
 
+import {HousingService} from '../housing'; // Importation d'un service
+
 @Component({
     selector: 'app-home',
     imports: [HousingLocation],
-    templateUrl: './home.html',
+    templateUrl: 'home.html',
     styleUrls: ['./home.css'],
 })
 
 export class Home {
-    readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
-    housingLocation: HousingLocationInfo = {
-        id: 9999,
-        name: 'Test Home',
-        city: 'Test city',
-        state: 'ST',
-        photo: `${this.baseUrl}/example-house.jpg`,
-        availableUnits: 99,
-        wifi: true,
-        laundry: false,
-    };
-}
+    housingLocationList: HousingLocationInfo[] = [];
+    housingService: HousingService = inject(HousingService);
+    filteredLocationList: HousingLocationInfo[] = [];
+
+    constructor() {
+        this.housingService
+            .getAllHousingLocations()
+            .then((housingLocationList: HousingLocationInfo[]) => {
+                this.housingLocationList = housingLocationList;
+                this.filteredLocationList = housingLocationList;
+            });
+    }
+
+    filterResults(text: string) {
+        if (!text) {
+            this.filteredLocationList = this.housingLocationList;
+            return;
+        }
+        this.filteredLocationList = this.housingLocationList
+            .filter((housingLocation) => housingLocation?.city.toLowerCase()
+                .includes(text.toLowerCase()),);
+    }
+}

first-app/src/app/housing-location/housing-location.html

@@ -0,0 +1,7 @@
+<section class="listing">
+    <img class="listing-photo" [src]="housingLocation().photo"
+         alt="Exterior photo of {{ housingLocation().name }}" crossorigin/>
+    <h2 class="listing-heading">{{ housingLocation().name }}</h2>
+    <p class="listing-location">{{ housingLocation().city }}, {{ housingLocation().state }}</p>
+    <a [routerLink]="['/details', housingLocation().id]">Learn More</a>
+</section>

first-app/src/app/housing-location/housing-location.ts

@@ -1,13 +1,11 @@
 import {Component, input} from '@angular/core'; // Importation de la fonction input() et des components
 import {HousingLocationInfo} from '../housinglocation'; // Interface
+
+import {RouterModule} from '@angular/router'; // Importation du router
 @Component({
     selector: 'app-housing-location',
-    imports: [],
-    template: `
-        <p>
-            housing-location works!
-        </p>
-    `,
+    imports: [RouterModule],
+    templateUrl: './housing-location.html',
     styleUrls: ['./housing-location.css'],
 })
 export class HousingLocation {

first-app/src/app/housing.ts

@@ -0,0 +1,25 @@
+import {Injectable} from '@angular/core';
+import {HousingLocationInfo} from './housinglocation';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class HousingService {
+    url = 'http://localhost:3000/locations';
+
+    async getAllHousingLocations(): Promise<HousingLocationInfo[]> {
+        const data = await fetch(this.url);
+        return (await data.json()) ?? [];
+    }
+
+    async getHousingLocationById(id: number): Promise<HousingLocationInfo | undefined> {
+        const data = await fetch(`${this.url}?id=${id}`);
+        const locationJson = await data.json();
+        return locationJson[0] ?? {};
+    }
+
+    submitApplication(firstName: string, lastName: string, email: string) {
+        // tslint:disable-next-line
+        console.log(firstName, lastName, email);
+    }
+}

first-app/src/app/routes.ts

@@ -0,0 +1,17 @@
+import {Routes} from '@angular/router';
+import {Home} from './home/home';
+import {Details} from './details/details';
+
+const routeConfig: Routes = [
+    {
+        path: '',
+        component: Home,
+        title: 'Home page',
+    },
+    {
+        path: 'details/:id',
+        component: Details,
+        title: 'Home details',
+    },
+];
+export default routeConfig;

first-app/src/main.ts

@@ -4,7 +4,8 @@
  */
 import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';
 import {App} from './app/app';
-
-bootstrapApplication(App, {providers: [provideProtractorTestingSupport()]}).catch((err) =>
-  console.error(err),
-);
+import {provideRouter} from '@angular/router';
+import routeConfig from './app/routes';
+bootstrapApplication(App, {
+    providers: [provideProtractorTestingSupport(), provideRouter(routeConfig)],
+}).catch((err) => console.error(err));