diff --git a/README.md b/README.md
index 47a1add059..c72db9c3f5 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ and implement the ability to toggle and rename todos.
 ## Toggling a todo status
 
 Toggle the `completed` status on `TodoStatus` change:
+
 - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
 - covered the todo with a loader overlay while waiting for API response;
 - the status should be changed on success;
@@ -38,6 +39,7 @@ Implement the ability to edit a todo title on double click:
 - or the deletion error message if we tried to delete the todo.
 
 ## If you want to enable tests
+
 - open `cypress/integration/page.spec.js`
 - replace `describe.skip` with `describe` for the root `describe`
 
@@ -47,4 +49,4 @@ Implement the ability to edit a todo title on double click:
 
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_todo-app-with-api/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://ievgen-nikiforov.github.io/react_todo-app-with-api/) and add it to the PR description.
diff --git a/package-lock.json b/package-lock.json
index 19701e8788..5b28dd94d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
       },
       "devDependencies": {
         "@cypress/react18": "^2.0.1",
-        "@mate-academy/scripts": "^1.8.5",
+        "@mate-academy/scripts": "^2.1.3",
         "@mate-academy/students-ts-config": "*",
         "@mate-academy/stylelint-config": "*",
         "@types/node": "^20.14.10",
@@ -42,7 +42,7 @@
         "mochawesome": "^7.1.3",
         "mochawesome-merge": "^4.3.0",
         "mochawesome-report-generator": "^6.2.0",
-        "prettier": "^3.3.2",
+        "prettier": "^3.8.3",
         "sass": "^1.77.8",
         "stylelint": "^16.7.0",
         "typescript": "^5.2.2",
@@ -1183,9 +1183,9 @@
       }
     },
     "node_modules/@mate-academy/scripts": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.5.tgz",
-      "integrity": "sha512-mHRY2FkuoYCf5U0ahIukkaRo5LSZsxrTSgMJheFoyf3VXsTvfM9OfWcZIDIDB521kdPrScHHnRp+JRNjCfUO5A==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz",
+      "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==",
       "dev": true,
       "dependencies": {
         "@octokit/rest": "^17.11.2",
@@ -1219,185 +1219,12 @@
         "stylelint-scss": "^5.3.0"
       }
     },
-    "node_modules/@mate-academy/stylelint-config/node_modules/balanced-match": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
-      "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/cosmiconfig": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
-      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "import-fresh": "^3.3.0",
-        "js-yaml": "^4.1.0",
-        "parse-json": "^5.2.0",
-        "path-type": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/d-fischer"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.9.5"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/decamelize": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz",
-      "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/file-entry-cache": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.2.tgz",
-      "integrity": "sha512-TfW7/1iI4Cy7Y8L6iqNdZQVvdXn0f8B4QcIXmkIbtTIe/Okm/nSlHb4IwGzRVOd3WfSieCgvf5cMzEfySAIl0g==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "flat-cache": "^3.2.0"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/@mate-academy/stylelint-config/node_modules/known-css-properties": {
       "version": "0.29.0",
       "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
       "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
       "dev": true
     },
-    "node_modules/@mate-academy/stylelint-config/node_modules/meow": {
-      "version": "10.1.5",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz",
-      "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/minimist": "^1.2.2",
-        "camelcase-keys": "^7.0.0",
-        "decamelize": "^5.0.0",
-        "decamelize-keys": "^1.1.0",
-        "hard-rejection": "^2.1.0",
-        "minimist-options": "4.1.0",
-        "normalize-package-data": "^3.0.2",
-        "read-pkg-up": "^8.0.0",
-        "redent": "^4.0.0",
-        "trim-newlines": "^4.0.2",
-        "type-fest": "^1.2.2",
-        "yargs-parser": "^20.2.9"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/postcss-safe-parser": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
-      "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.3.3"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/stylelint": {
-      "version": "15.11.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.11.0.tgz",
-      "integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@csstools/css-parser-algorithms": "^2.3.1",
-        "@csstools/css-tokenizer": "^2.2.0",
-        "@csstools/media-query-list-parser": "^2.1.4",
-        "@csstools/selector-specificity": "^3.0.0",
-        "balanced-match": "^2.0.0",
-        "colord": "^2.9.3",
-        "cosmiconfig": "^8.2.0",
-        "css-functions-list": "^3.2.1",
-        "css-tree": "^2.3.1",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.1",
-        "fastest-levenshtein": "^1.0.16",
-        "file-entry-cache": "^7.0.0",
-        "global-modules": "^2.0.0",
-        "globby": "^11.1.0",
-        "globjoin": "^0.1.4",
-        "html-tags": "^3.3.1",
-        "ignore": "^5.2.4",
-        "import-lazy": "^4.0.0",
-        "imurmurhash": "^0.1.4",
-        "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.29.0",
-        "mathml-tag-names": "^2.1.3",
-        "meow": "^10.1.5",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.28",
-        "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-safe-parser": "^6.0.0",
-        "postcss-selector-parser": "^6.0.13",
-        "postcss-value-parser": "^4.2.0",
-        "resolve-from": "^5.0.0",
-        "string-width": "^4.2.3",
-        "strip-ansi": "^6.0.1",
-        "style-search": "^0.1.0",
-        "supports-hyperlinks": "^3.0.0",
-        "svg-tags": "^1.0.0",
-        "table": "^6.8.1",
-        "write-file-atomic": "^5.0.1"
-      },
-      "bin": {
-        "stylelint": "bin/stylelint.mjs"
-      },
-      "engines": {
-        "node": "^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/stylelint"
-      }
-    },
     "node_modules/@mate-academy/stylelint-config/node_modules/stylelint-config-recommended": {
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz",
@@ -1480,19 +1307,6 @@
         "stylelint": "^14.5.1 || ^15.0.0"
       }
     },
-    "node_modules/@mate-academy/stylelint-config/node_modules/type-fest": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
-      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1528,71 +1342,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@octokit/auth-token": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-5.1.1.tgz",
-      "integrity": "sha512-rh3G3wDO8J9wSjfI436JUKzHIxq8NaiL0tVeB2aXmG6p/9859aUOAjA9pmSPNGGZxfwmaJ9ozOJImuNVJdpvbA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/core": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-6.1.2.tgz",
-      "integrity": "sha512-hEb7Ma4cGJGEUNOAVmyfdB/3WirWMg5hDuNFVejGEDFqupeOysLc2sG6HJxY2etBp5YQu5Wtxwi020jS9xlUwg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@octokit/auth-token": "^5.0.0",
-        "@octokit/graphql": "^8.0.0",
-        "@octokit/request": "^9.0.0",
-        "@octokit/request-error": "^6.0.1",
-        "@octokit/types": "^13.0.0",
-        "before-after-hook": "^3.0.2",
-        "universal-user-agent": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/endpoint": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-10.1.1.tgz",
-      "integrity": "sha512-JYjh5rMOwXMJyUpj028cu0Gbp7qe/ihxfJMLc8VZBMMqSwLgOxDI1911gV4Enl1QSavAQNJcwmwBF9M0VvLh6Q==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@octokit/types": "^13.0.0",
-        "universal-user-agent": "^7.0.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/graphql": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-8.1.1.tgz",
-      "integrity": "sha512-ukiRmuHTi6ebQx/HFRCXKbDlOh/7xEV6QUXaE7MJEKGNAncGI/STSbOkl12qVXZrfZdpXctx5O9X1AIaebiDBg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@octokit/request": "^9.0.0",
-        "@octokit/types": "^13.0.0",
-        "universal-user-agent": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/openapi-types": {
-      "version": "22.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz",
-      "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/@octokit/plugin-paginate-rest": {
       "version": "2.21.3",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.21.3.tgz",
@@ -1648,35 +1397,6 @@
         "@types/node": ">= 8"
       }
     },
-    "node_modules/@octokit/request": {
-      "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-9.1.3.tgz",
-      "integrity": "sha512-V+TFhu5fdF3K58rs1pGUJIDH5RZLbZm5BI+MNF+6o/ssFNT4vWlCh/tVpF3NxGtP15HUxTTMUbsG5llAuU2CZA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@octokit/endpoint": "^10.0.0",
-        "@octokit/request-error": "^6.0.1",
-        "@octokit/types": "^13.1.0",
-        "universal-user-agent": "^7.0.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/request-error": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-6.1.4.tgz",
-      "integrity": "sha512-VpAhIUxwhWZQImo/dWAN/NpPqqojR6PSLgLYAituLM6U+ddx9hCioFGwBr5Mi+oi5CLeJkcAs3gJ0PYYzU6wUg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@octokit/types": "^13.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "node_modules/@octokit/rest": {
       "version": "17.11.2",
       "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-17.11.2.tgz",
@@ -1852,16 +1572,6 @@
         "os-name": "^3.1.0"
       }
     },
-    "node_modules/@octokit/types": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.5.0.tgz",
-      "integrity": "sha512-HdqWTf5Z3qwDVlzCrP8UJquMwunpDiMPt5er+QjGzL4hqr/vBVY/MauQgS1xWxCDT1oMx1EULyqxncdCY/NVSQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@octokit/openapi-types": "^22.2.0"
-      }
-    },
     "node_modules/@pkgr/core": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
@@ -2180,13 +1890,6 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
-    "node_modules/@types/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/@types/node": {
       "version": "20.14.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
@@ -2196,13 +1899,6 @@
         "undici-types": "~5.26.4"
       }
     },
-    "node_modules/@types/normalize-package-data": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
-      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -2259,40 +1955,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.16.0.tgz",
-      "integrity": "sha512-py1miT6iQpJcs1BiJjm54AMzeuMPBSPuKPlnT8HlfudbcS5rYeX5jajpLf3mrdRh9dA/Ec2FVUY0ifeVNDIhZw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.16.0",
-        "@typescript-eslint/type-utils": "7.16.0",
-        "@typescript-eslint/utils": "7.16.0",
-        "@typescript-eslint/visitor-keys": "7.16.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.3.1",
-        "natural-compare": "^1.4.0",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^7.0.0",
-        "eslint": "^8.56.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@typescript-eslint/parser": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.16.0.tgz",
@@ -2338,34 +2000,6 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.16.0.tgz",
-      "integrity": "sha512-j0fuUswUjDHfqV/UdW6mLtOQQseORqfdmoBNDFOqs9rvNVR2e+cmu6zJu/Ku4SDuqiJko6YnhwcL8x45r8Oqxg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.16.0",
-        "@typescript-eslint/utils": "7.16.0",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@typescript-eslint/types": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.16.0.tgz",
@@ -2407,29 +2041,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.16.0.tgz",
-      "integrity": "sha512-PqP4kP3hb4r7Jav+NiRCntlVzhxBNWq6ZQ+zQwII1y/G/1gdIPeYDCKr2+dH6049yJQsWZiHU6RlwvIFBXXGNA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.16.0",
-        "@typescript-eslint/types": "7.16.0",
-        "@typescript-eslint/typescript-estree": "7.16.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || >=20.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      }
-    },
     "node_modules/@typescript-eslint/visitor-keys": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.16.0.tgz",
@@ -2795,16 +2406,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/asn1": {
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
@@ -2942,13 +2543,6 @@
         "tweetnacl": "^0.14.3"
       }
     },
-    "node_modules/before-after-hook": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-3.0.2.tgz",
-      "integrity": "sha512-Nik3Sc0ncrMK4UUdXQmAnRtzmNQTAAXmXIopizwZ1W1t8QmfJj+zL4OA2I7XPTPW5z5TDqv4hRo/JzouDJnX3A==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -2994,13 +2588,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/browser-stdout": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
-      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/browserslist": {
       "version": "4.23.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
@@ -3108,51 +2695,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/camelcase-keys": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz",
-      "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "camelcase": "^6.3.0",
-        "map-obj": "^4.1.0",
-        "quick-lru": "^5.1.1",
-        "type-fest": "^1.2.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/camelcase-keys/node_modules/type-fest": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
-      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001642",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz",
@@ -3310,18 +2852,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/cliui": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^7.0.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -3758,56 +3288,6 @@
         }
       }
     },
-    "node_modules/decamelize": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz",
-      "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/decamelize-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz",
-      "integrity": "sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "decamelize": "^1.1.0",
-        "map-obj": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/decamelize-keys/node_modules/decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/decamelize-keys/node_modules/map-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -5195,16 +4675,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/flat": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
-      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "flat": "cli.js"
-      }
-    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -5549,27 +5019,6 @@
         "node": "*"
       }
     },
-    "node_modules/glob": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
-      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^5.0.1",
-        "once": "^1.3.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -5582,19 +5031,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/global-dirs": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
@@ -5729,16 +5165,6 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
-    "node_modules/hard-rejection": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
-      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -5820,49 +5246,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "he": "bin/he"
-      }
-    },
-    "node_modules/hosted-git-info": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
-      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/hosted-git-info/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/hosted-git-info/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/html-tags": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
@@ -5944,19 +5327,9 @@
       },
       "engines": {
         "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/import-lazy": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
-      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/imurmurhash": {
@@ -6324,16 +5697,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-plain-obj": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
-      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-plain-object": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
@@ -7065,19 +6428,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/map-obj": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
-      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -7164,16 +6514,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/min-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -7198,126 +6538,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/minimist-options": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "arrify": "^1.0.1",
-        "is-plain-obj": "^1.1.0",
-        "kind-of": "^6.0.3"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/minimist-options/node_modules/is-plain-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/mocha": {
-      "version": "10.6.0",
-      "resolved": "https://registry.npmjs.org/mocha/-/mocha-10.6.0.tgz",
-      "integrity": "sha512-hxjt4+EEB0SA0ZDygSS015t65lJw/I2yRCS3Ae+SJ5FrbzrXgfYwJr96f0OvIXdj7h4lv/vLCrH3rkiuizFSvw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "ansi-colors": "^4.1.3",
-        "browser-stdout": "^1.3.1",
-        "chokidar": "^3.5.3",
-        "debug": "^4.3.5",
-        "diff": "^5.2.0",
-        "escape-string-regexp": "^4.0.0",
-        "find-up": "^5.0.0",
-        "glob": "^8.1.0",
-        "he": "^1.2.0",
-        "js-yaml": "^4.1.0",
-        "log-symbols": "^4.1.0",
-        "minimatch": "^5.1.6",
-        "ms": "^2.1.3",
-        "serialize-javascript": "^6.0.2",
-        "strip-json-comments": "^3.1.1",
-        "supports-color": "^8.1.1",
-        "workerpool": "^6.5.1",
-        "yargs": "^16.2.0",
-        "yargs-parser": "^20.2.9",
-        "yargs-unparser": "^2.0.0"
-      },
-      "bin": {
-        "_mocha": "bin/_mocha",
-        "mocha": "bin/mocha.js"
-      },
-      "engines": {
-        "node": ">= 14.0.0"
-      }
-    },
-    "node_modules/mocha/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/mocha/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/mocha/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/mocha/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/mocha/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
     "node_modules/mochawesome": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/mochawesome/-/mochawesome-7.1.3.tgz",
@@ -7893,22 +7113,6 @@
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
       "dev": true
     },
-    "node_modules/normalize-package-data": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
-      "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "hosted-git-info": "^4.0.1",
-        "is-core-module": "^2.5.0",
-        "semver": "^7.3.4",
-        "validate-npm-package-license": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -8545,9 +7749,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz",
+      "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -8674,29 +7878,6 @@
         }
       ]
     },
-    "node_modules/quick-lru": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/randombytes": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "safe-buffer": "^5.1.0"
-      }
-    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -8749,69 +7930,6 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/read-pkg": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz",
-      "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/normalize-package-data": "^2.4.0",
-        "normalize-package-data": "^3.0.2",
-        "parse-json": "^5.2.0",
-        "type-fest": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/read-pkg-up": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz",
-      "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "find-up": "^5.0.0",
-        "read-pkg": "^6.0.0",
-        "type-fest": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/type-fest": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
-      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/read-pkg/node_modules/type-fest": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
-      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -8824,36 +7942,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/redent": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz",
-      "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "indent-string": "^5.0.0",
-        "strip-indent": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/redent/node_modules/indent-string": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
-      "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -9216,16 +8304,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/serialize-javascript": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
-      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "randombytes": "^2.1.0"
-      }
-    },
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -9423,42 +8501,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/spdx-correct": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
-      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "spdx-expression-parse": "^3.0.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "node_modules/spdx-exceptions": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
-      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/spdx-expression-parse": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "node_modules/spdx-license-ids": {
-      "version": "3.0.18",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.18.tgz",
-      "integrity": "sha512-xxRs31BqRYHwiMzudOrpSiHtZ8i/GeionCBDSilhYRj+9gIcI8wCZTlXZKu9vZIVqViP3dcp9qE5G6AlIaD+TQ==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/sshpk": {
       "version": "1.18.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
@@ -9650,22 +8692,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/strip-indent": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz",
-      "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "min-indent": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -9690,13 +8716,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/style-search": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
-      "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/stylelint": {
       "version": "16.7.0",
       "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.7.0.tgz",
@@ -10100,19 +9119,6 @@
         "tree-kill": "cli.js"
       }
     },
-    "node_modules/trim-newlines": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz",
-      "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/trim-repeated": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
@@ -10325,13 +9331,6 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
-    "node_modules/universal-user-agent": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.2.tgz",
-      "integrity": "sha512-0JCqzSKnStlRRQfCdowvqy3cy0Dvtlb8xecj/H8JFZuCze4rwjPZQOgvFvn0Ws/usCHQFGpyr+pB9adaGwXn4Q==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -10414,17 +9413,6 @@
         "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/validate-npm-package-license": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "spdx-correct": "^3.0.0",
-        "spdx-expression-parse": "^3.0.0"
-      }
-    },
     "node_modules/validator": {
       "version": "13.12.0",
       "resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz",
@@ -10761,13 +9749,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/workerpool": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-6.5.1.tgz",
-      "integrity": "sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -10864,51 +9845,6 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
-    "node_modules/yargs": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "cliui": "^7.0.2",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.0",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^20.2.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/yargs-parser": {
-      "version": "20.2.9",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/yargs-unparser": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz",
-      "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "camelcase": "^6.0.0",
-        "decamelize": "^4.0.0",
-        "flat": "^5.0.2",
-        "is-plain-obj": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
diff --git a/package.json b/package.json
index b6062525ab..6ebf3d681d 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",
@@ -38,7 +38,7 @@
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.3.0",
     "mochawesome-report-generator": "^6.2.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.8.3",
     "sass": "^1.77.8",
     "stylelint": "^16.7.0",
     "typescript": "^5.2.2",
diff --git a/src/App.tsx b/src/App.tsx
index 81e011f432..431a61eabd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,321 @@
-/* eslint-disable max-len */
+/* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { UserWarning } from './UserWarning';
-
-const USER_ID = 0;
+import { USER_ID } from './api/todos';
+import {
+  getTodos,
+  addTodo as addTodoApi,
+  deleteTodo as deleteTodoApi,
+  changeCompletedStatus,
+  updateTodo as updateTodoApi,
+} from './api/todos';
+import { Todo } from './types/Todo';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { TodoList } from './components/TodoList';
+import { ErrorNotification } from './components/ErrorNotification';
+import { Filter } from './types/Filter';
+import { ErrorMessage } from './types/ErrorMassage';
 
 export const App: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const completedTodosNumber = todos.filter(todo => !todo.completed).length;
+  const [selectedFilter, setSelectedFilter] = useState<Filter>(Filter.All);
+  const [filteredTodos, setFilteredTodos] = useState<Todo[]>(todos);
+  const [errorMessage, setErrorMessage] = useState<ErrorMessage>(
+    ErrorMessage.Empty,
+  );
+  const [isAnyCompleted, setIsAnyCompleted] = useState(false);
+  const [deleteTodoId, setDeleteTodoId] = useState<number | null>(null);
+  const [changeStatusTodoId, setChangeStatusTodoId] = useState<number | null>(
+    null,
+  );
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [istoggleAll, setIsToggleAll] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [tempTitle, setTempTitle] = useState('');
+  const [tempTodo, setTempTodo] = useState<Todo | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const closeError = () => {
+    setErrorMessage(ErrorMessage.Empty);
+  };
+  const fetchTodos = async () => {
+    setErrorMessage(ErrorMessage.Empty);
+    try {
+      const data: Todo[] = await getTodos();
+      setTodos(data);
+    } catch (error) {
+      setErrorMessage(ErrorMessage.LoadError);
+      setTimeout(() => {
+        setErrorMessage(ErrorMessage.Empty);
+      }, 3000);
+    }
+  };
+  const selectNewFilter = (newFilter: Filter) => {
+    setSelectedFilter(newFilter);
+    switch (newFilter) {
+      case Filter.All:
+        setFilteredTodos(todos);
+        break;
+      case Filter.Active:
+        setFilteredTodos(todos.filter(todo => !todo.completed));
+        break;
+      case Filter.Completed:
+        setFilteredTodos(todos.filter(todo => todo.completed));
+        break;
+      default:
+        setFilteredTodos(todos);
+    }
+  };
+  useEffect(() => {
+    fetchTodos();
+  }, []);
+  useEffect(() => {
+    if (!loading && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [loading, todos]);
+  const findCompletedTodos = () => {
+    setIsAnyCompleted(todos.some(todo => todo.completed));
+  };
+  useEffect(() => {
+    selectNewFilter(selectedFilter);
+    findCompletedTodos();
+  }, [todos]);
+  useEffect(() => {
+    setIsToggleAll(todos.length > 0 && todos.every(todo => todo.completed));
+  }, [todos]);
   if (!USER_ID) {
     return <UserWarning />;
   }
+  const handleAddTodo = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    const value = inputRef.current?.value.trim();
+
+    if (!value) {
+      setErrorMessage(ErrorMessage.TitleError);
+      setTimeout(() => setErrorMessage(ErrorMessage.Empty), 3000);
+      return;
+    }
+
+    const temp: Todo = {
+      id: 0,
+      userId: USER_ID,
+      title: value,
+      completed: false,
+    };
+
+    setTempTodo(temp);
+    setLoading(true);
+
+    try {
+      const created = await addTodoApi(temp);
+
+      setTodos(prev => [...prev, created]);
+
+      if (inputRef.current) {
+        inputRef.current.value = '';
+      }
+    } catch {
+      setErrorMessage(ErrorMessage.AddError);
+      setTimeout(() => setErrorMessage(ErrorMessage.Empty), 3000);
+    } finally {
+      setTempTodo(null);
+      setLoading(false);
+    }
+  };
+  const deleteTodo = async (id: number) => {
+    setDeleteTodoId(id);
+    try {
+      await deleteTodoApi(id);
+
+      setTodos(prev => prev.filter(todo => todo.id !== id));
+      setEditingId(null);
+    } catch (error) {
+      setErrorMessage(ErrorMessage.DeleteError);
+      setTimeout(() => {
+        setErrorMessage(ErrorMessage.Empty);
+      }, 3000);
+
+      return null;
+    } finally {
+      setDeleteTodoId(null);
+    }
+  };
+  const statusTodo = async (id: number, completed: boolean) => {
+    setChangeStatusTodoId(id);
+    try {
+      await changeCompletedStatus(id, completed);
+      setTodos(prev =>
+        prev.map(todo => (todo.id === id ? { ...todo, completed } : todo)),
+      );
+    } catch (error) {
+      setErrorMessage(ErrorMessage.UpdateError);
+      setTimeout(() => {
+        setErrorMessage(ErrorMessage.Empty);
+      }, 3000);
+    } finally {
+      setChangeStatusTodoId(null);
+    }
+  };
+  const handleUncheckAll = async () => {
+    if (!istoggleAll) return;
+    setTodos(prev =>
+      prev.map(todo => ({
+        ...todo,
+        completed: false,
+      })),
+    );
+
+    try {
+      await Promise.all(
+        todos.map(todo => changeCompletedStatus(todo.id, false)),
+      );
+    } catch (error) {
+      setErrorMessage(ErrorMessage.UpdateError);
+      setTimeout(() => setErrorMessage(ErrorMessage.Empty), 3000);
+    }
+  };
+  const handleCheckToNotToggle = async () => {
+    if (istoggleAll) return;
+    setTodos(prev =>
+      prev.map(todo => ({
+        ...todo,
+        completed: true,
+      })),
+    );
+
+    try {
+      await Promise.all(
+        todos.map(todo =>
+          todo.completed
+            ? Promise.resolve()
+            : changeCompletedStatus(todo.id, true),
+        ),
+      );
+    } catch (error) {
+      setErrorMessage(ErrorMessage.UpdateError);
+      setTimeout(() => setErrorMessage(ErrorMessage.Empty), 3000);
+    }
+  };
+
+  const deleteCompleted = async () => {
+    await Promise.all(
+      todos.filter(todo => todo.completed).map(todo => deleteTodo(todo.id)),
+    );
+  };
+  const handleDoubleClick = (todo: Todo) => {
+    setEditingId(todo.id);
+    setTempTitle(todo.title);
+  };
+  const handleSubmit = async (id: number) => {
+    if (isSubmitting) return; // ✅ prevent double call
 
+    const todo = todos.find(t => t.id === id);
+    if (!todo) return;
+
+    const trimmed = tempTitle.trim();
+
+    setIsSubmitting(true);
+
+    try {
+      // same title → cancel
+      if (trimmed === todo.title) {
+        setEditingId(null);
+        return;
+      }
+
+      // empty → delete
+      if (!trimmed) {
+        setDeleteTodoId(id);
+
+        await deleteTodoApi(id);
+        setTodos(prev => prev.filter(t => t.id !== id));
+
+        setEditingId(null);
+        return;
+      }
+
+      // update
+      setChangeStatusTodoId(id);
+
+      const updated = await updateTodoApi(id, trimmed);
+
+      setTodos(prev =>
+        prev.map(t => (t.id === id ? { ...t, title: updated.title } : t)),
+      );
+
+      setEditingId(null);
+    } catch {
+      setErrorMessage(
+        trimmed ? ErrorMessage.UpdateError : ErrorMessage.DeleteError,
+      );
+      setTimeout(() => setErrorMessage(ErrorMessage.Empty), 3000);
+    } finally {
+      setIsSubmitting(false);
+      setChangeStatusTodoId(null);
+      setDeleteTodoId(null);
+    }
+  };
+  const handleKeyDown = (e: React.KeyboardEvent, id: number) => {
+    if (e.key === 'Enter') {
+      handleSubmit(id);
+    }
+  };
+
+  const handleKeyUp = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setEditingId(null);
+    }
+  };
   return (
-    <section className="section container">
-      <p className="title is-4">
-        Copy all you need from the prev task:
-        <br />
-        <a href="https://github.com/mate-academy/react_todo-app-add-and-delete#react-todo-app-add-and-delete">
-          React Todo App - Add and Delete
-        </a>
-      </p>
-
-      <p className="subtitle">Styles are already copied</p>
-    </section>
+    <div className="todoapp">
+      <h1 className="todoapp__title">todos</h1>
+
+      <div className="todoapp__content">
+        <Header
+          hasTodos={todos.length > 0}
+          isToggleAll={istoggleAll}
+          loading={loading}
+          inputRef={inputRef}
+          onToggleAll={() =>
+            istoggleAll ? handleUncheckAll() : handleCheckToNotToggle()
+          }
+          onSubmit={handleAddTodo}
+        />
+
+        <TodoList
+          todos={filteredTodos}
+          editingId={editingId}
+          tempTitle={tempTitle}
+          deleteTodoId={deleteTodoId}
+          changeStatusTodoId={changeStatusTodoId}
+          tempTodo={tempTodo}
+          onToggle={statusTodo}
+          onDelete={deleteTodo}
+          onDoubleClick={handleDoubleClick}
+          onChangeTitle={setTempTitle}
+          onSubmit={handleSubmit}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+        />
+
+        {/* Hide the footer if there are no todos */}
+        {todos.length > 0 && (
+          <Footer
+            count={completedTodosNumber}
+            selectedFilter={selectedFilter}
+            isAnyCompleted={isAnyCompleted}
+            onFilterChange={selectNewFilter}
+            onClearCompleted={deleteCompleted}
+          />
+        )}
+      </div>
+
+      <ErrorNotification message={errorMessage} onClose={closeError} />
+    </div>
   );
 };
diff --git a/src/api/todos.ts b/src/api/todos.ts
new file mode 100644
index 0000000000..6e91765f46
--- /dev/null
+++ b/src/api/todos.ts
@@ -0,0 +1,21 @@
+import { Todo } from '../types/Todo';
+import { client } from '../utils/fetchClient';
+import { AddTodo } from '../types/Todo';
+
+export const USER_ID = 3517;
+
+export const getTodos = () => {
+  return client.get<Todo[]>(`/todos?userId=${USER_ID}`);
+};
+export const addTodo = (data: AddTodo) => {
+  return client.post<Todo>(`/todos`, data);
+};
+export const deleteTodo = (id: number) => {
+  return client.delete(`/todos/${id}`);
+};
+export const changeCompletedStatus = (id: number, completed: boolean) => {
+  return client.patch<Todo>(`/todos/${id}`, { completed });
+};
+export const updateTodo = (id: number, title: string) => {
+  return client.patch<Todo>(`/todos/${id}`, { title });
+};
diff --git a/src/components/ErrorNotification.tsx b/src/components/ErrorNotification.tsx
new file mode 100644
index 0000000000..55af966730
--- /dev/null
+++ b/src/components/ErrorNotification.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const ErrorNotification = ({ message, onClose }) => (
+  <div
+    data-cy="ErrorNotification"
+    className={classNames(
+      'notification is-danger is-light has-text-weight-normal',
+      { hidden: !message },
+    )}
+  >
+    <button data-cy="HideErrorButton" className="delete" onClick={onClose} />
+    {message}
+  </div>
+);
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000000..3053fd41fe
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Filter } from '../types/Filter';
+
+type Props = {
+  count: number;
+  selectedFilter: Filter;
+  isAnyCompleted: boolean;
+  onFilterChange: (filter: Filter) => void;
+  onClearCompleted: () => void;
+};
+const FILTERS = [
+  { value: Filter.All, label: 'All', href: '#/' },
+  { value: Filter.Active, label: 'Active', href: '#/active' },
+  { value: Filter.Completed, label: 'Completed', href: '#/completed' },
+];
+export const Footer: React.FC<Props> = ({
+  count,
+  selectedFilter,
+  isAnyCompleted,
+  onFilterChange,
+  onClearCompleted,
+}) => (
+  <footer className="todoapp__footer" data-cy="Footer">
+    <span className="todo-count" data-cy="TodosCounter">
+      {count} items left
+    </span>
+
+    <nav className="filter" data-cy="Filter">
+      {FILTERS.map(({ value, label, href }) => (
+        <a
+          key={value}
+          href={href}
+          data-cy={`FilterLink${label}`}
+          className={classNames('filter__link', {
+            selected: selectedFilter === value,
+          })}
+          onClick={() => onFilterChange(value)}
+        >
+          {label}
+        </a>
+      ))}
+    </nav>
+
+    <button
+      type="button"
+      className="todoapp__clear-completed"
+      data-cy="ClearCompletedButton"
+      onClick={onClearCompleted}
+      disabled={!isAnyCompleted}
+    >
+      Clear completed
+    </button>
+  </footer>
+);
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000000..2b44a8cb59
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+  hasTodos: boolean;
+  isToggleAll: boolean;
+  loading: boolean;
+  inputRef: React.RefObject<HTMLInputElement>;
+  onToggleAll: () => void;
+  onSubmit: (e: React.FormEvent) => void;
+};
+
+export const Header: React.FC<Props> = ({
+  hasTodos,
+  isToggleAll,
+  loading,
+  inputRef,
+  onToggleAll,
+  onSubmit,
+}) => (
+  <header className="todoapp__header">
+    {hasTodos && (
+      <button
+        type="button"
+        className={classNames('todoapp__toggle-all', {
+          active: isToggleAll,
+        })}
+        data-cy="ToggleAllButton"
+        onClick={onToggleAll}
+      />
+    )}
+
+    <form onSubmit={onSubmit}>
+      <input
+        data-cy="NewTodoField"
+        type="text"
+        ref={inputRef}
+        disabled={loading}
+        className="todoapp__new-todo"
+        placeholder="What needs to be done?"
+      />
+    </form>
+  </header>
+);
diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
new file mode 100644
index 0000000000..e5cb0fcdfc
--- /dev/null
+++ b/src/components/TodoItem.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Todo } from '../types/Todo';
+/* eslint-disable jsx-a11y/label-has-associated-control */
+type Props = {
+  todo: Todo;
+  isEditing: boolean;
+  tempTitle: string;
+  deleteTodoId: number | null;
+  changeStatusTodoId: number | null;
+
+  onToggle: (id: number, completed: boolean) => void;
+  onDelete: (id: number) => void;
+  onDoubleClick: (todo: Todo) => void;
+  onChangeTitle: (value: string) => void;
+  onSubmit: (id: number) => void;
+  onKeyDown: (e: React.KeyboardEvent, id: number) => void;
+  onKeyUp: (e: React.KeyboardEvent) => void;
+};
+
+export const TodoItem: React.FC<Props> = ({
+  todo,
+  isEditing,
+  tempTitle,
+  deleteTodoId,
+  changeStatusTodoId,
+  onToggle,
+  onDelete,
+  onDoubleClick,
+  onChangeTitle,
+  onSubmit,
+  onKeyDown,
+  onKeyUp,
+}) => (
+  <div
+    data-cy="Todo"
+    className={classNames('todo', { completed: todo.completed })}
+  >
+    <label htmlFor={`todo-${todo.id}`} className="todo__status-label">
+      <input
+        id={`todo-${todo.id}`}
+        data-cy="TodoStatus"
+        type="checkbox"
+        className="todo__status"
+        checked={todo.completed}
+        onChange={() => onToggle(todo.id, !todo.completed)}
+      />
+    </label>
+
+    {isEditing ? (
+      <input
+        data-cy="TodoTitleField"
+        className="todo__title"
+        value={tempTitle}
+        onChange={e => onChangeTitle(e.target.value)}
+        onBlur={() => onSubmit(todo.id)}
+        onKeyDown={e => onKeyDown(e, todo.id)}
+        onKeyUp={onKeyUp}
+        autoFocus
+      />
+    ) : (
+      <>
+        <span
+          data-cy="TodoTitle"
+          className="todo__title"
+          onDoubleClick={() => onDoubleClick(todo)}
+        >
+          {todo.title}
+        </span>
+
+        <button
+          type="button"
+          className="todo__remove"
+          data-cy="TodoDelete"
+          onClick={() => onDelete(todo.id)}
+        >
+          ×
+        </button>
+      </>
+    )}
+
+    <div
+      data-cy="TodoLoader"
+      className={classNames('modal overlay', {
+        'is-active': todo.id === deleteTodoId || todo.id === changeStatusTodoId,
+      })}
+    >
+      <div className="modal-background has-background-white-ter" />
+      <div className="loader" />
+    </div>
+  </div>
+);
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
new file mode 100644
index 0000000000..f7eb024c60
--- /dev/null
+++ b/src/components/TodoList.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Todo } from '../types/Todo';
+import { TodoItem } from './TodoItem';
+
+type Props = {
+  todos: Todo[];
+  editingId: number | null;
+  tempTitle: string;
+  deleteTodoId: number | null;
+  changeStatusTodoId: number | null;
+  tempTodo: Todo | null;
+
+  onToggle: (id: number, completed: boolean) => void;
+  onDelete: (id: number) => void;
+  onDoubleClick: (todo: Todo) => void;
+  onChangeTitle: (value: string) => void;
+  onSubmit: (id: number) => void;
+  onKeyDown: (e: React.KeyboardEvent, id: number) => void;
+  onKeyUp: (e: React.KeyboardEvent) => void;
+};
+
+export const TodoList: React.FC<Props> = ({
+  todos,
+  editingId,
+  tempTitle,
+  deleteTodoId,
+  changeStatusTodoId,
+  tempTodo,
+  ...handlers
+}) => (
+  <section className="todoapp__main" data-cy="TodoList">
+    {todos.map(todo => (
+      <TodoItem
+        key={todo.id}
+        todo={todo}
+        isEditing={editingId === todo.id}
+        tempTitle={tempTitle}
+        deleteTodoId={deleteTodoId}
+        changeStatusTodoId={changeStatusTodoId}
+        {...handlers}
+      />
+    ))}
+
+    {tempTodo && (
+      <div data-cy="Todo" className="todo">
+        <span data-cy="TodoTitle">{tempTodo.title}</span>
+        <div data-cy="TodoLoader" className="modal overlay is-active">
+          <div className="loader" />
+        </div>
+      </div>
+    )}
+  </section>
+);
diff --git a/src/types/ErrorMassage.ts b/src/types/ErrorMassage.ts
new file mode 100644
index 0000000000..724c970d67
--- /dev/null
+++ b/src/types/ErrorMassage.ts
@@ -0,0 +1,8 @@
+export enum ErrorMessage {
+  Empty = '',
+  LoadError = 'Unable to load todos',
+  TitleError = 'Title should not be empty',
+  AddError = 'Unable to add a todo',
+  DeleteError = 'Unable to delete a todo',
+  UpdateError = 'Unable to update a todo',
+}
diff --git a/src/types/Filter.ts b/src/types/Filter.ts
new file mode 100644
index 0000000000..174408fd69
--- /dev/null
+++ b/src/types/Filter.ts
@@ -0,0 +1,5 @@
+export enum Filter {
+  All = 'all',
+  Active = 'active',
+  Completed = 'completed',
+}
diff --git a/src/types/Todo.ts b/src/types/Todo.ts
new file mode 100644
index 0000000000..d4c72b3f49
--- /dev/null
+++ b/src/types/Todo.ts
@@ -0,0 +1,11 @@
+export interface Todo {
+  id: number;
+  userId: number;
+  title: string;
+  completed: boolean;
+}
+export interface AddTodo {
+  userId: number;
+  title: string;
+  completed: boolean;
+}
diff --git a/src/utils/fetchClient.ts b/src/utils/fetchClient.ts
new file mode 100644
index 0000000000..708ac4c17b
--- /dev/null
+++ b/src/utils/fetchClient.ts
@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const BASE_URL = 'https://mate.academy/students-api';
+
+// returns a promise resolved after a given delay
+function wait(delay: number) {
+  return new Promise(resolve => {
+    setTimeout(resolve, delay);
+  });
+}
+
+// To have autocompletion and avoid mistypes
+type RequestMethod = 'GET' | 'POST' | 'PATCH' | 'DELETE';
+
+function request<T>(
+  url: string,
+  method: RequestMethod = 'GET',
+  data: any = null, // we can send any data to the server
+): Promise<T> {
+  const options: RequestInit = { method };
+
+  if (data) {
+    // We add body and Content-Type only for the requests with data
+    options.body = JSON.stringify(data);
+    options.headers = {
+      'Content-Type': 'application/json; charset=UTF-8',
+    };
+  }
+
+  // DON'T change the delay it is required for tests
+  return wait(100)
+    .then(() => fetch(BASE_URL + url, options))
+    .then(response => {
+      if (!response.ok) {
+        throw new Error();
+      }
+
+      return response.json();
+    });
+}
+
+export const client = {
+  get: <T>(url: string) => request<T>(url),
+  post: <T>(url: string, data: any) => request<T>(url, 'POST', data),
+  patch: <T>(url: string, data: any) => request<T>(url, 'PATCH', data),
+  delete: (url: string) => request(url, 'DELETE'),
+};