diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..f6527c24
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 83057fb2..65e01ccc 100644
--- a/README.md
+++ b/README.md
@@ -1,49 +1,29 @@
-# Vue Dynamic List of Posts
-
-Implement the App with ability to show posts of a current logged-in user.
-The user should be able to create a new post with their userId. Each post can
-be opened in the sidebar with its comments, can be edited and deleted. There should delete a comment and a
-form to add new comments.
-
-> Here is [the working version](https://mate-academy.github.io/vue_dynamic-list-of-posts/#/)
-
-1. Learn the `.html` files to get all needed layouts;
-   - Bulma is required to have all styles
-1. Initially the `App` shows the `Posts table` and `Create new post` button
-
-   - show the `<Loader>` while waiting for the API response;
-   - show an error notification if `posts` loading fails;
-   - if the user has no posts show the `No posts yet` notification.
-
-1. Add the `Sidebar--open` class to the sidebar when user click on `Create new post`;
-
-   - the form for new post should be appear there immediately;
-   - add validation to the fields;
-   - when user click on `Create` component with post details and comments should be appear there immediately ;
-
-1. In the `Post preview` user should see `edit` and `delete` buttons;
-
-   - When user click on `Delete`, post should be deleted and sidebar close;
-   - When user click on `Edit` show edit post form;
-   - When user click on `Save` in edit mode - show post preview in the sidebar;
-
-1. Add the `Sidebar--open` class to the sidebar when a post is selected;
-   - the post details should appear there immediately;
-   - the post commnets should be loaded from the API;
-   - the `Loader` is shown before comments are loaded;
-   - `CommentsError` notification is show on loading error;
-   - `NoComments` message is shown if the post does not have comments yet;
-1. Show the `Write a comment` button below the comments
-   - after click hide the button and show the form to add new comment;
-   - the form stays visible until the other post is opened;
-   - the form should be implemented as a separate component;
-1. The form requires an author's name and email and a comment text.
-   - show errors only after the form is submitted;
-   - remove an error on the field change;
-   - keep the `name` and `email` after the successful submit but clear a comment text;
-   - The `Clear` button should also clear all errors;
-   - Add the `is-loading` class to the submit button while waiting for a response;
-   - Add the new comment received as a response from the `API` to the end of the list;
-1. Implement comment deletion
-   - Delete the commnet immediately not waiting for the server response to improve the UX.
-1. (\*) Handle `Add` and `Delete` errors so the user can retry
+# vue_dynamic-list-of-posts
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
diff --git a/addPost.html b/addPost.html
deleted file mode 100644
index aae44ad0..00000000
--- a/addPost.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div className="content">
-  <h2>title</h2>
-
-  <form>
-    <!-- inputs... -->
-
-    <div className="field is-grouped">
-      <div className="control">
-        <button type="submit" className="button is-link">Save</button>
-      </div>
-      <div className="control">
-        <button type="reset" className="button is-link is-light">Cancel</button>
-      </div>
-    </div>
-  </form>
-</div>
diff --git a/comment.html b/comment.html
deleted file mode 100644
index 45bcb92f..00000000
--- a/comment.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<article className="message is-small">
-  <div className="message-header">
-    <a href="{`mailto:${email}`}"> name </a>
-    <button type="button" className="delete is-small" aria-label="delete">
-      delete button
-    </button>
-  </div>
-  <div className="message-body">el body</div>
-</article>
diff --git a/header.html b/header.html
deleted file mode 100644
index 3c975f97..00000000
--- a/header.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<nav className="navbar" role="navigation" aria-label="main navigation">
-  <div className="navbar-item">
-    <h2 className="is-size-4">Vue List Of Posts</h2>
-  </div>
-  <div className="navbar-end">
-    <div className="navbar-item">
-      <div className="buttons">
-        <div className="mr-5 mb-2">
-          <p>User: {user.name}</p>
-        </div>
-
-        <a className="button is-light"> Logout </a>
-      </div>
-    </div>
-  </div>
-</nav>
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..fe9403a6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue Post List</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/inputField.html b/inputField.html
deleted file mode 100644
index 07e744b7..00000000
--- a/inputField.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div className="field" data-cy="NameField">
-  <label className="label" htmlFor="{`comment-author-name-${name}`}">
-    title
-  </label>
-  <div className="control has-icons-left has-icons-right">
-    <input
-      type="text"
-      name="{name}"
-      id="{`comment-author-name-${name}`}"
-      placeholder="{placeholder}"
-      className="input is-danger"
-    />
-    <span className="icon is-small is-left">
-      <i className="fas fa-user"></i>
-    </span>
-
-    <span
-      className="icon is-small is-right has-text-danger"
-      data-cy="ErrorIcon"
-    >
-      <i className="fas fa-exclamation-triangle"></i>
-    </span>
-  </div>
-
-  <p className="help is-danger" data-cy="ErrorMessage">error text</p>
-</div>
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 00000000..5a1f2d22
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/loader/index.html b/loader/index.html
deleted file mode 100644
index ce046a2d..00000000
--- a/loader/index.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div className="lds-ring">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
diff --git a/login.html b/login.html
deleted file mode 100644
index e826e0a9..00000000
--- a/login.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<section className="container is-flex is-justify-content-center">
-  <form onSubmit="{handleSubmit}" className="box mt-5">
-    <h1 className="title is-3">You need to register"</h1>
-
-    <div className="field">
-      <label className="label" htmlFor="user-email"> Email </label>
-
-      <div className="control has-icons-left">
-        <input
-          type="email"
-          id="user-email"
-          name="email"
-          className="input"
-          placeholder="Enter your email"
-          required
-        />
-
-        <span className="icon is-small is-left">
-          <i className="fas fa-envelope" />
-        </span>
-      </div>
-
-      <p className="help is-danger">error message</p>
-    </div>
-
-    <div className="field">
-      <button type="submit" className="button is-primary">Login</button>
-    </div>
-  </form>
-</section>
diff --git a/needToRegister.html b/needToRegister.html
deleted file mode 100644
index 183d79ac..00000000
--- a/needToRegister.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div className="field">
-  <label className="label" htmlFor="user-name"> Your Name </label>
-
-  <div className="control has-icons-left">
-    <input
-      type="text"
-      id="user-name"
-      name="name"
-      className="input"
-      placeholder="Enter your name"
-      required
-      minlength="{4}"
-    />
-
-    <span className="icon is-small is-left">
-      <i className="fas fa-user" />
-    </span>
-  </div>
-
-  <p className="help is-danger">error message</p>
-</div>
diff --git a/noCommentsYet.html b/noCommentsYet.html
deleted file mode 100644
index b5d3a4cf..00000000
--- a/noCommentsYet.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div className="block">
-  <p className="title is-4">No comments yet</p>
-</div>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..93f9f453
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1692 @@
+{
+  "name": "vue_dynamic-list-of-posts",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "vue_dynamic-list-of-posts",
+      "version": "0.0.0",
+      "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.5.1",
+        "axios": "^1.7.7",
+        "bulma": "^0.9.4",
+        "vue": "^3.4.29"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^5.0.5",
+        "gh-pages": "^6.1.1",
+        "vite": "^5.3.1"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.25.6"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz",
+      "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz",
+      "integrity": "sha512-fSuPrt0ZO8uXeS+xP3b+yYTCBUd05MoSp2N/MFOgjhhUhMmchXlpTQrTpI8T+YAwAQuK7MafsCOxW7VrPMrJcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.2.tgz",
+      "integrity": "sha512-xGU5ZQmPlsjQS6tzTTGwMsnKUtu0WVbl0hYpTPauvbRAnmIvpInhJtgjj3mcuJpEiuUw4v1s4BimkdfDWlh7gA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.2.tgz",
+      "integrity": "sha512-99AhQ3/ZMxU7jw34Sq8brzXqWH/bMnf7ZVhvLk9QU2cOepbQSVTns6qoErJmSiAvU3InRqC2RRZ5ovh1KN0d0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.2.tgz",
+      "integrity": "sha512-ZbRaUvw2iN/y37x6dY50D8m2BnDbBjlnMPotDi/qITMJ4sIxNY33HArjikDyakhSv0+ybdUxhWxE6kTI4oX26w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.2.tgz",
+      "integrity": "sha512-ztRJJMiE8nnU1YFcdbd9BcH6bGWG1z+jP+IPW2oDUAPxPjo9dverIOyXz76m6IPA6udEL12reYeLojzW2cYL7w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.2.tgz",
+      "integrity": "sha512-flOcGHDZajGKYpLV0JNc0VFH361M7rnV1ee+NTeC/BQQ1/0pllYcFmxpagltANYt8FYf9+kL6RSk80Ziwyhr7w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.2.tgz",
+      "integrity": "sha512-69CF19Kp3TdMopyteO/LJbWufOzqqXzkrv4L2sP8kfMaAQ6iwky7NoXTp7bD6/irKgknDKM0P9E/1l5XxVQAhw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.2.tgz",
+      "integrity": "sha512-48pD/fJkTiHAZTnZwR0VzHrao70/4MlzJrq0ZsILjLW/Ab/1XlVUStYyGt7tdyIiVSlGZbnliqmult/QGA2O2w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.2.tgz",
+      "integrity": "sha512-cZdyuInj0ofc7mAQpKcPR2a2iu4YM4FQfuUzCVA2u4HI95lCwzjoPtdWjdpDKyHxI0UO82bLDoOaLfpZ/wviyQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.2.tgz",
+      "integrity": "sha512-RL56JMT6NwQ0lXIQmMIWr1SW28z4E4pOhRRNqwWZeXpRlykRIlEpSWdsgNWJbYBEWD84eocjSGDu/XxbYeCmwg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.2.tgz",
+      "integrity": "sha512-PMxkrWS9z38bCr3rWvDFVGD6sFeZJw4iQlhrup7ReGmfn7Oukrr/zweLhYX6v2/8J6Cep9IEA/SmjXjCmSbrMQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.2.tgz",
+      "integrity": "sha512-B90tYAUoLhU22olrafY3JQCFLnT3NglazdwkHyxNDYF/zAxJt5fJUB/yBoWFoIQ7SQj+KLe3iL4BhOMa9fzgpw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.2.tgz",
+      "integrity": "sha512-7twFizNXudESmC9oneLGIUmoHiiLppz/Xs5uJQ4ShvE6234K0VB1/aJYU3f/4g7PhssLGKBVCC37uRkkOi8wjg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.2.tgz",
+      "integrity": "sha512-9rRero0E7qTeYf6+rFh3AErTNU1VCQg2mn7CQcI44vNUWM9Ze7MSRS/9RFuSsox+vstRt97+x3sOhEey024FRQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.2.tgz",
+      "integrity": "sha512-5rA4vjlqgrpbFVVHX3qkrCo/fZTj1q0Xxpg+Z7yIo3J2AilW7t2+n6Q8Jrx+4MrYpAnjttTYF8rr7bP46BPzRw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.2.tgz",
+      "integrity": "sha512-6UUxd0+SKomjdzuAcp+HAmxw1FlGBnl1v2yEPSabtx4lBfdXHDVsW7+lQkgz9cNFJGY3AWR7+V8P5BqkD9L9nA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz",
+      "integrity": "sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.3.tgz",
+      "integrity": "sha512-adAfy9boPkP233NTyvLbGEqVuIfK/R0ZsBsIOW4BZNfb4BRpRW41Do1u+ozJpsb+mdoy80O20IzAsHaihRb5qA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.3",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.3.tgz",
+      "integrity": "sha512-wnzFArg9zpvk/811CDOZOadJRugf1Bgl/TQ3RfV4nKfSPok4hi0w10ziYUQR6LnnBAUlEXYLUfZ71Oj9ds/+QA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.3",
+        "@vue/shared": "3.5.3"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.3.tgz",
+      "integrity": "sha512-P3uATLny2tfyvMB04OQFe7Sczteno7SLFxwrOA/dw01pBWQHB5HL15a8PosoNX2aG/EAMGqnXTu+1LnmzFhpTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.3",
+        "@vue/compiler-dom": "3.5.3",
+        "@vue/compiler-ssr": "3.5.3",
+        "@vue/shared": "3.5.3",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.44",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.3.tgz",
+      "integrity": "sha512-F/5f+r2WzL/2YAPl7UlKcJWHrvoZN8XwEBLnT7S4BXwncH25iDOabhO2M2DWioyTguJAGavDOawejkFXj8EM1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.3",
+        "@vue/shared": "3.5.3"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.3.tgz",
+      "integrity": "sha512-2w61UnRWTP7+rj1H/j6FH706gRBHdFVpIqEkSDAyIpafBXYH8xt4gttstbbCWdU3OlcSWO8/3mbKl/93/HSMpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.3"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.3.tgz",
+      "integrity": "sha512-5b2AQw5OZlmCzSsSBWYoZOsy75N4UdMWenTfDdI5bAzXnuVR7iR8Q4AOzQm2OGoA41xjk53VQKrqQhOz2ktWaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.3",
+        "@vue/shared": "3.5.3"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.3.tgz",
+      "integrity": "sha512-wPR1DEGc3XnQ7yHbmkTt3GoY0cEnVGQnARRdAkDzZ8MbUKEs26gogCQo6AOvvgahfjIcnvWJzkZArQ1fmWjcSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.3",
+        "@vue/runtime-core": "3.5.3",
+        "@vue/shared": "3.5.3",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.3.tgz",
+      "integrity": "sha512-28volmaZVG2PGO3V3+gBPKoSHvLlE8FGfG/GKXKkjjfxLuj/50B/0OQGakM/g6ehQeqCrZYM4eHC4Ks48eig1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.3",
+        "@vue/shared": "3.5.3"
+      },
+      "peerDependencies": {
+        "vue": "3.5.3"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.3.tgz",
+      "integrity": "sha512-Jp2v8nylKBT+PlOUjun2Wp/f++TfJVFjshLzNtJDdmFJabJa7noGMncqXRM1vXGX+Yo2V7WykQFNxusSim8SCA==",
+      "license": "MIT"
+    },
+    "node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/bulma": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/email-addresses": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
+      "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gh-pages": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.1.1.tgz",
+      "integrity": "sha512-upnohfjBwN5hBP9w2dPE7HO5JJTHzSGMV1JrLrHvNuqmjoYHg6TBrCcnEoorjG/e0ejbuvnwyKMdTyM40PEByw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async": "^3.2.4",
+        "commander": "^11.0.0",
+        "email-addresses": "^5.0.0",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^11.1.1",
+        "globby": "^6.1.0"
+      },
+      "bin": {
+        "gh-pages": "bin/gh-pages.js",
+        "gh-pages-clean": "bin/gh-pages-clean.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
+      "license": "ISC"
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pinkie": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.45",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/rollup": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.2.tgz",
+      "integrity": "sha512-e3TapAgYf9xjdLvKQCkQTnbTKd4a6jwlpQSJJFokHGaX2IVjoEqkIIhiQfqsi0cdwlOD+tQGuOd5AJkc5RngBw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.21.2",
+        "@rollup/rollup-android-arm64": "4.21.2",
+        "@rollup/rollup-darwin-arm64": "4.21.2",
+        "@rollup/rollup-darwin-x64": "4.21.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.21.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.21.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.21.2",
+        "@rollup/rollup-linux-arm64-musl": "4.21.2",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.21.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.21.2",
+        "@rollup/rollup-linux-x64-gnu": "4.21.2",
+        "@rollup/rollup-linux-x64-musl": "4.21.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.21.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.21.2",
+        "@rollup/rollup-win32-x64-msvc": "4.21.2",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
+      "integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.3.tgz",
+      "integrity": "sha512-xvRbd0HpuLovYbOHXRHlSBsSvmUJbo0pzbkKTApWnQGf3/cu5Z39mQeA5cZdLRVIoNf3zI6MSoOgHUT5i2jO+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.3",
+        "@vue/compiler-sfc": "3.5.3",
+        "@vue/runtime-dom": "3.5.3",
+        "@vue/server-renderer": "3.5.3",
+        "@vue/shared": "3.5.3"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..f7748836
--- /dev/null
+++ b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "vue_dynamic-list-of-posts",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "deploy": "gh-pages -d dist"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "axios": "^1.7.7",
+    "bulma": "^0.9.4",
+    "vue": "^3.4.29"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "gh-pages": "^6.1.1",
+    "vite": "^5.3.1"
+  }
+}
diff --git a/postLoader.html b/postLoader.html
deleted file mode 100644
index c69f744f..00000000
--- a/postLoader.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div className="is-flex is-justify-content-center is-align-items-center mt-2">
-  <!-- Loader component -->
-</div>
diff --git a/postPreview.html b/postPreview.html
deleted file mode 100644
index c3883fe3..00000000
--- a/postPreview.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<div className="block">
-  <div
-    className="is-flex is-justify-content-space-between is-align-items-center"
-  >
-    <h2>#post id: post title</h2>
-    <div className="is-flex">
-      <span className="icon is-small is-right is-clickable">
-        <i className="fas fa-pen-to-square"></i>
-      </span>
-      <span
-        className="icon is-small is-right has-text-danger is-clickable ml-3"
-      >
-        <i className="fas fa-trash"></i>
-      </span>
-    </div>
-  </div>
-  <p data-cy="PostBody">post body</p>
-</div>
diff --git a/postsList.html b/postsList.html
deleted file mode 100644
index 1183837d..00000000
--- a/postsList.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div className="tile is-parent">
-  <div className="tile is-child box is-success">
-    <div className="block">
-      <div className="block is-flex is-justify-content-space-between">
-        <p className="title">Posts</p>
-        <button type="button" className="button is-link">Add New Post</button>
-      </div>
-
-      <table className="table is-fullwidth is-striped is-hoverable is-narrow">
-        <thead>
-          <tr className="has-background-link-light">
-            <th>ID</th>
-            <th>Title</th>
-            <th className="has-text-right">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>id</td>
-            <td>title</td>
-            <td className="has-text-right is-vcentered">
-              <button type="button" className="button is-link">Open</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/sidebar/index.css b/sidebar/index.css
deleted file mode 100644
index 9b52de95..00000000
--- a/sidebar/index.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.Sidebar {
-  overflow: hidden;
-  opacity: 0;
-  transition-property: max-width, opacity;
-  transition-duration: 0.5s;
-  transition-timing-function: ease-in-out;
-
-  @media (min-width: 769px) {
-    max-width: 0;
-  }
-}
-
-.Sidebar--open {
-  opacity: 1;
-
-  @media (min-width: 769px) {
-    max-width: 50%;
-  }
-}
diff --git a/sidebar/index.html b/sidebar/index.html
deleted file mode 100644
index ea495682..00000000
--- a/sidebar/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div className="tile is-parent is-8-desktop Sidebar Sidebar--open">
-  <div className="tile is-child box is-success ">
-    <div className="tile is-child box is-success ">
-      <div className="content">
-        <!-- Content here -->
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/.DS_Store b/src/.DS_Store
new file mode 100644
index 00000000..8f904f32
Binary files /dev/null and b/src/.DS_Store differ
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 00000000..40ca0849
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,63 @@
+<script>
+import PostList from './components/PostList.vue';
+import Header from './components/Header.vue'
+import LoginPage from './components/LoginPage.vue';
+
+export default {
+  components: {
+    PostList,
+    Header,
+    LoginPage
+  },
+  data() {
+    return {
+      user: {},
+      isActiveLoginPage: true,
+    }
+  },
+  watch: {
+    user() {
+      console.log(this.user)
+    }
+  },
+  mounted() {
+    const savedUser = JSON.parse(localStorage.getItem('user'));
+
+    if (savedUser) {
+      this.user = savedUser;
+      this.isActiveLoginPage = false;
+    }
+  },
+  methods: {
+    addUser($event) {
+      this.user = { ...$event[0] };
+      this.isActiveLoginPage = false;
+    },
+    logout() {
+      localStorage.removeItem('user');
+      this.user = {};
+      this.isActiveLoginPage = true;
+    }
+  }
+}
+</script>
+
+<template>
+  <LoginPage v-if="isActiveLoginPage" 
+    @addUser="addUser" 
+  />
+
+  <template v-else>
+    <Header :user="user" @logout="logout" />
+
+    <main class="section">
+      <div class="container">
+        <div class="tile is-ancestor">
+          <PostList :userId="user.id" />
+        </div>
+      </div>
+    </main>
+  </template>
+</template>
+
+<style></style>
diff --git a/src/api/comments.js b/src/api/comments.js
new file mode 100644
index 00000000..849c6f46
--- /dev/null
+++ b/src/api/comments.js
@@ -0,0 +1,13 @@
+import { client } from "./httpClient";
+
+export const getComments = (postId) => {
+  return client.get(`/comments?postId=${postId}`);
+};
+
+export const addComment = (data) => {
+  return client.post("/comments", data);
+};
+
+export const deleteComment = (commentId) => {
+  return client.delete(`/comments/${commentId}`);
+};
diff --git a/src/api/httpClient.js b/src/api/httpClient.js
new file mode 100644
index 00000000..299f4c01
--- /dev/null
+++ b/src/api/httpClient.js
@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export const client = axios.create({
+  baseURL: "https://mate.academy/students-api",
+});
diff --git a/src/api/posts.js b/src/api/posts.js
new file mode 100644
index 00000000..3522d3da
--- /dev/null
+++ b/src/api/posts.js
@@ -0,0 +1,20 @@
+import { client } from "./httpClient";
+
+export const getPosts = () => {
+  return client.get(`/posts?userId=1416`);
+};
+
+export const addPost = (data) => {
+  return client.post("/posts", data);
+};
+
+export const deletePost = (postId) => {
+  return client.delete(`/posts/${postId}`);
+};
+
+export const updatePost = ({ postId, title, body }) => {
+  return client.patch(`/posts/${postId}`, {
+    title,
+    body,
+  });
+};
diff --git a/src/api/users.js b/src/api/users.js
new file mode 100644
index 00000000..bf205530
--- /dev/null
+++ b/src/api/users.js
@@ -0,0 +1,9 @@
+import { client } from "./httpClient";
+
+export const getUserByEmail = (email) => {
+  return client.get(`/users?email=${email}`);
+};
+
+export const addUser = ({ name, username, email, phone }) => {
+  return client.post("/users", { name, username, email, phone });
+};
diff --git a/src/components/AddCommentForm.vue b/src/components/AddCommentForm.vue
new file mode 100644
index 00000000..ece06479
--- /dev/null
+++ b/src/components/AddCommentForm.vue
@@ -0,0 +1,132 @@
+<script>
+import { addComment } from '@/api/comments';
+import InputField from './InputField.vue';
+import TextAreaField from './TextAreaField.vue';
+
+export default {
+  name: 'AddCommentForm',
+  components: {
+    InputField,
+    TextAreaField,
+  },
+  props: {
+    postId: Number,
+  },
+  data() {
+    return {
+      inputName: '',
+      inputNameError: '',
+      inputEmail: '',
+      inputEmailError: '',
+      body: '',
+      bodyError: '',
+      isLoadingSubmit: false,
+      userName: '',
+    }
+  },
+  emits: ['closeCommentForm', 'addComment'],
+  watch: {
+    inputName() {
+      this.inputNameError = '';
+    },
+    inputEmail() {
+      this.inputEmailError = '';
+    },
+    body() {
+      this.bodyError = '';
+    },
+  },
+  mounted() {
+    const currentUser = JSON.parse(localStorage.getItem('user'))
+
+    if (currentUser) {
+      this.userName = currentUser.name;
+    }
+  },
+  methods: {
+    handleSubmit() {
+      const postId = this.postId;
+      const name = this.inputName.trim();
+      const email = this.inputEmail.trim();
+      const body = this.body.trim();
+
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+      if (!name.length) {
+        this.inputNameError = "Name can't be empty"
+      }
+
+      if (name.length > 33) {
+        this.inputEmailError = "Max length of name is 33 symbols"
+      }
+
+      if (!emailRegex.test(email)) {
+        this.inputEmailError = "You must use correct email"
+      }
+
+      if (!body.length) {
+        this.bodyError = "Body can't be empty"
+      }
+
+      if (this.inputNameError.length || this.inputEmailError.length || this.bodyError.length) {
+        return;
+      }
+
+      this.isLoadingSubmit = true;
+      addComment({ postId, name, email, body })
+        .then(({ data }) => {
+          this.$emit('addComment', data);
+          this.body = '';
+        })
+        .catch((error) => {
+          throw new Error(error);
+        })
+        .finally(() => {
+          this.isLoadingSubmit = false
+        })
+    }
+  }
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit" novalidate>
+    <InputField 
+      v-model="inputName" 
+      :inputError="inputNameError" 
+      :inputName="'commentAuthor'" 
+      :userName="userName" 
+    />
+
+    <InputField 
+      v-model="inputEmail" 
+      :inputError="inputEmailError" 
+      :inputName="'commentEmail'" 
+      :userName="userName" 
+    />
+    
+    <TextAreaField 
+      v-model="body" 
+      :bodyError="bodyError" 
+      :bodyName="'commentBody'" 
+      :userName="userName" 
+    />
+
+    <div class="field is-grouped">
+      <div class="control">
+        <button 
+          type="submit" 
+          class="button is-link" 
+          :class="{ 'is-loading': isLoadingSubmit }"
+        >
+          Add comment
+      </button>
+      </div>
+      <div class="control" @click="$emit('closeCommentForm')">
+        <button type="reset" class="button is-link is-light">Cancel</button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<style></style>
\ No newline at end of file
diff --git a/src/components/Comments.vue b/src/components/Comments.vue
new file mode 100644
index 00000000..19396690
--- /dev/null
+++ b/src/components/Comments.vue
@@ -0,0 +1,108 @@
+  <script>
+  import { deleteComment, getComments } from '../api/comments';
+  import AddCommentForm from './AddCommentForm.vue';
+  import Loader from './Loader.vue';
+
+
+  export default {
+    name: 'Comments',
+    components: {
+      Loader,
+      AddCommentForm,
+    },
+    props: {
+      selectedPost: Object
+    },
+    data() {
+      return {
+        comments: [],
+        loading: false,
+        errorMessage: '',
+        isFormActive: false,
+      }
+    },
+    mounted() {
+      this.loading = true;
+      getComments(this.selectedPost.id)
+        .then(({ data }) => {
+          this.comments = data;
+        })
+        .catch(() => {
+          this.errorMessage = "Can't download comments"
+        })
+        .finally(() => {
+          this.loading = false;
+        })
+    },
+    watch: {
+      selectedPost(newVal, oldVal) {
+        if (newVal.id !== oldVal.id) {
+          this.isFormActive = false;
+          this.loading = true;
+          getComments(this.selectedPost.id)
+            .then(({ data }) => {
+              this.comments = data;
+            })
+            .catch(() => {
+              this.errorMessage = "Can't download comments"
+            })
+            .finally(() => {
+              this.loading = false;
+            })
+        }
+      }
+    },
+    methods: {
+      deleteComment(commentId) {
+        this.comments = this.comments.filter(com => com.id !== commentId)
+        deleteComment(commentId).then(() => {
+          this.comments = this.comments.filter(com => com.id !== commentId)
+        })
+      }
+    }
+  }
+</script>
+  
+<template>
+  <Loader v-if="loading" />
+
+  <div v-else-if="!loading && errorMessage" class="is-error is-danger notification">
+    {{ errorMessage }}
+  </div>
+
+  <template v-else>
+    <article v-for="comment of comments" :key="comment.id" class="message is-small">
+      <div class="message-header">
+        <a :href="`mailto:${comment.email}`">{{ comment.name }}</a>
+        <button 
+          type="button" 
+          class="delete is-small" 
+          aria-label="delete" 
+          @click="deleteComment(comment.id)" 
+        />
+      </div>
+      <div class="message-body">{{ comment.body }}</div>
+    </article>
+
+    <div v-if="!comments.length" class="block">
+      <p class="title is-4">No comments yet</p>
+    </div>
+  </template>
+
+  <button v-if="!isFormActive" 
+    type="button" 
+    class="button is-link" 
+    @click="this.isFormActive = true"
+  >
+    Write a comment
+  </button>
+
+  <AddCommentForm v-else 
+    :postId="selectedPost.id" 
+    @closeCommentForm="this.isFormActive = false"
+    @addComment="this.comments.push($event)" 
+  />
+</template>
+
+
+<style></style>
\ No newline at end of file
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 00000000..08aefb38
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,32 @@
+<script>
+export default {
+  name: 'Header',
+  props: {
+    user: Object,
+  },
+  emits: ['logout']
+}
+</script>
+
+<template>
+  <nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-item">
+      <h2 class="is-size-4">Vue List Of Posts</h2>
+    </div>
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="buttons">
+          <div class="mr-5 mb-2">
+            <p>User: {{ user.name }}</p>
+          </div>
+
+          <a class="button is-light" @click="this.$emit('logout')">
+             Logout 
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style></style>
\ No newline at end of file
diff --git a/src/components/InputField.vue b/src/components/InputField.vue
new file mode 100644
index 00000000..0808dae0
--- /dev/null
+++ b/src/components/InputField.vue
@@ -0,0 +1,92 @@
+<script>
+export default {
+  name: 'InputTitleField',
+  props: {
+    inputError: String,
+    inputName: String,
+    modelValue: String,
+    userName: String,
+  },
+  data() {
+    return {
+      inputLabel: '',
+      inputType: '',
+      inputPlaceholder: '',
+      inputIcon: '',
+      internalValue: this.modelValue,
+    }
+  },
+  emits: ['update:modelValue'],
+  watch: {
+    modelValue(newVal) {
+      this.internalValue = newVal;
+    },
+    internalValue(newVal) {
+      this.$emit('update:modelValue', newVal);
+    },
+  },
+  mounted() {
+    switch (this.inputName) {
+      case 'postTitle':
+        this.inputLabel = 'Title';
+        this.inputType = 'text';
+        this.inputPlaceholder = 'Post Title';
+        this.inputIcon = 'fa-user';
+        break;
+
+      case 'commentAuthor':
+        this.inputLabel = 'Author Name';
+        this.inputType = 'text';
+        this.inputPlaceholder = 'Name Surname';
+        this.inputIcon = 'fa-user';
+        break;
+
+      case 'commentEmail':
+        this.inputLabel = 'Author Email';
+        this.inputType = 'email';
+        this.inputPlaceholder = 'Your Email';
+        this.inputIcon = 'fa-envelope';
+        break;
+
+      default:
+        break;
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="field" data-cy="NameField">
+    <label class="label" :for="`comment-author-name-${userName}`">
+      {{ inputLabel }}
+    </label>
+
+    <div class="control has-icons-left has-icons-right">
+      <input 
+        v-model="internalValue" 
+        :type="inputType" 
+        :name="userName" 
+        :id="`comment-author-name-${userName}`"
+        :placeholder="inputPlaceholder" 
+        class="input" 
+        :class="{ 'is-danger': inputError.length }"
+      />
+      <span class="icon is-small is-left">
+        <i class="fas" :class="inputIcon"></i>
+      </span>
+
+      <span v-if="inputError.length" 
+        class="icon is-small is-right has-text-danger" 
+        data-cy="ErrorIcon"
+      >
+        <i class="fas fa-exclamation-triangle" />
+      </span>
+    </div>
+
+    <p v-if="inputError.length" class="help is-danger" data-cy="ErrorMessage">
+      {{ inputError }}
+    </p>
+  </div>
+</template>
+
+<style></style>
\ No newline at end of file
diff --git a/loader/index.css b/src/components/Loader.vue
similarity index 73%
rename from loader/index.css
rename to src/components/Loader.vue
index 29999f41..585db097 100644
--- a/loader/index.css
+++ b/src/components/Loader.vue
@@ -1,35 +1,58 @@
+<script>
+export default {
+  name: 'Loader'
+}
+</script>
+
+<template>
+  <div class="lds-ring">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</template>
+
+<style>
 .lds-ring {
-  display: inline-block;
+  display: block;
   position: relative;
   width: 80px;
   height: 80px;
+  margin: 0 auto;
 }
+
 .lds-ring div {
   box-sizing: border-box;
   display: block;
   position: absolute;
   width: 64px;
   height: 64px;
-  margin: 8px;
   border: 8px solid #c0c0c0;
   border-radius: 50%;
   animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   border-color: #c0c0c0 transparent transparent transparent;
 }
+
 .lds-ring div:nth-child(1) {
   animation-delay: -0.45s;
 }
+
 .lds-ring div:nth-child(2) {
   animation-delay: -0.3s;
 }
+
 .lds-ring div:nth-child(3) {
   animation-delay: -0.15s;
 }
+
 @keyframes lds-ring {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+</style>
\ No newline at end of file
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
new file mode 100644
index 00000000..c574b313
--- /dev/null
+++ b/src/components/LoginPage.vue
@@ -0,0 +1,103 @@
+<script>
+import { addUser, getUserByEmail } from '@/api/users';
+
+export default {
+  name: 'LoginPage',
+  data() {
+    return {
+      email: '',
+      name: '',
+      isNeedRegister: false,
+    }
+  },
+  emits: ['addUser'],
+  methods: {
+    handleLogin(email) {
+      getUserByEmail(email).then(({ data }) => {
+        if (!data.length) {
+          this.isNeedRegister = true;
+        } else {
+          console.log(data);
+          localStorage.setItem('user', JSON.stringify(data[0]))
+          this.$emit('addUser', data);
+        }
+      })
+    },
+    handleRegister() {
+      const name = this.name;
+      const email = this.email;
+      const username = this.username || null;
+      const phone = this.phone || null;
+
+      addUser({ name, username, email, phone })
+
+      this.handleLogin(email)
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="container is-flex is-justify-content-center">
+    <form 
+      @submit.prevent="isNeedRegister ? handleRegister() : handleLogin(email)" 
+      class="box mt-5"
+    >
+      <h1 class="title is-3">
+        {{ isNeedRegister ? 'You need to register' : 'Get your userId' }}
+      </h1>
+
+      <div class="field">
+        <label class="label" htmlFor="user-email"> Email </label>
+
+        <div class="control has-icons-left">
+          <input 
+            v-model="email" 
+            type="email" 
+            id="user-email" 
+            name="email" 
+            class="input" 
+            placeholder="Enter your email"
+            required 
+            :disabled="isNeedRegister" 
+          />
+
+          <span class="icon is-small is-left">
+            <i class="fas fa-envelope" />
+          </span>
+        </div>
+      </div>
+
+      <div v-if="isNeedRegister" class="field">
+        <label class="label" htmlFor="user-name"> Your Name </label>
+
+        <div class="control has-icons-left">
+          <input 
+            v-model="name" 
+            type="text" 
+            id="user-name" 
+            name="name" 
+            class="input" 
+            placeholder="Enter your name"
+            required 
+            minlength="{4}" 
+          />
+
+          <span class="icon is-small is-left">
+            <i class="fas fa-user" />
+          </span>
+        </div>
+      </div>
+
+      <div class="field">
+        <button type="submit" class="button is-primary">
+          {{ isNeedRegister ? 'Register' : 'Login' }}
+        </button>
+      </div>
+
+
+    </form>
+  </section>
+</template>
+
+<script></script>
\ No newline at end of file
diff --git a/src/components/PostDetails.vue b/src/components/PostDetails.vue
new file mode 100644
index 00000000..d7dfb1e1
--- /dev/null
+++ b/src/components/PostDetails.vue
@@ -0,0 +1,60 @@
+<script>
+import Comments from './Comments.vue';
+import PostForm from './PostForm.vue';
+
+export default {
+  name: 'PostDetails',
+  components: {
+    Comments,
+    PostForm,
+  },
+  props: {
+    selectedPost: Object,
+  },
+  data() {
+    return {
+      isEditingActive: false,
+    }
+  },
+  emits: ['deletePost', 'updatePost'],
+}
+</script>
+
+<template>
+  <template v-if="!isEditingActive">
+    <div class="block">
+      <div class="is-flex is-justify-content-space-between is-align-items-center">
+        <h2>#{{ selectedPost.id }}: {{ selectedPost.title }}</h2>
+
+        <div class="is-flex">
+          <span 
+            class="icon is-small is-right is-clickable" 
+            @click="this.isEditingActive = true"
+          >
+            <i class="fas fa-pen-to-square" />
+          </span>
+
+          <span 
+            class="icon is-small is-right has-text-danger is-clickable ml-3"
+            @click="this.$emit('deletePost', selectedPost.id)"
+          >
+            <i class="fas fa-trash"></i>
+          </span>
+        </div>
+      </div>
+      <p data-cy="PostBody">{{ selectedPost.body }}</p>
+    </div>
+
+    <Comments :selectedPost="selectedPost" />
+  </template>
+
+  <PostForm v-else 
+    :formName="'editPost'" 
+    :selectedPost="selectedPost" 
+    @updatePost="this.$emit('updatePost', $event)"
+    @closeEditing="this.isEditingActive = false" 
+  />
+</template>
+
+
+<style></style>
\ No newline at end of file
diff --git a/src/components/PostForm.vue b/src/components/PostForm.vue
new file mode 100644
index 00000000..0e7b9636
--- /dev/null
+++ b/src/components/PostForm.vue
@@ -0,0 +1,129 @@
+<script>
+import { addPost } from '@/api/posts';
+import InputField from './InputField.vue';
+import TextAreaField from './TextAreaField.vue';
+
+export default {
+  name: 'PostForm',
+  components: {
+    InputField,
+    TextAreaField,
+  },
+  props: {
+    formName: String,
+    userId: Number,
+    selectedPost: Object,
+  },
+  data() {
+    return {
+      formTitle: '',
+      title: '',
+      inputError: '',
+      body: '',
+      bodyError: '',
+      userName: '',
+    }
+  },
+  emits: ['closeSidebar', 'addPost', 'updatePost', 'closeEditing'],
+  watch: {
+    title() {
+      this.inputError = '';
+    },
+    body() {
+      this.bodyError = '';
+    }
+  },
+  mounted() {
+    const currentUser = JSON.parse(localStorage.getItem('user'))
+
+    if (currentUser) {
+      this.userName = currentUser.name;
+    }
+
+    switch (this.formName) {
+      case 'createPost':
+        this.formTitle = 'Create new Post';
+        break;
+
+      case 'editPost':
+        this.formTitle = 'Post editing';
+        this.title = this.selectedPost.title;
+        this.body = this.selectedPost.body;
+        break;
+
+      default:
+        break;
+    }
+  },
+  methods: {
+    handleSubmit() {
+      const title = this.title.trim();
+      const body = this.body.trim();
+      const userId = this.userId || this.selectedPost.userId;
+      const postId = this.selectedPost.id;
+
+      console.log(title);
+      console.log(body);
+      console.log(userId);
+      console.log(postId);
+
+      if (this.title.length < 3 || this.title.length > 49) {
+        this.inputError = "Title must contains from 3 to 49 symbols"
+      }
+
+      if (!this.body.length) {
+        this.bodyError = "Body can't be empty"
+      }
+
+      if (this.inputError.length || this.bodyError.length) {
+        return;
+      }
+
+      if (this.formName === 'createPost') {
+        addPost({ userId, title, body }).then(({ data }) => {
+          this.$emit('addPost', data);
+          this.title = '';
+          this.body = '';
+        });
+      } else {
+        this.$emit('updatePost', { postId, title, body });
+        this.$emit('closeEditing');
+      }
+
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="content">
+    <h2>{{ formTitle }}</h2>
+
+    <form @submit.prevent="handleSubmit">
+      <InputField 
+        v-model="title" 
+        :inputError="inputError" 
+        :inputName="'postTitle'" 
+        :userName="userName" 
+      />
+
+      <TextAreaField 
+        v-model="body" 
+        :bodyError="bodyError" 
+        :bodyName="'postBody'" 
+        :userName="userName" 
+      />
+
+      <div class="field is-grouped">
+        <div class="control">
+          <button type="submit" class="button is-link">Save</button>
+        </div>
+        <div class="control" @click="$emit('closeSidebar')">
+          <button type="reset" class="button is-link is-light">Cancel</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style></style>
\ No newline at end of file
diff --git a/src/components/PostItem.vue b/src/components/PostItem.vue
new file mode 100644
index 00000000..3f2544cb
--- /dev/null
+++ b/src/components/PostItem.vue
@@ -0,0 +1,29 @@
+<script>
+export default {
+  name: 'PostItem',
+  props: {
+    post: Object,
+    selectedPost: Object,
+  },
+  emits: ['selectPost', 'resetPost'],
+}
+</script>
+
+<template>
+  <tr>
+    <td>{{ post.id }}</td>
+    <td>{{ post.title }}</td>
+    <td class="has-text-right is-vcentered">
+      <button 
+        type="button" 
+        class="button" 
+        :class="{ 'is-link': selectedPost.id !== post.id }"
+        @click="selectedPost.id === post.id ? $emit('resetPost') : $emit('selectPost', post)"
+      >
+        {{ selectedPost.id === post.id ? 'Close' : 'Open' }}
+      </button>
+    </td>
+  </tr>
+</template>
+
+<style></style>
\ No newline at end of file
diff --git a/src/components/PostList.vue b/src/components/PostList.vue
new file mode 100644
index 00000000..bd9ef448
--- /dev/null
+++ b/src/components/PostList.vue
@@ -0,0 +1,138 @@
+<script>
+import { deletePost, getPosts, updatePost } from "../api/posts";
+import Loader from './Loader.vue'
+import PostItem from './PostItem.vue'
+import Sidebar from './Sidebar.vue'
+
+export default {
+  name: 'PostList',
+  components: {
+    PostItem,
+    Loader,
+    Sidebar,
+  },
+  props: {
+    userId: Number,
+  },
+  data() {
+    return {
+      posts: [],
+      selectedPost: {},
+      loader: false,
+      errorMessage: '',
+      isActiveSidebar: false,
+    }
+  },
+  mounted() {
+    this.loader = true;
+    getPosts()
+      .then(({ data }) => {
+        this.posts = data;
+      })
+      .catch(() => {
+        this.errorMessage = "Can't download post"
+      })
+      .finally(() => {
+        this.loader = false;
+      });
+  },
+  methods: {
+    handleCloseSidebar() {
+      this.isActiveSidebar = false;
+      this.loader
+    },
+    handleOpenSidebar() {
+      this.isActiveSidebar = true;
+    },
+    handleSelectPost(post) {
+      this.selectedPost = { ...post };
+      this.handleOpenSidebar();
+    },
+    handleResetPost() {
+      setTimeout(() => {
+        this.selectedPost = {};
+      }, 500)
+      this.isActiveSidebar = false;
+    },
+    deletePost(postId) {
+      deletePost(postId).then(() => {
+        this.posts = this.posts.filter(post => post.id !== postId);
+      })
+
+      this.selectedPost = {};
+      this.isActiveSidebar = false;
+    },
+    updatePost({ postId, title, body }) {
+      updatePost({ postId, title, body }).then(({ data }) => {
+        this.posts = this.posts.map(post => {
+          if (post.id !== postId) {
+            return post;
+          } else {
+            this.selectedPost = { ...data }
+            return { ...data }
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="tile is-parent">
+    <div class="tile is-child box is-success">
+      <div class="block">
+        <div class="block is-flex is-justify-content-space-between">
+          <p class="title">Posts</p>
+          <button 
+            type="button" 
+            class="button"
+            :class="{ 'is-link': !(isActiveSidebar && !selectedPost.hasOwnProperty('id')) }" 
+            @click="handleOpenSidebar"
+          >
+            Add New Post
+          </button>
+        </div>
+
+        <Loader v-if="loader" />
+
+        <div v-else-if="!loader && errorMessage" class="is-error is-danger notification">
+          {{ errorMessage }}
+        </div>
+
+        <div v-else-if="!loader && !errorMessage && !posts.length">
+          No post's yet. Create your first post!
+        </div>
+
+        <table v-else class="table is-fullwidth is-striped is-hoverable is-narrow">
+          <thead>
+            <tr class="has-background-link-light">
+              <th>ID</th>
+              <th>Title</th>
+              <th class="has-text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <PostItem v-for="post of posts" 
+              :key="post.id" 
+              :post="post" 
+              :selectedPost="selectedPost"
+              @selectPost="handleSelectPost" 
+              @resetPost="handleResetPost" 
+            />
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <Sidebar 
+    :isActive="isActiveSidebar" 
+    :userId="userId" 
+    :selectedPost="selectedPost" 
+    @closeSidebar="handleCloseSidebar"
+    @addPost="posts.push($event)" 
+    @deletePost="deletePost($event)" 
+    @updatePost="updatePost($event)" 
+  />
+</template>
\ No newline at end of file
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 00000000..c6978333
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,65 @@
+<script>
+import InputField from './InputField.vue'
+import PostDetails from './PostDetails.vue';
+import PostForm from './PostForm.vue';
+import TextAreaField from './TextAreaField.vue';
+
+export default {
+  name: 'Sidebar',
+  components: {
+    InputField,
+    TextAreaField,
+    PostDetails,
+    PostForm,
+  },
+  props: {
+    isActive: Boolean,
+    selectedPost: Object,
+    userId: Number,
+  },
+  emits: ['closeSidebar', 'addPost', 'deletePost', 'updatePost'],
+}
+</script>
+
+<template>
+  <div class="tile is-parent is-8-desktop Sidebar" :class="{ 'Sidebar--open': isActive }">
+    <div class="tile is-child box is-success ">
+      <PostDetails v-if="selectedPost.hasOwnProperty('id')" 
+        :selectedPost="selectedPost"
+        @deletePost="this.$emit('deletePost', $event)" 
+        @updatePost="this.$emit('updatePost', $event)" 
+      />
+
+      <PostForm v-else 
+        :formName="'createPost'" 
+        :userId="userId" 
+        :selectedPost="selectedPost"
+        @closeSidebar="this.$emit('closeSidebar')" 
+        @addPost="this.$emit('addPost', $event)" 
+      />
+    </div>
+  </div>
+
+</template>
+
+<style>
+.Sidebar {
+  overflow: hidden;
+  opacity: 0;
+  transition-property: max-width, opacity;
+  transition-duration: 0.5s;
+  transition-timing-function: ease-in-out;
+
+  @media (min-width: 769px) {
+    max-width: 0;
+  }
+}
+
+.Sidebar--open {
+  opacity: 1;
+
+  @media (min-width: 769px) {
+    max-width: 50%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/TextAreaField.vue b/src/components/TextAreaField.vue
new file mode 100644
index 00000000..f859b071
--- /dev/null
+++ b/src/components/TextAreaField.vue
@@ -0,0 +1,68 @@
+<script>
+export default {
+  name: 'TextAreaField',
+  props: {
+    bodyError: String,
+    bodyName: String,
+    modelValue: String,
+    userName: String,
+  },
+  data() {
+    return {
+      bodyLabel: '',
+      bodyPlaceholder: '',
+      internalValue: this.modelValue,
+    }
+  },
+  emits: ['update:modelValue'],
+  watch: {
+    modelValue(newVal) {
+      this.internalValue = newVal;
+    },
+    internalValue(newVal) {
+      this.$emit('update:modelValue', newVal);
+    }
+  },
+  mounted() {
+    switch (this.bodyName) {
+      case 'postBody':
+        this.bodyLabel = 'Write Post Body';
+        this.bodyPlaceholder = 'Post Body';
+        break;
+
+      case 'commentBody':
+        this.bodyLabel = 'Write Comment';
+        this.bodyPlaceholder = 'Comment';
+        break;
+
+      default:
+        break;
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="field" data-cy="BodyField">
+    <label class="label" :for="`comment-${userName}`">
+      {{ bodyLabel }}
+    </label>
+
+    <div class="control">
+      <textarea 
+        v-model="internalValue" 
+        :id="`comment-${userName}`" 
+        :name="userName" 
+        :placeholder="bodyPlaceholder"
+        class="textarea" 
+        :class="{ 'is-danger': bodyError.length }" 
+      />
+    </div>
+
+    <p v-if="bodyError.length" class="help is-danger" data-cy="ErrorMessage">
+      {{ bodyError }}
+    </p>
+  </div>
+</template>
+
+<style></style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..fe7ae637
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,7 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+import "bulma/css/bulma.css";
+import "@fortawesome/fontawesome-free/css/all.css";
+
+createApp(App).mount("#app");
diff --git a/textAreaField.html b/textAreaField.html
deleted file mode 100644
index 1697eb7a..00000000
--- a/textAreaField.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div className="field" data-cy="BodyField">
-  <label className="label" htmlFor="{`comment-${name}`}"> title </label>
-  <div className="control">
-    <textarea
-      id="{`comment-${name}`}"
-      name="name"
-      placeholder="{placeholder}"
-      className="textarea is-danger"
-    ></textarea>
-  </div>
-
-  <p className="help is-danger" data-cy="ErrorMessage">error text</p>
-</div>
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000..5c45e1d9
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,16 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
diff --git a/writeCommentBtn.html b/writeCommentBtn.html
deleted file mode 100644
index 1917f719..00000000
--- a/writeCommentBtn.html
+++ /dev/null
@@ -1 +0,0 @@
-<button type="button" className="button is-link">Write a comment</button>