From d1db29dce81085bf021a55fafd930dc3bc333097 Mon Sep 17 00:00:00 2001
From: Md Shayon <mdshayon0@gmail.com>
Date: Fri, 1 Dec 2023 14:20:05 +0600
Subject: [PATCH] Incomplete web dev lab

---
 client/.Dockerfile.dev                      |   0
 client/Dockerfile                           |   0
 client/assets/css/tailwind.css              |   3 +-
 client/components/admin/Admin.vue           | 212 +-------------------
 client/components/article/ArticleAdd.vue    |  86 ++++++++
 client/components/article/ArticleExpand.vue |  59 +++++-
 client/components/author/Author.vue         |   8 +
 client/components/category/Category.vue     |   7 +
 client/components/category/CategoryAdd.vue  |   3 +
 client/components/graphql/category.ts       |   0
 client/graphql/articles.ts                  |  30 +++
 client/layouts/admin.vue                    |  26 ++-
 client/layouts/default.vue                  |   1 +
 client/nuxt.config.ts                       |  42 +++-
 client/package-lock.json                    | 153 +++++++++++---
 client/package.json                         |   4 +
 client/pages/admin/article.vue              |  26 +++
 client/pages/admin/author.vue               |  37 ++++
 client/pages/admin/category.vue             |  33 +++
 client/pages/admin/comments.vue             |   9 +
 client/pages/admin/settings.vue             |   8 +
 client/pages/admin/tags.vue                 |   9 +
 client/types/Article.ts                     |   4 +-
 client/types/index.ts                       |   9 +
 24 files changed, 512 insertions(+), 257 deletions(-)
 create mode 100644 client/.Dockerfile.dev
 create mode 100644 client/Dockerfile
 create mode 100644 client/components/article/ArticleAdd.vue
 create mode 100644 client/components/author/Author.vue
 create mode 100644 client/components/category/Category.vue
 create mode 100644 client/components/category/CategoryAdd.vue
 create mode 100644 client/components/graphql/category.ts
 create mode 100644 client/graphql/articles.ts
 create mode 100644 client/pages/admin/article.vue
 create mode 100644 client/pages/admin/author.vue
 create mode 100644 client/pages/admin/category.vue
 create mode 100644 client/pages/admin/comments.vue
 create mode 100644 client/pages/admin/settings.vue
 create mode 100644 client/pages/admin/tags.vue
 create mode 100644 client/types/index.ts

diff --git a/client/.Dockerfile.dev b/client/.Dockerfile.dev
new file mode 100644
index 0000000..e69de29
diff --git a/client/Dockerfile b/client/Dockerfile
new file mode 100644
index 0000000..e69de29
diff --git a/client/assets/css/tailwind.css b/client/assets/css/tailwind.css
index bd6213e..71ed0cc 100644
--- a/client/assets/css/tailwind.css
+++ b/client/assets/css/tailwind.css
@@ -1,3 +1,4 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+/* @import 'quill/dist/quill.snow.css'; */
\ No newline at end of file
diff --git a/client/components/admin/Admin.vue b/client/components/admin/Admin.vue
index cdc2d2b..73b73f7 100644
--- a/client/components/admin/Admin.vue
+++ b/client/components/admin/Admin.vue
@@ -1,225 +1,15 @@
 <!-- https://www.tailwindawesome.com/resources/tailwind-admin-template/demo -->
 <template>
-  <!-- <div class="container mx-auto px-4">
+  <div class="container mx-auto px-4">
         <p>Article</p>
         <p>Category</p>
         <p>Authors</p>
         <p>Comments</p>
         <p>Tags</p>
         <p>Settings</p>
-    </div> -->
-
-  <aside class="relative bg-gray-900 h-screen w-64 hidden sm:block shadow-xl">
-    <div class="p-6">
-      <a href="index.html" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Admin</a>
-      <button
-        class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center"
-      >
-        <i class="fas fa-plus mr-3"></i> New Report
-      </button>
-    </div>
-    <nav class="text-white text-base font-semibold pt-3">
-      <a href="index.html" class="flex items-center active-nav-link text-white py-4 pl-6 nav-item">
-        <i class="fas fa-tachometer-alt mr-3"></i>
-        Dashboard
-      </a>
-      <a href="blank.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
-        <i class="fas fa-sticky-note mr-3"></i>
-        Blank Page
-      </a>
-      <a href="tables.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
-        <i class="fas fa-table mr-3"></i>
-        Tables
-      </a>
-      <a href="forms.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
-        <i class="fas fa-align-left mr-3"></i>
-        Forms
-      </a>
-      <a href="tabs.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
-        <i class="fas fa-tablet-alt mr-3"></i>
-        Tabbed Content
-      </a>
-      <a href="calendar.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
-        <i class="fas fa-calendar mr-3"></i>
-        Calendar
-      </a>
-    </nav>
-    <a href="#" class="absolute w-full upgrade-btn bottom-0 active-nav-link text-white flex items-center justify-center py-4">
-      <i class="fas fa-arrow-circle-up mr-3"></i>
-      Upgrade to Pro!
-    </a>
-  </aside>
-
-  <div class="w-full flex flex-col h-screen overflow-y-hidden">
-    <!-- Desktop Header -->
-    <header class="w-full items-center bg-white py-2 px-6 hidden sm:flex">
-      <div class="w-1/2"></div>
-      <div x-data="{ isOpen: false }" class="relative w-1/2 flex justify-end">
-        <button
-          @click="isOpen = !isOpen"
-          class="realtive z-10 w-12 h-12 rounded-full overflow-hidden border-4 border-gray-400 hover:border-gray-300 focus:border-gray-300 focus:outline-none"
-        >
-          <img src="https://source.unsplash.com/uJ8LNVCBjFQ/400x400" />
-        </button>
-        <button x-show="isOpen" @click="isOpen = false" class="h-full w-full fixed inset-0 cursor-default"></button>
-        <div x-show="isOpen" class="absolute w-32 bg-white rounded-lg shadow-lg py-2 mt-16">
-          <a href="#" class="block px-4 py-2 account-link hover:text-white">Account</a>
-          <a href="#" class="block px-4 py-2 account-link hover:text-white">Support</a>
-          <a href="#" class="block px-4 py-2 account-link hover:text-white">Sign Out</a>
-        </div>
-      </div>
-    </header>
-
-    <!-- Mobile Header & Nav -->
-    <header x-data="{ isOpen: false }" class="w-full bg-gray-900 py-5 px-6 sm:hidden">
-      <div class="flex items-center justify-between">
-        <a href="index.html" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Admin</a>
-        <button @click="isOpen = !isOpen" class="text-white text-3xl focus:outline-none">
-          <i x-show="!isOpen" class="fas fa-bars"></i>
-          <i x-show="isOpen" class="fas fa-times"></i>
-        </button>
-      </div>
-
-      <!-- Dropdown Nav -->
-      <nav :class="isOpen ? 'flex' : 'hidden'" class="flex flex-col pt-4">
-        <a href="index.html" class="flex items-center active-nav-link text-white py-2 pl-4 nav-item">
-          <i class="fas fa-tachometer-alt mr-3"></i>
-          Dashboard
-        </a>
-        <a href="blank.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
-          <i class="fas fa-sticky-note mr-3"></i>
-          Blank Page
-        </a>
-        <a href="tables.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
-          <i class="fas fa-table mr-3"></i>
-          Tables
-        </a>
-        <a href="forms.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
-          <i class="fas fa-align-left mr-3"></i>
-          Forms
-        </a>
-        <a href="tabs.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
-          <i class="fas fa-tablet-alt mr-3"></i>
-          Tabbed Content
-        </a>
-        <a href="calendar.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
-          <i class="fas fa-calendar mr-3"></i>
-          Calendar
-        </a>
-        <a href="#" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
-          <i class="fas fa-cogs mr-3"></i>
-          Support
-        </a>
-        <a href="#" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
-          <i class="fas fa-user mr-3"></i>
-          My Account
-        </a>
-        <a href="#" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
-          <i class="fas fa-sign-out-alt mr-3"></i>
-          Sign Out
-        </a>
-        <button class="w-full bg-white cta-btn font-semibold py-2 mt-3 rounded-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center">
-          <i class="fas fa-arrow-circle-up mr-3"></i> Upgrade to Pro!
-        </button>
-      </nav>
-      <!-- <button class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center">
-                <i class="fas fa-plus mr-3"></i> New Report
-            </button> -->
-    </header>
-
-    <div class="w-full overflow-x-hidden border-t flex flex-col">
-      <main class="w-full flex-grow p-6">
-        <h1 class="text-3xl text-black pb-6">Dashboard</h1>
-
-        <div class="flex flex-wrap mt-6">
-          <div class="w-full lg:w-1/2 pr-0 lg:pr-2">
-            <p class="text-xl pb-3 flex items-center"><i class="fas fa-plus mr-3"></i> Monthly Reports</p>
-            <div class="p-6 bg-white">
-              <canvas id="chartOne" width="400" height="200"></canvas>
-            </div>
-          </div>
-          <div class="w-full lg:w-1/2 pl-0 lg:pl-2 mt-12 lg:mt-0">
-            <p class="text-xl pb-3 flex items-center"><i class="fas fa-check mr-3"></i> Resolved Reports</p>
-            <div class="p-6 bg-white">
-              <canvas id="chartTwo" width="400" height="200"></canvas>
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full mt-12">
-          <p class="text-xl pb-3 flex items-center"><i class="fas fa-list mr-3"></i> Latest Reports</p>
-          <div class="bg-white overflow-auto">
-            <table class="min-w-full bg-white">
-              <thead class="bg-gray-800 text-white">
-                <tr>
-                  <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Name</th>
-                  <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Last name</th>
-                  <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Phone</th>
-                  <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Email</th>
-                </tr>
-              </thead>
-              <tbody class="text-gray-700">
-                <tr>
-                  <td class="w-1/3 text-left py-3 px-4">Lian</td>
-                  <td class="w-1/3 text-left py-3 px-4">Smith</td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
-                </tr>
-                <tr class="bg-gray-200">
-                  <td class="w-1/3 text-left py-3 px-4">Emma</td>
-                  <td class="w-1/3 text-left py-3 px-4">Johnson</td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
-                </tr>
-                <tr>
-                  <td class="w-1/3 text-left py-3 px-4">Oliver</td>
-                  <td class="w-1/3 text-left py-3 px-4">Williams</td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
-                </tr>
-                <tr class="bg-gray-200">
-                  <td class="w-1/3 text-left py-3 px-4">Isabella</td>
-                  <td class="w-1/3 text-left py-3 px-4">Brown</td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
-                </tr>
-                <tr>
-                  <td class="w-1/3 text-left py-3 px-4">Lian</td>
-                  <td class="w-1/3 text-left py-3 px-4">Smith</td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
-                </tr>
-                <tr class="bg-gray-200">
-                  <td class="w-1/3 text-left py-3 px-4">Emma</td>
-                  <td class="w-1/3 text-left py-3 px-4">Johnson</td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
-                </tr>
-                <tr>
-                  <td class="w-1/3 text-left py-3 px-4">Oliver</td>
-                  <td class="w-1/3 text-left py-3 px-4">Williams</td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
-                </tr>
-                <tr class="bg-gray-200">
-                  <td class="w-1/3 text-left py-3 px-4">Isabella</td>
-                  <td class="w-1/3 text-left py-3 px-4">Brown</td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
-                  <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </main>
-
-      <footer class="w-full bg-white text-right p-4">Built by <a target="_blank" href="https://davidgrzyb.com" class="underline">David Grzyb</a>.</footer>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
-const state = reactive({ isOpen: false });
 
-const { isOpen } = state;
 </script>
diff --git a/client/components/article/ArticleAdd.vue b/client/components/article/ArticleAdd.vue
new file mode 100644
index 0000000..7a66b0e
--- /dev/null
+++ b/client/components/article/ArticleAdd.vue
@@ -0,0 +1,86 @@
+<template>
+  <ClientOnly>
+    <h1>Add Article</h1>
+    <form class="mb-4" v-on:submit.prevent="handleArticleAdd">
+      <div class="input-group mb-3">
+        <label for="title">Title</label>
+        <input type="text" class="border outline-none bg-gray-300" name="title" id="title" />
+      </div>
+      <div class="input-group mb-3">
+        <label for="content">Content</label>
+        <QuillEditor v-model:content="state.content" theme="snow" v-bind:options="options" v-on:editorChange="handleContentChange" contentType="delta" />
+        <!-- <div class="border border-green-500">
+          <h2>Display content</h2>
+          <QuillEditor v-model="initialContent" :options="options" />
+        </div> -->
+      </div>
+      <div class="input-group mb-3">
+        <label for="createdAt">Date</label>
+        <input type="datetime-local" name="createdAt" id="createdAt" />
+      </div>
+      <div class="input-group mb-3">
+        <label for="category">Category</label>
+        <select name="category" id="category">
+          <option v-for="cat in props.categories" v-bind:value="cat.id">{{ cat.name }}</option>
+        </select>
+      </div>
+      <div class="input-group mb-3">
+        <label for="author">Author</label>
+        <select name="author" id="author">
+          <option v-for="a in props.authors" v-bind:value="a.id">{{ a.name }}</option>
+        </select>
+      </div>
+      <div class="input-group mb-3">
+        <label for="link">Link</label>
+        <input type="text" class="border outline-none bg-gray-300" name="link" id="link" />
+      </div>
+      <div class="input-group">
+        <button type="submit">Add</button>
+      </div>
+    </form>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+// @ts-ignore
+import { QuillEditor, Delta, Quill } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+
+const isReadOnly = true;
+
+const options = {
+  debug: "info",
+  modules: {
+    toolbar: isReadOnly ? false : ["bold", "italic", "underline"],
+  },
+  placeholder: "Compose an epic...",
+  readOnly: true,
+  theme: "snow",
+};
+
+
+const state = reactive({ content: initialContent });
+const props = defineProps(["categories", "authors"]);
+
+const handleArticleAdd = (e) => {
+  console.log({ state: state.content });
+};
+
+const handleContentChange = (e: EventListener) => {
+  console.log(e);
+};
+</script>
+
+<style scoped lang="css">
+:deep(.ql-editor) {
+  min-height: 200px;
+}
+:deep(.ql-toolbar.ql-snow) {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+:deep(.ql-container.ql-snow) {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+</style>
diff --git a/client/components/article/ArticleExpand.vue b/client/components/article/ArticleExpand.vue
index 90ce7a7..15f2ac9 100644
--- a/client/components/article/ArticleExpand.vue
+++ b/client/components/article/ArticleExpand.vue
@@ -17,16 +17,14 @@
         <p className="font-semibold text-gray-400 text-xs">{{ data.articleByLink.createdAt }}</p>
       </div>
     </div>
-    <p className="mt-10">
-      Breakfast agreeable incommode departure it an. By ignorant at on wondered relation. Enough at tastes really so cousin am of. Extensive therefore supported
-      by extremity of contented. Is pursuit compact demesne invited elderly be. View him she roof tell her case has sigh. Moreover is possible he admitted
-      sociable concerns. By in cold no less been sent hard hill.
-    </p>
+    <!-- <QuillEditor v-model="initialContent" :options="options" /> -->
     <p>{{ data.articleByLink.content }}</p>
   </main>
 </template>
 
 <script lang="ts" setup>
+// @ts-ignore
+import {Delta} from '@vueup/vue-quill';
 import type { IArticle } from "../../types/Article";
 
 const props = defineProps(["postLink"]);
@@ -51,6 +49,57 @@ const query = gql`
   }
 `;
 
+const isReadOnly = true;
+
+const options = {
+  debug: "info",
+  modules: {
+    toolbar: isReadOnly ? false : ["bold", "italic", "underline"],
+  },
+  placeholder: "Compose an epic...",
+  readOnly: true,
+  theme: "snow",
+};
+
+const initialContent = new Delta([
+  {
+    insert: "sdsdssdds\n\nhhg\nhello\n\n\nho\n\ngoal",
+  },
+  {
+    attributes: {
+      list: "ordered",
+    },
+    insert: "\n",
+  },
+  {
+    insert: "sure",
+  },
+  {
+    attributes: {
+      list: "ordered",
+    },
+    insert: "\n",
+  },
+  {
+    insert: "be",
+  },
+  {
+    attributes: {
+      list: "ordered",
+    },
+    insert: "\n",
+  },
+  {
+    insert: "wit",
+  },
+  {
+    insert: "\n",
+    attributes: {
+      list: "ordered",
+    },
+  },
+]);
+
 type ArticlesResult = {
   articleByLink: IArticle;
 };
diff --git a/client/components/author/Author.vue b/client/components/author/Author.vue
new file mode 100644
index 0000000..99a8b26
--- /dev/null
+++ b/client/components/author/Author.vue
@@ -0,0 +1,8 @@
+<template>
+  <h1>{{ author.name }}</h1>
+  <p class="border-b">{{ author.bio }}</p>
+</template>
+
+<script setup lang="ts">
+const props = defineProps(["author"]);
+</script>
diff --git a/client/components/category/Category.vue b/client/components/category/Category.vue
new file mode 100644
index 0000000..46c95af
--- /dev/null
+++ b/client/components/category/Category.vue
@@ -0,0 +1,7 @@
+<template>
+  <h1>{{ category.name }}</h1>
+</template>
+
+<script setup lang="ts">
+const props = defineProps(["category"]);
+</script>
diff --git a/client/components/category/CategoryAdd.vue b/client/components/category/CategoryAdd.vue
new file mode 100644
index 0000000..5d02856
--- /dev/null
+++ b/client/components/category/CategoryAdd.vue
@@ -0,0 +1,3 @@
+<template>
+    <h1>Category Add</h1>
+</template>
\ No newline at end of file
diff --git a/client/components/graphql/category.ts b/client/components/graphql/category.ts
new file mode 100644
index 0000000..e69de29
diff --git a/client/graphql/articles.ts b/client/graphql/articles.ts
new file mode 100644
index 0000000..9e813d2
--- /dev/null
+++ b/client/graphql/articles.ts
@@ -0,0 +1,30 @@
+const GET_ARTICLES = gql`
+  query GetArticles {
+    allArticles(limit: 10, start: 0) {
+      title
+      link
+      id
+      content
+      category {
+        id
+        name
+      }
+      createdAt
+      author {
+        id
+        name
+      }
+    }
+    allAuthors {
+      id
+      name
+      email
+    }
+    allCategories {
+      id
+      name
+    }
+  }
+`;
+
+export { GET_ARTICLES };
diff --git a/client/layouts/admin.vue b/client/layouts/admin.vue
index 978394a..9cd7e83 100644
--- a/client/layouts/admin.vue
+++ b/client/layouts/admin.vue
@@ -1,7 +1,23 @@
 <template>
-  <div>
-    <AdminNavbar />
-    <slot />
-    <AdminFooter />
+  <div class="flex justify-between h-full">
+    <div class="w-3/12 h-screen sticky bg-gray-900 text-gray-200 items-start top-0">
+      <div class="px-3">
+        <ul class="flex flex-col justify-start items-start">
+          <li><NuxtLink to="/admin/article">Article</NuxtLink></li>
+          <li><NuxtLink to="/admin/category">Category</NuxtLink></li>
+          <li><NuxtLink to="/admin/tags">Tags</NuxtLink></li>
+          <li><NuxtLink to="/admin/author">Author</NuxtLink></li>
+          <li><NuxtLink to="/admin/comments">Comments</NuxtLink></li>
+          <li><NuxtLink to="/admin/settings">Settings</NuxtLink></li>
+        </ul>
+      </div>
+    </div>
+    <div class="w-9/12 text-gray-900">
+      <div class="px-3">
+        <AdminNavbar />
+        <slot />
+      </div>
+    </div>
   </div>
-</template>
\ No newline at end of file
+  <AdminFooter />
+</template>
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index 4ce0df9..00a1ef6 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <p class="text-amber-800 bg-amber-100 w-full p-2 text-center font-semibold">Under Development</p>
     <Navbar />
     <slot />
     <Footer />
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index 97b4df3..0866449 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -1,28 +1,49 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  app: {
+    // <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+    head: {
+      // link: [{ rel: "stylesheet", href: "https://cdn.quilljs.com/1.3.6/quill.snow.css" }],
+    },
+  },
   components: [
     {
       path: "~/components/layouts",
       pathPrefix: false,
-      extensions: ['.vue'],
+      extensions: [".vue"],
     },
     {
       path: "~/components/home",
       pathPrefix: false,
-      extensions: ['.vue'],
+      extensions: [".vue"],
     },
     {
       path: "~/components/admin",
       pathPrefix: false,
-      extensions: ['.vue'],
+      extensions: [".vue"],
     },
     {
       path: "~/components/article",
       pathPrefix: false,
-      extensions: ['.vue'],
+      extensions: [".vue"],
+    },
+    {
+      path: "~/components/category",
+      pathPrefix: false,
+      extensions: [".vue"],
+    },
+    {
+      path: "~/components/author",
+      pathPrefix: false,
+      extensions: [".vue"],
+    },
+    {
+      path: "~/components/elements",
+      pathPrefix: false,
+      extensions: [".vue"],
     },
-    "~/components",
+    // "~/components",
   ],
   typescript: {
     strict: true,
@@ -36,4 +57,15 @@ export default defineNuxtConfig({
       },
     },
   },
+  plugins: [],
+  // some nuxt config...
+  css: [
+    // ...
+    "quill/dist/quill.core.css",
+    // for snow theme
+    "quill/dist/quill.snow.css",
+    // for bubble theme
+    "quill/dist/quill.bubble.css",
+    // ...
+  ],
 });
diff --git a/client/package-lock.json b/client/package-lock.json
index 8f1a573..018edb8 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -6,6 +6,9 @@
     "": {
       "name": "nuxt-app",
       "hasInstallScript": true,
+      "dependencies": {
+        "@vueup/vue-quill": "^1.2.0"
+      },
       "devDependencies": {
         "@nuxt/devtools": "latest",
         "@nuxtjs/apollo": "^5.0.0-alpha.8",
@@ -13,6 +16,7 @@
         "autoprefixer": "^10.4.16",
         "nuxt": "^3.8.0",
         "postcss": "^8.4.31",
+        "sass": "^1.69.5",
         "tailwindcss": "^3.3.5",
         "typescript": "^5.2.2",
         "vue": "^3.3.7",
@@ -575,7 +579,6 @@
       "version": "7.23.0",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
       "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1362,8 +1365,7 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.20",
@@ -3089,7 +3091,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.7.tgz",
       "integrity": "sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.0",
         "@vue/shared": "3.3.7",
@@ -3101,7 +3102,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.7.tgz",
       "integrity": "sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-core": "3.3.7",
         "@vue/shared": "3.3.7"
@@ -3111,7 +3111,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.7.tgz",
       "integrity": "sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.0",
         "@vue/compiler-core": "3.3.7",
@@ -3129,7 +3128,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.7.tgz",
       "integrity": "sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-dom": "3.3.7",
         "@vue/shared": "3.3.7"
@@ -3184,7 +3182,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.7.tgz",
       "integrity": "sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==",
-      "dev": true,
       "dependencies": {
         "@vue/shared": "3.3.7"
       }
@@ -3193,7 +3190,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.7.tgz",
       "integrity": "sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.0",
         "@vue/compiler-core": "3.3.7",
@@ -3206,7 +3202,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.7.tgz",
       "integrity": "sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==",
-      "dev": true,
       "dependencies": {
         "@vue/reactivity": "3.3.7",
         "@vue/shared": "3.3.7"
@@ -3216,7 +3211,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.7.tgz",
       "integrity": "sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==",
-      "dev": true,
       "dependencies": {
         "@vue/runtime-core": "3.3.7",
         "@vue/shared": "3.3.7",
@@ -3227,7 +3221,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.7.tgz",
       "integrity": "sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-ssr": "3.3.7",
         "@vue/shared": "3.3.7"
@@ -3239,8 +3232,34 @@
     "node_modules/@vue/shared": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.7.tgz",
-      "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==",
-      "dev": true
+      "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg=="
+    },
+    "node_modules/@vueup/vue-quill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@vueup/vue-quill/-/vue-quill-1.2.0.tgz",
+      "integrity": "sha512-kd5QPSHMDpycklojPXno2Kw2JSiKMYduKYQckTm1RJoVDA557MnyUXgcuuDpry4HY/Rny9nGNcK+m3AHk94wag==",
+      "dependencies": {
+        "quill": "^1.3.7",
+        "quill-delta": "^4.2.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.41"
+      }
+    },
+    "node_modules/@vueup/vue-quill/node_modules/fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
+    },
+    "node_modules/@vueup/vue-quill/node_modules/quill-delta": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-4.2.2.tgz",
+      "integrity": "sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==",
+      "dependencies": {
+        "fast-diff": "1.2.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isequal": "^4.5.0"
+      }
     },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
@@ -4395,6 +4414,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cluster-key-slot": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
@@ -4851,8 +4878,7 @@
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/cuint": {
       "version": "0.2.2",
@@ -4886,8 +4912,7 @@
     "node_modules/deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
-      "integrity": "sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==",
-      "dev": true
+      "integrity": "sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw=="
     },
     "node_modules/deepmerge": {
       "version": "4.3.1",
@@ -5366,8 +5391,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "node_modules/etag": {
       "version": "1.8.1",
@@ -5378,6 +5402,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -5417,6 +5446,11 @@
       "integrity": "sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==",
       "dev": true
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "node_modules/externality": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/externality/-/externality-1.0.2.tgz",
@@ -5435,6 +5469,11 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "node_modules/fast-fifo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
@@ -6173,6 +6212,12 @@
         "node": ">=10.18.0"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -7038,6 +7083,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -7056,6 +7106,11 @@
       "integrity": "sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==",
       "dev": true
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -7099,7 +7154,6 @@
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
       "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -8450,6 +8504,11 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "node_modules/parent-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-2.0.0.tgz",
@@ -8617,8 +8676,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -8709,7 +8767,6 @@
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
       "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -9468,7 +9525,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
       "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9599,6 +9655,32 @@
       "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
       "dev": true
     },
+    "node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/radix3": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.0.tgz",
@@ -10240,6 +10322,23 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/sass": {
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
@@ -10554,7 +10653,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11325,7 +11423,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
       "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12500,7 +12598,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.7.tgz",
       "integrity": "sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-dom": "3.3.7",
         "@vue/compiler-sfc": "3.3.7",
diff --git a/client/package.json b/client/package.json
index f848a6f..69b7bb0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -16,10 +16,14 @@
     "autoprefixer": "^10.4.16",
     "nuxt": "^3.8.0",
     "postcss": "^8.4.31",
+    "sass": "^1.69.5",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
     "vue": "^3.3.7",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.22"
+  },
+  "dependencies": {
+    "@vueup/vue-quill": "^1.2.0"
   }
 }
diff --git a/client/pages/admin/article.vue b/client/pages/admin/article.vue
new file mode 100644
index 0000000..40a0412
--- /dev/null
+++ b/client/pages/admin/article.vue
@@ -0,0 +1,26 @@
+<template>
+  <ClientOnly>
+    <h1>Article</h1>
+    <ArticleAdd v-bind:categories="data.allCategories" v-bind:authors="data.allAuthors" />
+    <Article v-for="article in data.allArticles" v-bind:key="article.id" v-bind:article="article" />
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import type { IArticle, IAuthor, ICategory } from "~/types";
+import { GET_ARTICLES } from "../../graphql/articles";
+
+definePageMeta({
+  layout: "admin",
+});
+
+type Article = {
+  allArticles: IArticle[];
+  allAuthors: IAuthor[];
+  allCategories: ICategory[];
+};
+
+const variables = { start: 0, limit: 20 };
+const { data } = await useAsyncQuery<Article>(GET_ARTICLES, variables);
+console.log(data.value);
+</script>
diff --git a/client/pages/admin/author.vue b/client/pages/admin/author.vue
new file mode 100644
index 0000000..12c62ce
--- /dev/null
+++ b/client/pages/admin/author.vue
@@ -0,0 +1,37 @@
+<template>
+  <h1>Author</h1>
+  <Author v-for="author in data.allAuthors" v-bind:key="author.id" v-bind:author="author" />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "admin",
+});
+
+const query = gql`
+query GetAuthors {
+  allAuthors {
+    bio
+    id
+    name
+    email
+  }
+}
+`;
+
+
+interface IAuthor{
+  id: number;
+  name: string;
+  bio: string;
+  email: string;
+}
+
+type Author={
+  allAuthors: IAuthor[];
+}
+const { data } = await useAsyncQuery<Author>(query);
+console.log(data.value);
+
+
+</script>
diff --git a/client/pages/admin/category.vue b/client/pages/admin/category.vue
new file mode 100644
index 0000000..e73cd59
--- /dev/null
+++ b/client/pages/admin/category.vue
@@ -0,0 +1,33 @@
+<template>
+  <h1>Category</h1>
+  <Category v-for="cat in data.allCategories" v-bind:key="cat.id" v-bind:category="cat" />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "admin",
+});
+
+const query = gql`
+  query AllCategories {
+    allCategories {
+      id
+      name
+    }
+  }
+`;
+
+
+interface ICategory{
+  id: number;
+  name: string;
+}
+
+type Category={
+  allCategories: ICategory[];
+}
+const { data } = await useAsyncQuery<Category>(query);
+console.log(data.value);
+
+
+</script>
diff --git a/client/pages/admin/comments.vue b/client/pages/admin/comments.vue
new file mode 100644
index 0000000..481ed96
--- /dev/null
+++ b/client/pages/admin/comments.vue
@@ -0,0 +1,9 @@
+<template>
+    <h1>Comments</h1>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "admin",
+});
+</script>
\ No newline at end of file
diff --git a/client/pages/admin/settings.vue b/client/pages/admin/settings.vue
new file mode 100644
index 0000000..0873839
--- /dev/null
+++ b/client/pages/admin/settings.vue
@@ -0,0 +1,8 @@
+<template>
+    <h1>Settings</h1>
+</template>
+<script setup lang="ts">
+definePageMeta({
+  layout: "admin",
+});
+</script>
\ No newline at end of file
diff --git a/client/pages/admin/tags.vue b/client/pages/admin/tags.vue
new file mode 100644
index 0000000..4ab6bc7
--- /dev/null
+++ b/client/pages/admin/tags.vue
@@ -0,0 +1,9 @@
+<template>
+    <h1>Tags</h1>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "admin",
+});
+</script>
\ No newline at end of file
diff --git a/client/types/Article.ts b/client/types/Article.ts
index 1873a2f..837f63c 100644
--- a/client/types/Article.ts
+++ b/client/types/Article.ts
@@ -5,10 +5,10 @@ export interface IArticle {
   id: number;
   title: string;
   content: string;
+  link: string;
   createdAt: string;
-  author: IAuthor;
   category: ICategory;
-  link: string;
+  author: IAuthor;
 }
 
 export interface IArticleProps {
diff --git a/client/types/index.ts b/client/types/index.ts
new file mode 100644
index 0000000..b66b222
--- /dev/null
+++ b/client/types/index.ts
@@ -0,0 +1,9 @@
+import type { IArticle, IArticleProps } from "./Article";
+import type { IAuthor } from "./Author";
+import type { ICategory } from "./Category";
+
+export type { 
+    IArticle, IArticleProps,
+    IAuthor,
+    ICategory
+ };