From 6f44f13e97101725ad7572f1a62f2f076c7dbcca Mon Sep 17 00:00:00 2001
From: Evelina Berg <evelina.berg@outlook.com>
Date: Wed, 18 Oct 2023 19:28:40 +0200
Subject: [PATCH] Update step 1-4

---
 .../docs/tutorials/nuxt/step-1/+page.markdoc  |  2 +
 .../docs/tutorials/nuxt/step-2/+page.markdoc  | 41 ++++------
 .../docs/tutorials/nuxt/step-3/+page.markdoc  |  6 +-
 .../docs/tutorials/nuxt/step-4/+page.markdoc  | 74 +++++++++++++------
 4 files changed, 72 insertions(+), 51 deletions(-)

diff --git a/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc
index 429f8698ab..b709a1a77e 100644
--- a/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc
@@ -3,6 +3,8 @@ layout: tutorial
 title: Build an ideas tracker with Nuxt
 description: Learn to build an idea tracker app with Appwrite and Nuxt with authentication, databases and collections, queries, pagination, and file storage.
 step: 1
+difficulty: beginner
+readtime: 12
 back: /docs
 ---
 
diff --git a/src/routes/docs/tutorials/nuxt/step-2/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-2/+page.markdoc
index d2d884fb00..9d419a6ef8 100644
--- a/src/routes/docs/tutorials/nuxt/step-2/+page.markdoc
+++ b/src/routes/docs/tutorials/nuxt/step-2/+page.markdoc
@@ -1,7 +1,7 @@
 ---
 layout: tutorial
-title: Build an ideas tracker with Nuxt
-description: Learn to build an idea tracker app with Appwrite and Nuxt
+title: Create app
+description: Create a Nuxt app project and integrate with Appwrite
 step: 2
 ---
 
@@ -9,7 +9,6 @@ step: 2
 
 Create a Nuxt app with the `npx init` command.
 
-
 ```sh
 npx nuxi@latest init ideas-tracker
 ```
@@ -28,19 +27,19 @@ You can start the development server to watch your app update in the browser as
 npm run dev
 ```
 
-# Pages and layouts for routing {% #pages-and-layout-for-routing %}
-
-In Nuxt, directories help organize the codebase and minimize boilerplate. The purpose is
-making it easy to find and manage different aspect of your application.
+# Setup files {% #setup-files %}
 
-The files added to the `pages` directory will automatically become a route. Nuxt will look for a layout (can be more than one) to accompany a page
-in the `layouts` directory. When these files have been created we can edit the `app.vue` file to render our pages. Now we will have a working app to verify our changes in the development server throughout the tutorial.
-As an additional step, by adding [Appwrite's Pink Design system]('https://pink.appwrite.io/') we will also have a global layout system to help with the layout.
+In Nuxt, directories help organize the codebase and minimize boilerplate.
+The purpose is making it easy to find and manage different aspect of your application.
 
+The files added to the `pages` directory will automatically become a route.
+Nuxt will look for a layout in the `layouts` directory to render a page layout.
+Without a layout file in this directory, the routing won't work
+When these files have been created the `app.vue` file needs to edited to render these pages instead of the standard welcome page.
+Then, we will have a working app where we can verify our changes in the browser throughout the tutorial.
+As an additional step, we will be adding [Appwrite's Pink Design system]('https://pink.appwrite.io/') to have a global design system to help with the layout.
 
-### 1. Add a page
-
-Create file `src/pages/index.vue` and add the following code:
+First, add a page by creating the file `src/pages/index.vue` and add the following code.
 
 ```vue
 <template>
@@ -50,10 +49,7 @@ Create file `src/pages/index.vue` and add the following code:
 </template>
 ```
 
-
-### 2. Add a default layout
-
- a file `src/layouts/default.vue` and insert the following code:
+Create the file `src/layouts/default.vue` to add the default layout.
 
 ```vue
 <template>
@@ -69,9 +65,7 @@ export default {
 </script>
 ```
 
-### 3. Edit app
-
-Go to `app.vue`, remove `NuxtWelcome`and insert `NuxtPage` wrapped in `NuxtLayout`
+Go to `app.vue`, remove `NuxtWelcome`and insert `<NuxtPage />` wrapped inside `<NuxtLayout>`.
 
 ```vue
 <template>
@@ -83,11 +77,8 @@ Go to `app.vue`, remove `NuxtWelcome`and insert `NuxtPage` wrapped in `NuxtLayou
 </template>
 ```
 
-
-### 4. Import layout
-
-Edit `nuxt.config.ts`to import Appwrite's design system to all pages and components.
-The classes will be ready to use in the templates through auto-import.
+To import Appwrite's design system to all pages and components, edit the file `nuxt.config.ts`.
+The layouts is then ready to be used in the templates with auto-import.
 
 ```ts
 export default defineNuxtConfig({
diff --git a/src/routes/docs/tutorials/nuxt/step-3/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-3/+page.markdoc
index a21113c08e..77353a4651 100644
--- a/src/routes/docs/tutorials/nuxt/step-3/+page.markdoc
+++ b/src/routes/docs/tutorials/nuxt/step-3/+page.markdoc
@@ -18,7 +18,8 @@ Head to the [Appwrite Console](https://cloud.appwrite.io/console).
 
 If this is your first time using Appwrite, create an account and create your first project.
 
-Then, under **Add a platform**, add a **Web app**. The **Hostname** should be localhost.
+Then, under **Add a platform**, add a **Web app**.
+The **Hostname** should be localhost.
 
 {% only_dark %}
 ![Add a platform](/images/docs/quick-starts/dark/add-platform.png)
@@ -31,7 +32,8 @@ You can skip optional steps.
 
 # Initialize Appwrite SDK {% #init-sdk %}
 
-To use Appwrite in our Nuxt app, we'll need to find our project ID. It is located in the **Settings** page.
+To use Appwrite in our Nuxt app, we'll need to find our project ID.
+It is located in the **Settings** page.
 
 {% only_dark %}
 ![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
diff --git a/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc
index f9b628585f..41c5f0ddc2 100644
--- a/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc
+++ b/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc
@@ -5,37 +5,41 @@ description: Add authentication to your Nuxt application using Appwrite Web SDK
 step: 4
 ---
 
-# Nuxt composables {% #nuxt-composables %}
+# Composables {% #composables %}
 
-Composables is a pattern in Nuxt to manage logic related to data fetching and global state management.
-Create a file `src/composables/useUserSession.js` in your composables directory. Add the following code:
+Composables is a design pattern in Vue and Nuxt to manage logic related to data fetching and global state management.
+You can think of a composable as a way to put pieces of code that do specific tasks into neat little boxes that you can use over and over again in you app.
+
+In the user session composable will put all the logic related to user authentication, such as login, logout and authentication status.
+It will be available for access in all pages and components.
+
+Create your composable for the user session logic by adding the file `src/composables/useUserSession.js`.
+Add the following code.
 
 ```js
 import { ID } from 'appwrite'
 import { ref } from 'vue'
 import { account } from '/appwrite'
 
-const current = ref(null)
-const isLoggedIn = ref(null)
+const current = ref(null) //Reference to the current user object
+const isLoggedIn = ref(null) //Reference to check user status
 
 export const useUserSession = () => {
   const register = async (email, password) => {
-    await account.create(ID.unique(), email, password)
-    await this.login(email, password)
+    await account.create(ID.unique(), email, password) //Interaction with the Appwrite backend
+    await this.login(email, password) //Login the newly created user
   }
 
   const login = async (email, password) => {
-    const authUser = await account.createEmailSession(email, password)
-    current.value = authUser
-    isLoggedIn.value = true
-    navigateTo('/ideas')
+    const authUser = await account.createEmailSession(email, password) //Interaction with the Appwrite backend
+    current.value = authUser //Passing user data to the current user reference
+    isLoggedIn.value = true //Setting user status to true
   }
 
   const logout = async () => {
-    await account.deleteSession('current')
-    current.value = null
-    isLoggedIn.value = false
-    navigateTo('/')
+    await account.deleteSession('current') //Interaction with the Appwrite backend
+    current.value = null //Clearing the current user data object
+    isLoggedIn.value = false //Setting user status to false
   }
   return {
     current,
@@ -44,16 +48,25 @@ export const useUserSession = () => {
     logout,
     register,
   }
-}
 ```
 
-Now, we can import the `useUserSession` composable in any page or component and use it to login, logout, register a user or keep track of the current user.
+The `useUserSession()` function is neatly packed and ready to be reused in our pages and components.
 
 # Login page {% #login-page %}
 
-We will start with building a login page to handle the user sessions.
+With the authentication functions handled, we can go on to build a simple login page.
+The user interactions will be handled in a form with two input fields for email and password.
+Underneath will be a button to login and a button to register a new user.
+
+The values from the inputs will be bound to a `v-model`.
+The `v-model`acts like a bridge between your input fields and your Javascript code.
+If you change the information with yout code, the input field also changes.
+And if you type something in the input field, the information in your code also updates.
+They are magically linked together.
 
-Create a new file `src/pages/index.vue` and add the following code.
+One thing to notice is that no import statements are needed
+
+Create the form by adding a new file `src/pages/index.vue` and put in the following code.
 
 ```vue
 <template>
@@ -67,6 +80,8 @@ Create a new file `src/pages/index.vue` and add the following code.
         <li class="form-item">
           <label class="label">Email</label>
           <div class="input-text-wrapper">
+
+            <!-- Input with v-model to link email field to script -->
             <input
               v-model="userData.email"
               type="email"
@@ -79,6 +94,8 @@ Create a new file `src/pages/index.vue` and add the following code.
         <li class="form-item">
           <label class="label">Password</label>
           <div class="input-text-wrapper">
+
+            <!-- Input with v-model to link password field to script -->
             <input
               v-model="userData.password"
               type="password"
@@ -91,6 +108,8 @@ Create a new file `src/pages/index.vue` and add the following code.
       </ul>
       <ul class="buttons-list u-margin-block-start-16">
         <li class="buttons-list-item">
+
+        <!-- Login button -->
           <button
             class="button is-small u-margin-inline-start-4"
             aria-label="Login"
@@ -100,6 +119,8 @@ Create a new file `src/pages/index.vue` and add the following code.
           </button>
         </li>
         <li class="buttons-list-item">
+
+        <!-- Register button -->
           <button
             class="button is-small is-secondary u-margin-inline-start-4"
             aria-label="Register account"
@@ -116,17 +137,21 @@ Create a new file `src/pages/index.vue` and add the following code.
 <script>
 export default {
   setup() {
+    //Accessing the user session composable
     const user = useUserSession();
 
+    //V-model object
     const userData = {
       email: "",
       password: "",
     };
 
+    //Event handler for logging in
     const handleLogin = async () => {
       await user.login(userData.email, userData.password);
     };
 
+    //Event handler for registrering
     const handleRegistration = async () => {
       await user.register(userData.email, userData.password);
     };
@@ -139,19 +164,19 @@ export default {
   },
 };
 </script>
-
-
 ```
 
-# User section on home page {% #user-section-on-home-page %}
+# Home page {% #home-page %}
 
-Finally, we will can modify the `src/pages/index.vue` to show a section for logged in users only:
+Users can now register and login to the app.
+Let's modify the home page in `src/pages/index.vue` to show the logged in users a secret message.
 
 ```vue
 <template>
   <div>
+    <!-- Visible if user is logged in -->
     <section v-if="user.isLoggedIn.value === true">
-      <h2>Submit Idea</h2>
+      <h2>Welcome!</h2>
     </section>
     <section>
       <h2>Hello, idea tracker!</h2>
@@ -162,6 +187,7 @@ Finally, we will can modify the `src/pages/index.vue` to show a section for logg
 <script>
 export default {
   setup() {
+    //Accessing the user session composable
     const user = useUserSession();
 
     return {