feat: create Angular 20 app with NgRx to display users and hobbies

- Set up Angular 20 standalone application with NgRx store
- Add User interface (id, name, surname, age, hobbyId) and Hobby interface (id, name)
- Create local JSON data files for users and hobbies
- Implement NgRx actions, reducers, effects, and selectors
- Add UserService and HobbyService to fetch data from local JSON files
- Create UsersListComponent to display users with their hobbies
- Highlight users above 80 years old with yellow background

https://claude.ai/code/session_01NUKivvudnE7YB3zkcC6w9h

.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+  // For more information, visit: https://angular.dev/ai/mcp
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    }
+  ]
+}

README.md

@@ -1 +1,59 @@
-# stackblitz-angular-test
+# UsersHobbiesApp
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.1.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

angular.json

@@ -0,0 +1,97 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "users-hobbies-app": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "users-hobbies-app:build:production"
+            },
+            "development": {
+              "buildTarget": "users-hobbies-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "users-hobbies-app",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "packageManager": "npm@10.9.4",
+  "dependencies": {
+    "@angular/common": "^21.1.0",
+    "@angular/compiler": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "@angular/forms": "^21.1.0",
+    "@angular/platform-browser": "^21.1.0",
+    "@angular/router": "^21.1.0",
+    "@ngrx/effects": "^21.0.1",
+    "@ngrx/store": "^21.0.1",
+    "@ngrx/store-devtools": "^21.0.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.1.1",
+    "@angular/cli": "^21.1.1",
+    "@angular/compiler-cli": "^21.1.0",
+    "typescript": "~5.9.2"
+  }
+}

src/app/app.config.ts

@@ -0,0 +1,24 @@
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  isDevMode,
+} from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideStore } from '@ngrx/store';
+import { provideEffects } from '@ngrx/effects';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
+import { reducers } from './store/reducers';
+import { UserEffects, HobbyEffects } from './store/effects';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideHttpClient(),
+    provideStore(reducers),
+    provideEffects([UserEffects, HobbyEffects]),
+    provideStoreDevtools({
+      maxAge: 25,
+      logOnly: !isDevMode(),
+    }),
+  ],
+};

src/app/app.html

@@ -0,0 +1 @@
+<app-users-list></app-users-list>

src/app/app.scss

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}

src/app/app.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { UsersListComponent } from './components/users-list/users-list.component';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [UsersListComponent],
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
+})
+export class App {}

src/app/components/users-list/users-list.component.html

@@ -0,0 +1,35 @@
+<div class="users-container">
+  <h1>Users and Their Hobbies</h1>
+
+  @if (loading$ | async) {
+    <div class="loading">Loading...</div>
+  } @else {
+    <table class="users-table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th>Surname</th>
+          <th>Age</th>
+          <th>Hobby</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (user of usersWithHobbies$ | async; track user.id) {
+          <tr [class.highlight]="isAbove80(user.age)">
+            <td>{{ user.id }}</td>
+            <td>{{ user.name }}</td>
+            <td>{{ user.surname }}</td>
+            <td>{{ user.age }}</td>
+            <td>{{ user.hobbyName }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  }
+
+  <div class="legend">
+    <span class="highlight-indicator"></span>
+    <span>Users above 80 years old</span>
+  </div>
+</div>

src/app/components/users-list/users-list.component.scss

@@ -0,0 +1,85 @@
+.users-container {
+  max-width: 900px;
+  margin: 2rem auto;
+  padding: 1rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+  h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 1.5rem;
+  }
+}
+
+.loading {
+  text-align: center;
+  font-size: 1.2rem;
+  color: #666;
+  padding: 2rem;
+}
+
+.users-table {
+  width: 100%;
+  border-collapse: collapse;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+
+  thead {
+    background-color: #2c3e50;
+    color: white;
+
+    th {
+      padding: 1rem;
+      text-align: left;
+      font-weight: 600;
+    }
+  }
+
+  tbody {
+    tr {
+      background-color: #fff;
+      transition: background-color 0.2s ease;
+
+      &:nth-child(even) {
+        background-color: #f8f9fa;
+      }
+
+      &:hover {
+        background-color: #e9ecef;
+      }
+
+      &.highlight {
+        background-color: #fff3cd;
+        border-left: 4px solid #ffc107;
+
+        &:hover {
+          background-color: #ffe69c;
+        }
+      }
+
+      td {
+        padding: 0.875rem 1rem;
+        border-bottom: 1px solid #dee2e6;
+      }
+    }
+  }
+}
+
+.legend {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  color: #666;
+
+  .highlight-indicator {
+    width: 20px;
+    height: 20px;
+    background-color: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 4px;
+  }
+}

src/app/components/users-list/users-list.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Store } from '@ngrx/store';
+import { Observable, combineLatest, map } from 'rxjs';
+import { User, Hobby } from '../../models';
+import { AppState, UserActions, HobbyActions } from '../../store';
+import {
+  selectAllUsers,
+  selectUsersLoading,
+  selectAllHobbies,
+  selectHobbiesLoading,
+  selectHobbiesMap,
+} from '../../store/selectors';
+
+interface UserWithHobby extends User {
+  hobbyName: string;
+}
+
+@Component({
+  selector: 'app-users-list',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './users-list.component.html',
+  styleUrl: './users-list.component.scss',
+})
+export class UsersListComponent implements OnInit {
+  private readonly store = inject(Store<AppState>);
+
+  users$: Observable<User[]> = this.store.select(selectAllUsers);
+  hobbies$: Observable<Hobby[]> = this.store.select(selectAllHobbies);
+  hobbiesMap$: Observable<Record<number, string>> =
+    this.store.select(selectHobbiesMap);
+  loading$: Observable<boolean> = combineLatest([
+    this.store.select(selectUsersLoading),
+    this.store.select(selectHobbiesLoading),
+  ]).pipe(map(([usersLoading, hobbiesLoading]) => usersLoading || hobbiesLoading));
+
+  usersWithHobbies$: Observable<UserWithHobby[]> = combineLatest([
+    this.users$,
+    this.hobbiesMap$,
+  ]).pipe(
+    map(([users, hobbiesMap]) =>
+      users.map((user) => ({
+        ...user,
+        hobbyName: hobbiesMap[user.hobbyId] || 'Unknown',
+      }))
+    )
+  );
+
+  ngOnInit(): void {
+    this.store.dispatch(UserActions.loadUsers());
+    this.store.dispatch(HobbyActions.loadHobbies());
+  }
+
+  isAbove80(age: number): boolean {
+    return age > 80;
+  }
+}

src/app/models/hobby.interface.ts

@@ -0,0 +1,4 @@
+export interface Hobby {
+  id: number;
+  name: string;
+}

src/app/models/index.ts

@@ -0,0 +1,2 @@
+export * from './user.interface';
+export * from './hobby.interface';

src/app/models/user.interface.ts

@@ -0,0 +1,7 @@
+export interface User {
+  id: number;
+  name: string;
+  surname: string;
+  age: number;
+  hobbyId: number;
+}

src/app/services/hobby.service.ts

@@ -0,0 +1,15 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Hobby } from '../models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HobbyService {
+  private readonly http = inject(HttpClient);
+
+  getHobbies(): Observable<Hobby[]> {
+    return this.http.get<Hobby[]>('assets/data/hobbies.json');
+  }
+}

src/app/services/index.ts

@@ -0,0 +1,2 @@
+export * from './user.service';
+export * from './hobby.service';

src/app/services/user.service.ts

@@ -0,0 +1,15 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { User } from '../models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+  private readonly http = inject(HttpClient);
+
+  getUsers(): Observable<User[]> {
+    return this.http.get<User[]>('assets/data/users.json');
+  }
+}

src/app/store/actions/hobby.actions.ts

@@ -0,0 +1,11 @@
+import { createActionGroup, emptyProps, props } from '@ngrx/store';
+import { Hobby } from '../../models';
+
+export const HobbyActions = createActionGroup({
+  source: 'Hobby',
+  events: {
+    'Load Hobbies': emptyProps(),
+    'Load Hobbies Success': props<{ hobbies: Hobby[] }>(),
+    'Load Hobbies Failure': props<{ error: string }>(),
+  },
+});

src/app/store/actions/index.ts

@@ -0,0 +1,2 @@
+export * from './user.actions';
+export * from './hobby.actions';

src/app/store/actions/user.actions.ts

@@ -0,0 +1,11 @@
+import { createActionGroup, emptyProps, props } from '@ngrx/store';
+import { User } from '../../models';
+
+export const UserActions = createActionGroup({
+  source: 'User',
+  events: {
+    'Load Users': emptyProps(),
+    'Load Users Success': props<{ users: User[] }>(),
+    'Load Users Failure': props<{ error: string }>(),
+  },
+});

src/app/store/effects/hobby.effects.ts

@@ -0,0 +1,26 @@
+import { Injectable, inject } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { of } from 'rxjs';
+import { map, catchError, exhaustMap } from 'rxjs/operators';
+import { HobbyService } from '../../services';
+import { HobbyActions } from '../actions';
+
+@Injectable()
+export class HobbyEffects {
+  private readonly actions$ = inject(Actions);
+  private readonly hobbyService = inject(HobbyService);
+
+  loadHobbies$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(HobbyActions.loadHobbies),
+      exhaustMap(() =>
+        this.hobbyService.getHobbies().pipe(
+          map((hobbies) => HobbyActions.loadHobbiesSuccess({ hobbies })),
+          catchError((error) =>
+            of(HobbyActions.loadHobbiesFailure({ error: error.message }))
+          )
+        )
+      )
+    )
+  );
+}

src/app/store/effects/index.ts

@@ -0,0 +1,2 @@
+export * from './user.effects';
+export * from './hobby.effects';

src/app/store/effects/user.effects.ts

@@ -0,0 +1,26 @@
+import { Injectable, inject } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { of } from 'rxjs';
+import { map, catchError, exhaustMap } from 'rxjs/operators';
+import { UserService } from '../../services';
+import { UserActions } from '../actions';
+
+@Injectable()
+export class UserEffects {
+  private readonly actions$ = inject(Actions);
+  private readonly userService = inject(UserService);
+
+  loadUsers$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(UserActions.loadUsers),
+      exhaustMap(() =>
+        this.userService.getUsers().pipe(
+          map((users) => UserActions.loadUsersSuccess({ users })),
+          catchError((error) =>
+            of(UserActions.loadUsersFailure({ error: error.message }))
+          )
+        )
+      )
+    )
+  );
+}

src/app/store/index.ts

@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './reducers';
+export * from './effects';
+export * from './selectors';

src/app/store/reducers/hobby.reducer.ts

@@ -0,0 +1,34 @@
+import { createReducer, on } from '@ngrx/store';
+import { Hobby } from '../../models';
+import { HobbyActions } from '../actions';
+
+export interface HobbyState {
+  hobbies: Hobby[];
+  loading: boolean;
+  error: string | null;
+}
+
+export const initialHobbyState: HobbyState = {
+  hobbies: [],
+  loading: false,
+  error: null,
+};
+
+export const hobbyReducer = createReducer(
+  initialHobbyState,
+  on(HobbyActions.loadHobbies, (state) => ({
+    ...state,
+    loading: true,
+    error: null,
+  })),
+  on(HobbyActions.loadHobbiesSuccess, (state, { hobbies }) => ({
+    ...state,
+    hobbies,
+    loading: false,
+  })),
+  on(HobbyActions.loadHobbiesFailure, (state, { error }) => ({
+    ...state,
+    loading: false,
+    error,
+  }))
+);

src/app/store/reducers/index.ts

@@ -0,0 +1,16 @@
+import { ActionReducerMap } from '@ngrx/store';
+import { UserState, userReducer } from './user.reducer';
+import { HobbyState, hobbyReducer } from './hobby.reducer';
+
+export interface AppState {
+  users: UserState;
+  hobbies: HobbyState;
+}
+
+export const reducers: ActionReducerMap<AppState> = {
+  users: userReducer,
+  hobbies: hobbyReducer,
+};
+
+export * from './user.reducer';
+export * from './hobby.reducer';

src/app/store/reducers/user.reducer.ts

@@ -0,0 +1,34 @@
+import { createReducer, on } from '@ngrx/store';
+import { User } from '../../models';
+import { UserActions } from '../actions';
+
+export interface UserState {
+  users: User[];
+  loading: boolean;
+  error: string | null;
+}
+
+export const initialUserState: UserState = {
+  users: [],
+  loading: false,
+  error: null,
+};
+
+export const userReducer = createReducer(
+  initialUserState,
+  on(UserActions.loadUsers, (state) => ({
+    ...state,
+    loading: true,
+    error: null,
+  })),
+  on(UserActions.loadUsersSuccess, (state, { users }) => ({
+    ...state,
+    users,
+    loading: false,
+  })),
+  on(UserActions.loadUsersFailure, (state, { error }) => ({
+    ...state,
+    loading: false,
+    error,
+  }))
+);

src/app/store/selectors/hobby.selectors.ts

@@ -0,0 +1,29 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { HobbyState } from '../reducers/hobby.reducer';
+
+export const selectHobbyState = createFeatureSelector<HobbyState>('hobbies');
+
+export const selectAllHobbies = createSelector(
+  selectHobbyState,
+  (state) => state.hobbies
+);
+
+export const selectHobbiesLoading = createSelector(
+  selectHobbyState,
+  (state) => state.loading
+);
+
+export const selectHobbiesError = createSelector(
+  selectHobbyState,
+  (state) => state.error
+);
+
+export const selectHobbiesMap = createSelector(selectAllHobbies, (hobbies) =>
+  hobbies.reduce(
+    (acc, hobby) => {
+      acc[hobby.id] = hobby.name;
+      return acc;
+    },
+    {} as Record<number, string>
+  )
+);

src/app/store/selectors/index.ts

@@ -0,0 +1,2 @@
+export * from './user.selectors';
+export * from './hobby.selectors';

src/app/store/selectors/user.selectors.ts

@@ -0,0 +1,19 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { UserState } from '../reducers/user.reducer';
+
+export const selectUserState = createFeatureSelector<UserState>('users');
+
+export const selectAllUsers = createSelector(
+  selectUserState,
+  (state) => state.users
+);
+
+export const selectUsersLoading = createSelector(
+  selectUserState,
+  (state) => state.loading
+);
+
+export const selectUsersError = createSelector(
+  selectUserState,
+  (state) => state.error
+);

src/assets/data/hobbies.json

@@ -0,0 +1,7 @@
+[
+  { "id": 1, "name": "Reading" },
+  { "id": 2, "name": "Gardening" },
+  { "id": 3, "name": "Cooking" },
+  { "id": 4, "name": "Photography" },
+  { "id": 5, "name": "Hiking" }
+]

src/assets/data/users.json

@@ -0,0 +1,12 @@
+[
+  { "id": 1, "name": "John", "surname": "Doe", "age": 25, "hobbyId": 1 },
+  { "id": 2, "name": "Jane", "surname": "Smith", "age": 82, "hobbyId": 2 },
+  { "id": 3, "name": "Bob", "surname": "Johnson", "age": 45, "hobbyId": 3 },
+  { "id": 4, "name": "Alice", "surname": "Williams", "age": 85, "hobbyId": 4 },
+  { "id": 5, "name": "Charlie", "surname": "Brown", "age": 30, "hobbyId": 5 },
+  { "id": 6, "name": "Diana", "surname": "Ross", "age": 91, "hobbyId": 1 },
+  { "id": 7, "name": "Edward", "surname": "Miller", "age": 55, "hobbyId": 2 },
+  { "id": 8, "name": "Fiona", "surname": "Davis", "age": 78, "hobbyId": 3 },
+  { "id": 9, "name": "George", "surname": "Wilson", "age": 88, "hobbyId": 4 },
+  { "id": 10, "name": "Helen", "surname": "Taylor", "age": 42, "hobbyId": 5 }
+]

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>UsersHobbiesApp</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>

src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));

src/styles.scss

@@ -0,0 +1,12 @@
+/* Global styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}

tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}

tsconfig.json

@@ -0,0 +1,30 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}