From ab6058abe611672d4e10793a7a8b6bfa6b98e444 Mon Sep 17 00:00:00 2001
From: Amanuel Alemayehu <amanuelalemayehu449@gmail.com>
Date: Wed, 3 Aug 2022 05:58:29 -0800
Subject: [PATCH 1/2] created basic ui

---
 .../components/amanz/AddBlog.vue              | 96 +++++++++++++++++++
 .../components/amanz/AmanzBlog.vue            | 54 +++++++++++
 starter-project-web-vue2/pages/amanz/_id.vue  | 46 +++++++++
 .../pages/amanz/index.vue                     | 61 ++++++++++++
 4 files changed, 257 insertions(+)
 create mode 100644 starter-project-web-vue2/components/amanz/AddBlog.vue
 create mode 100644 starter-project-web-vue2/components/amanz/AmanzBlog.vue
 create mode 100644 starter-project-web-vue2/pages/amanz/_id.vue
 create mode 100644 starter-project-web-vue2/pages/amanz/index.vue

diff --git a/starter-project-web-vue2/components/amanz/AddBlog.vue b/starter-project-web-vue2/components/amanz/AddBlog.vue
new file mode 100644
index 00000000..778cdffc
--- /dev/null
+++ b/starter-project-web-vue2/components/amanz/AddBlog.vue
@@ -0,0 +1,96 @@
+<template>
+  <v-row>
+    <v-dialog v-model="dialog" persistent max-width="600px">
+      <template #activator="{ on, attrs }">
+        <!-- <v-btn color="primary" dark v-bind="attrs" v-on="on">
+          Open Dialog
+        </v-btn> -->
+        <v-btn
+          color="success"
+          class="mt-10 ml-5 py-5 px-7"
+          v-bind="attrs"
+          v-on="on"
+          >add blog</v-btn
+        >
+      </template>
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Add Blog</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <!-- <v-col cols="12" sm="6" md="4">
+                <v-text-field label="Legal first name*" required></v-text-field>
+              </v-col> -->
+              <!-- <v-col cols="12" sm="6" md="4">
+                <v-text-field
+                  label="Legal middle name"
+                  hint="example of helper text only on focus"
+                ></v-text-field>
+              </v-col> -->
+              <!-- <v-col cols="12" sm="6" md="4">
+                <v-text-field
+                  label="Legal last name*"
+                  hint="example of persistent helper text"
+                  persistent-hint
+                  required
+                ></v-text-field>
+              </v-col> -->
+              <v-col cols="12">
+                <v-text-field label="Title*" required></v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field label="Content*" required></v-text-field>
+              </v-col>
+              <!-- <v-col cols="12" sm="6">
+                <v-select
+                  :items="['0-17', '18-29', '30-54', '54+']"
+                  label="Age*"
+                  required
+                ></v-select>
+              </v-col> -->
+              <!-- <v-col cols="12" sm="6">
+                <v-autocomplete
+                  :items="[
+                    'Skiing',
+                    'Ice hockey',
+                    'Soccer',
+                    'Basketball',
+                    'Hockey',
+                    'Reading',
+                    'Writing',
+                    'Coding',
+                    'Basejump',
+                  ]"
+                  label="Interests"
+                  multiple
+                ></v-autocomplete>
+              </v-col> -->
+            </v-row>
+          </v-container>
+          <v-text class="ml-3 text-h6 font-weight-medium"
+            >* indicates required field</v-text
+          >
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="blue darken-1" text @click="dialog = false">
+            Close
+          </v-btn>
+          <v-btn color="blue darken-1" text @click="dialog = false">
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    dialog: false,
+  }),
+}
+</script>
diff --git a/starter-project-web-vue2/components/amanz/AmanzBlog.vue b/starter-project-web-vue2/components/amanz/AmanzBlog.vue
new file mode 100644
index 00000000..85c26582
--- /dev/null
+++ b/starter-project-web-vue2/components/amanz/AmanzBlog.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-container>
+    <v-hover v-slot:="{ hover }">
+      <v-card
+        :elevation="hover ? 7 : 1.5"
+        class="mx-auto mt-2 pa-6 transition-swing"
+        outlined
+      >
+        <v-list-item two-line>
+          <v-list-item-content>
+            <Nuxt-link
+              style="text-decoration: none; color: inherit"
+              :to="`/amanz/${blog._id} `"
+            >
+              <v-list-item-title class="text-h5 mb-3">
+                <v-text> {{ blog.title }} {{ blog._id }} </v-text>
+              </v-list-item-title>
+              <v-list-item-subtitle class="text-h6">{{
+                blog.content
+              }}</v-list-item-subtitle>
+            </Nuxt-link>
+          </v-list-item-content>
+
+          <v-list-item-action tile class="mt-7 ml-15">
+            <v-btn icon>
+              <v-icon size="30" color="green">mdi-pencil</v-icon>
+            </v-btn>
+          </v-list-item-action>
+          <v-list-item-action tile class="mt-7">
+            <v-btn icon>
+              <v-icon size="30" color="red">mdi-delete</v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+
+        <!-- <v-card-actions>
+        <v-btn outlined rounded text> Button </v-btn>
+      </v-card-actions> -->
+      </v-card>
+    </v-hover>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AmanzBlog',
+  props: {
+    blog: {
+      type: Object,
+      required: true,
+    },
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/amanz/_id.vue b/starter-project-web-vue2/pages/amanz/_id.vue
new file mode 100644
index 00000000..d1d9916d
--- /dev/null
+++ b/starter-project-web-vue2/pages/amanz/_id.vue
@@ -0,0 +1,46 @@
+<template>
+  <v-container>
+    <nuxt-link style="text-decoration: none; color: inherit" :to="'/amanz/'">
+      <v-btn fab outlined x-small color="green" class="pa-2 mb-2 mx-7 mt-3"
+        ><v-icon> mdi-chevron-left </v-icon></v-btn
+      ></nuxt-link
+    >
+    <v-card :elevation="3" class="mx-auto mt-2 pa-8 transition-swing" outlined>
+      <v-list-item three-line>
+        <v-list-item-content>
+          <v-list-item-title class="text-h4 mb-5">
+            <v-text> {{ blog.title }} {{ id }} </v-text>
+          </v-list-item-title>
+          <v-text class="text-h5 text-wrap font-weight-regular">{{
+            blog.content
+          }}</v-text>
+        </v-list-item-content>
+      </v-list-item>
+      <v-card-actions>
+        <v-text class="text-h5 mt-5 ml-2 font-italic"
+          >By {{ blog.author }}</v-text
+        >
+      </v-card-actions>
+    </v-card>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      id: this.$route.params.id,
+      blog: {
+        _id: 1,
+        title: 'Blog',
+        author: 'Amanz Alemayehu',
+        content:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+      },
+    }
+  },
+  // created() {
+  //   console.log(this.$route.params.id)
+  // },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/amanz/index.vue b/starter-project-web-vue2/pages/amanz/index.vue
new file mode 100644
index 00000000..40ccb158
--- /dev/null
+++ b/starter-project-web-vue2/pages/amanz/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <!-- <v-btn color="success" class="my-3 ml-5 py-5 px-7">add blog</v-btn> -->
+    <AddBlog />
+    <v-row v-for="blog in blogs" :key="blog._id">
+      <AmanzBlog :blog="blog" />
+    </v-row>
+  </div>
+</template>
+
+<script>
+import AmanzBlog from '~/components/amanz/AmanzBlog.vue'
+import AddBlog from '~/components/amanz/AddBlog.vue'
+
+export default {
+  name: 'App',
+  components: { AmanzBlog, AddBlog },
+  data() {
+    return {
+      blogs: [
+        {
+          _id: 1,
+          title: 'Blog',
+          content:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+        },
+        {
+          _id: 2,
+          title: 'Blog',
+          content:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+        },
+        {
+          _id: 3,
+          title: 'Blog',
+          content:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+        },
+        {
+          _id: 4,
+          title: 'Blog',
+          content:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+        },
+        {
+          _id: 5,
+          title: 'Blog',
+          content:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+        },
+        {
+          _id: 6,
+          title: 'Blog',
+          content:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+        },
+      ],
+    }
+  },
+}
+</script>

From 0ea3264460495dc198e3a09c337a3270e5eaacbd Mon Sep 17 00:00:00 2001
From: Amanuel Alemayehu <amanuelalemayehu449@gmail.com>
Date: Fri, 5 Aug 2022 03:57:34 -0800
Subject: [PATCH 2/2] ui with state and some fuctions completed

---
 .../components/amanz/AddBlog.vue              | 39 ++++++++--
 .../components/amanz/AmanzBlog.vue            | 26 +++++--
 .../components/amanz/EditBlog.vue             | 75 +++++++++++++++++++
 starter-project-web-vue2/pages/amanz/_id.vue  | 71 ++++++++++--------
 .../pages/amanz/index.vue                     | 57 ++++----------
 starter-project-web-vue2/pages/index.vue      | 11 ++-
 starter-project-web-vue2/store/amanz.js       | 72 ++++++++++++++++++
 7 files changed, 257 insertions(+), 94 deletions(-)
 create mode 100644 starter-project-web-vue2/components/amanz/EditBlog.vue
 create mode 100644 starter-project-web-vue2/store/amanz.js

diff --git a/starter-project-web-vue2/components/amanz/AddBlog.vue b/starter-project-web-vue2/components/amanz/AddBlog.vue
index 778cdffc..24f28e13 100644
--- a/starter-project-web-vue2/components/amanz/AddBlog.vue
+++ b/starter-project-web-vue2/components/amanz/AddBlog.vue
@@ -38,10 +38,18 @@
                 ></v-text-field>
               </v-col> -->
               <v-col cols="12">
-                <v-text-field label="Title*" required></v-text-field>
+                <v-text-field
+                  v-model="title"
+                  label="Title*"
+                  required
+                ></v-text-field>
               </v-col>
               <v-col cols="12">
-                <v-text-field label="Content*" required></v-text-field>
+                <v-text-field
+                  v-model="content"
+                  label="Content*"
+                  required
+                ></v-text-field>
               </v-col>
               <!-- <v-col cols="12" sm="6">
                 <v-select
@@ -69,18 +77,16 @@
               </v-col> -->
             </v-row>
           </v-container>
-          <v-text class="ml-3 text-h6 font-weight-medium"
-            >* indicates required field</v-text
+          <v-text class="ml-3 text-subtitle-1 font-weight-medium"
+            ><v-text color="red">*</v-text>indicates required field</v-text
           >
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn color="blue darken-1" text @click="dialog = false">
-            Close
-          </v-btn>
-          <v-btn color="blue darken-1" text @click="dialog = false">
-            Save
+            Cancel
           </v-btn>
+          <v-btn color="blue darken-1" text @click="onSubmit"> Add </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -88,9 +94,26 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 export default {
   data: () => ({
     dialog: false,
+    newBlog: {},
+    title: '',
+    content: '',
   }),
+  methods: {
+    ...mapActions('amanz', ['addBlog']),
+    onSubmit(e) {
+      e.preventDefault()
+      this.newBlog = {
+        title: this.title,
+        content: this.content,
+        description: 'description 101',
+      }
+      this.addBlog(this.newBlog)
+      this.dialog = false
+    },
+  },
 }
 </script>
diff --git a/starter-project-web-vue2/components/amanz/AmanzBlog.vue b/starter-project-web-vue2/components/amanz/AmanzBlog.vue
index 85c26582..051020c2 100644
--- a/starter-project-web-vue2/components/amanz/AmanzBlog.vue
+++ b/starter-project-web-vue2/components/amanz/AmanzBlog.vue
@@ -13,7 +13,7 @@
               :to="`/amanz/${blog._id} `"
             >
               <v-list-item-title class="text-h5 mb-3">
-                <v-text> {{ blog.title }} {{ blog._id }} </v-text>
+                <v-text> {{ blog.title }} </v-text>
               </v-list-item-title>
               <v-list-item-subtitle class="text-h6">{{
                 blog.content
@@ -22,12 +22,10 @@
           </v-list-item-content>
 
           <v-list-item-action tile class="mt-7 ml-15">
-            <v-btn icon>
-              <v-icon size="30" color="green">mdi-pencil</v-icon>
-            </v-btn>
+            <EditBlog :blogger="blog" />
           </v-list-item-action>
           <v-list-item-action tile class="mt-7">
-            <v-btn icon>
+            <v-btn icon :disabled="!isAuthor" @click="deleteBlog(blog._id)">
               <v-icon size="30" color="red">mdi-delete</v-icon>
             </v-btn>
           </v-list-item-action>
@@ -42,13 +40,31 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+import EditBlog from './EditBlog.vue'
 export default {
   name: 'AmanzBlog',
+
+  components: { EditBlog },
+
   props: {
     blog: {
       type: Object,
       required: true,
     },
   },
+
+  data() {
+    return {
+      isAuthor: true,
+    }
+  },
+  created() {
+    // console.log(this.$auth.$state)
+    this.isAuthor = this.blog.authorUserId._id === this.$auth.$state.user._id
+  },
+  methods: {
+    ...mapActions('amanz', ['deleteBlog']),
+  },
 }
 </script>
diff --git a/starter-project-web-vue2/components/amanz/EditBlog.vue b/starter-project-web-vue2/components/amanz/EditBlog.vue
new file mode 100644
index 00000000..3a7663e9
--- /dev/null
+++ b/starter-project-web-vue2/components/amanz/EditBlog.vue
@@ -0,0 +1,75 @@
+<template>
+  <v-row>
+    <v-dialog v-model="dialog" persistent max-width="600px">
+      <template #activator="{ on, attrs }">
+        <!-- <v-btn color="primary" dark v-bind="attrs" v-on="on">
+          Open Dialog
+        </v-btn> -->
+        <!-- <v-btn
+          color="success"
+          class="mt-10 ml-5 py-5 px-7"
+          v-bind="attrs"
+          v-on="on"
+          >add blog</v-btn
+        > -->
+        <v-btn icon v-bind="attrs" disabled="!isAuthor" v-on="on">
+          <v-icon size="30" color="green">mdi-pencil</v-icon>
+        </v-btn>
+      </template>
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Edit Blog</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="title"
+                  label="Title*"
+                  required
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="content"
+                  label="Content*"
+                  required
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="blue darken-1" text @click="dialog = false">
+            Cancel
+          </v-btn>
+          <v-btn color="blue darken-1" text @click="dialog = false">
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script>
+export default {
+  props: {
+    blogger: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    dialog: false,
+    title: '',
+    content: '',
+  }),
+  mounted() {
+    this.title = this.blogger.title
+    this.content = this.blogger.content
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/amanz/_id.vue b/starter-project-web-vue2/pages/amanz/_id.vue
index d1d9916d..fe9e14d7 100644
--- a/starter-project-web-vue2/pages/amanz/_id.vue
+++ b/starter-project-web-vue2/pages/amanz/_id.vue
@@ -1,43 +1,48 @@
 <template>
   <v-container>
-    <nuxt-link style="text-decoration: none; color: inherit" :to="'/amanz/'">
-      <v-btn fab outlined x-small color="green" class="pa-2 mb-2 mx-7 mt-3"
-        ><v-icon> mdi-chevron-left </v-icon></v-btn
-      ></nuxt-link
-    >
-    <v-card :elevation="3" class="mx-auto mt-2 pa-8 transition-swing" outlined>
-      <v-list-item three-line>
-        <v-list-item-content>
-          <v-list-item-title class="text-h4 mb-5">
-            <v-text> {{ blog.title }} {{ id }} </v-text>
-          </v-list-item-title>
-          <v-text class="text-h5 text-wrap font-weight-regular">{{
-            blog.content
-          }}</v-text>
-        </v-list-item-content>
-      </v-list-item>
-      <v-card-actions>
-        <v-text class="text-h5 mt-5 ml-2 font-italic"
-          >By {{ blog.author }}</v-text
-        >
-      </v-card-actions>
-    </v-card>
+    <div v-if="blog === null">loading...</div>
+    <div v-else>
+      <nuxt-link style="text-decoration: none; color: inherit" :to="'/amanz/'">
+        <v-btn fab outlined x-small class="pa-2 mb-2 ml-3 mt-3"
+          ><v-icon> mdi-chevron-left </v-icon></v-btn
+        ></nuxt-link
+      >
+      <v-card
+        :elevation="3"
+        class="mx-auto mt-2 pa-8 transition-swing"
+        outlined
+      >
+        <v-list-item three-line>
+          <v-list-item-content>
+            <v-list-item-title class="text-h4 mb-5">
+              <v-text> {{ blog.title }} </v-text>
+            </v-list-item-title>
+            <v-text class="text-h5 text-wrap font-weight-regular">{{
+              blog.content
+            }}</v-text>
+          </v-list-item-content>
+        </v-list-item>
+        <v-card-actions>
+          <v-text class="text-h5 mt-5 ml-2 font-italic"
+            >By Amanuel Alemayehu</v-text
+          >
+        </v-card-actions>
+      </v-card>
+    </div>
   </v-container>
 </template>
 
 <script>
+import { mapActions, mapState } from 'vuex'
 export default {
-  data() {
-    return {
-      id: this.$route.params.id,
-      blog: {
-        _id: 1,
-        title: 'Blog',
-        author: 'Amanz Alemayehu',
-        content:
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-      },
-    }
+  computed: {
+    ...mapState('amanz', ['blog']),
+  },
+  created() {
+    this.fetchBlogsById(this.$route.params.id)
+  },
+  methods: {
+    ...mapActions('amanz', ['fetchBlogsById']),
   },
   // created() {
   //   console.log(this.$route.params.id)
diff --git a/starter-project-web-vue2/pages/amanz/index.vue b/starter-project-web-vue2/pages/amanz/index.vue
index 40ccb158..75e414fb 100644
--- a/starter-project-web-vue2/pages/amanz/index.vue
+++ b/starter-project-web-vue2/pages/amanz/index.vue
@@ -2,60 +2,29 @@
   <div>
     <!-- <v-btn color="success" class="my-3 ml-5 py-5 px-7">add blog</v-btn> -->
     <AddBlog />
-    <v-row v-for="blog in blogs" :key="blog._id">
-      <AmanzBlog :blog="blog" />
-    </v-row>
+    <div v-if="blogs.length > 0">
+      <v-row v-for="blog in blogs" :key="blog._id">
+        <AmanzBlog :blog="blog" />
+      </v-row>
+    </div>
+    <div v-else>loading...</div>
   </div>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
 import AmanzBlog from '~/components/amanz/AmanzBlog.vue'
 import AddBlog from '~/components/amanz/AddBlog.vue'
 
 export default {
   name: 'App',
   components: { AmanzBlog, AddBlog },
-  data() {
-    return {
-      blogs: [
-        {
-          _id: 1,
-          title: 'Blog',
-          content:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-        },
-        {
-          _id: 2,
-          title: 'Blog',
-          content:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-        },
-        {
-          _id: 3,
-          title: 'Blog',
-          content:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-        },
-        {
-          _id: 4,
-          title: 'Blog',
-          content:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-        },
-        {
-          _id: 5,
-          title: 'Blog',
-          content:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-        },
-        {
-          _id: 6,
-          title: 'Blog',
-          content:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-        },
-      ],
-    }
+  computed: { ...mapState('amanz', ['blogs']) },
+  mounted() {
+    this.fetchBlogs()
+  },
+  methods: {
+    ...mapActions('amanz', ['fetchBlogs']),
   },
 }
 </script>
diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index 95c1f831..b766fc44 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -41,7 +41,6 @@ export default {
           name: 'Amsale Gebrehana',
           description: 'A2SV G31',
           link: '/amsale',
-         
         },
         {
           name: 'Ruth Getachew',
@@ -49,10 +48,14 @@ export default {
           link: '/ruth',
         },
         {
-          name: "Keiredin Aman",
+          name: 'Keiredin Aman',
           description: 'Summer Intern',
-          link:
-            '/keiredin',
+          link: '/keiredin',
+        },
+        {
+          name: 'Amanuel Alemayehu',
+          description: 'Web Team Member',
+          link: '/amanz',
         },
       ],
     }
diff --git a/starter-project-web-vue2/store/amanz.js b/starter-project-web-vue2/store/amanz.js
new file mode 100644
index 00000000..73f42ac7
--- /dev/null
+++ b/starter-project-web-vue2/store/amanz.js
@@ -0,0 +1,72 @@
+// eslint-disable-next-line no-unused-vars
+import axios from 'axios'
+
+const state = {
+  blogs: [],
+  blog: {},
+}
+
+const getters = {
+  allBlogs: (state) => state.blogs,
+}
+
+const actions = {
+  // eslint-disable-next-line no-unused-vars
+  async fetchBlogs({ commit }) {
+    const response = await axios.get(
+      'https://blog-app-backend.onrender.com/api/articles/all'
+    )
+    commit('setBlogs', response.data)
+  },
+
+  async fetchBlogsById({ commit }, id) {
+    const response = await axios.get(
+      `https://blog-app-backend.onrender.com/api/articles/${id}`
+    )
+    commit('setBlog', response.data)
+  },
+
+  async addBlog({ commit }, newBlog) {
+    const response = await this.$axios.post(
+      'https://blog-app-backend.onrender.com/api/articles',
+      newBlog
+    )
+    commit('newBlog', response.data)
+  },
+
+  async deleteBlog({ commit }, id) {
+    await this.$axios.delete(
+      `https://blog-app-backend.onrender.com/api/articles/${id}`
+    )
+
+    commit('removeBlog', id)
+  },
+
+  async updateBlog({ commit }, updated) {
+    const response = await this.$axios.put(
+      `https://blog-app-backend.onrender.com/api/articles/${updated.id}`,
+      updated
+    )
+    commit('updateBlog', response.data)
+  },
+}
+
+const mutations = {
+  setBlogs: (state, blogs) => (state.blogs = blogs),
+  newBlog: (state, blog) => state.blogs.unshift(blog),
+  setBlog: (state, blog) => (state.blog = blog),
+  // newBlog: (state, blog) => state.blogs.unshift(blog),
+  removeBlog: (state, id) =>
+    (state.blogs = state.blogs.filter((blogg) => blogg._id !== id)),
+  // updateBlog: (state, blog) => {
+  //   const index = state.blogs.findIndex((blogg) => blogg._id === blog._id)
+
+  // }
+}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+}