Required changes to step 5-7

Author: evelinabe

src/routes/docs/tutorials/nuxt/step-5/+page.markdoc

@@ -1,51 +1,58 @@
 ---
 layout: tutorial
 title: Add navigation
-description: Add navigation to your Nuxt applicating.
+description: Add navigation to your app.
 step: 5
 ---
 
-In our app we want to show a navigation bar. We will add it to the `app.vue` component and use the `useUserSession` composable to show either:
-- a logout button if the user is logged in
-- or a login button if the user is not logged in
-
-Update the `app.vue` file:
+To help our users navigate the app we want it to have a navigation bar that's visible on all pages.
+We will use the `useUserSession` composable to show a login button when no user is logged in and a logout button when logged in.
+Open the `app.vue` file and add the navbar in the `template`, just above the `<NuxtPage />` tag.
 
 ```vue
-template>
-  <div>
-    <NuxtLayout>
-      <nav class="main-header u-padding-inline-end-0">
-        <h3 class="u-stretch eyebrow-heading-1">Idea Tracker</h3>
-        <div
-          class="main-header-end u-margin-inline-end-16"
-          v-if="user.isLoggedIn.value === true"
-        >
-          <p>
-            {{ user.current.value.providerUid }}
-          </p>
-          <button class="button" type="button" @click="user.logout()">
-            Logout
-          </button>
-        </div>
-        <NuxtLink v-else href="/login" class="button u-margin-inline-end-16"
-          >Login</NuxtLink
-        >
-      </nav>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
-</template>
+...
+  <NuxtLayout>
+
+  <!--- Navbar -->
+    <nav class="main-header u-padding-inline-end-0">
+      <h3 class="u-stretch eyebrow-heading-1">Idea Tracker</h3>
+
+      <!-- Email and logout button if logged in user -->
+      <div
+        class="main-header-end u-margin-inline-end-16"
+        v-if="user.isLoggedIn.value === true"
+      >
+        <p>
+          {{ user.current.value.providerUid }}
+        </p>
+        <button class="button" type="button" @click="user.logout()">
+          Logout
+        </button>
+      </div>
+
+      <!-- Login button if no user logged in -->
+      <NuxtLink v-else href="/login" class="button u-margin-inline-end-16">
+        Login
+      </NuxtLink>
+    </nav>
+    <NuxtPage />
+  </NuxtLayout>
+...
+```
 
+Add a new script below the template to get information about the user session from the `useUserSession`composable.
+
+```vue
 <script>
 export default {
   setup() {
-    const user = useUserSession();
-
+    const user = useUserSession(); //Access the user session composable
     return {
       user,
     };
   },
 };
 </script>
 ```
+
+You might wonder about the v-

src/routes/docs/tutorials/nuxt/step-6/+page.markdoc

@@ -4,7 +4,7 @@ title: Add database
 description: Add databases and queries for ideas in your Nuxt project.
 step: 6
 ---
-# Create collection {% #create-collection %}
+
 In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.
 
 {% only_dark %}
@@ -21,11 +21,14 @@ Create a new collection with the following attributes:
 | title       | String | Yes      |
 | description | String | No       |
 
-Change the collection's permissions settings to give any role access to it.
+Change the collection's permissions in the settings to give access.
+First, add an "Any" role and check the `READ` box.
+Next, add a "Users" role and give them access to create, update and delete.
 
 # Query methods {% #query-methods %}
-Now that you have a collection to hold ideas, we can read and write to it from our app.
-Create a new file in the composables directory, `src/composables/useIdeas.js` and add the following code to it.
+Now that you have a collection to hold ideas, we can use it to get, add and remove data from our app.
+We will create a new composable to manage the data fetching and their global state.
+Create a new file in the composables directory, `src/composables/useIdeas.js` and add the following code.
 
 ```js
 import { ID, Query } from "appwrite";
@@ -35,9 +38,12 @@ import { ref } from "vue";
 const IDEAS_DATABASE_ID = "YOUR_DATABASE_ID";
 const IDEAS_COLLECTION_ID = "YOUR_COLLECTION_ID";
 
-const current = ref(null);
+const current = ref(null); //Reference for the fetched data
 
 export const useIdeas = () => {
+
+  /* Fetch the 10 most recent ideas from the database
+     and passes the list to the current reference object */
   const init = async () => {
     const response = await database.listDocuments(
       IDEAS_DATABASE_ID,
@@ -46,6 +52,9 @@ export const useIdeas = () => {
     );
     current.value = response.documents;
   };
+
+  /* Add new idea to the database, add it to the current
+    object and remove the last to still have 10 ideas */
   const add = async (idea) => {
     const response = await database.createDocument(
       IDEAS_DATABASE_ID,
@@ -54,12 +63,10 @@ export const useIdeas = () => {
       idea
     );
     current.value = [response, ...current.value].slice(0, 10);
-  };
 
   const remove = async (id) => {
     await database.deleteDocument(IDEAS_DATABASE_ID, IDEAS_COLLECTION_ID, id);
-    current.value = current.value.filter((idea) => idea.$id !== id);
-    await init(); // Refetch ideas to ensure we have 10 items
+    await init(); //Refetch ideas to ensure we have 10 items
   };
 
   return {