Update README.md

README.md

@@ -2,13 +2,42 @@
 
 This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-## Recommended IDE Setup
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+# Vue Notes App
+
+A notes app built using:
+
+[Vue.js 3](https://vuejs.org/)
+[Quasar Framework](https://quasar.dev/),
+[Pinia](https://pinia.vuejs.org/),
+[VueUse](https://vueuse.org/),
+[Vue-multiselect](https://vue-multiselect.js.org/)
+
+
+###  Project Goals
+
+* Create, Read, Update and Delete (CRUD) notes.
+
+* Create, Read, Update and Delete (CRUD) note tags.
+
+* Link notes by tags.
 
+* Search for notes by note title or content.
 
-## References:
 
-- [Getting started with Vue](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
+### To get started with this project
+
+* Clone the repository: git clone https://github.com/MoustafaShaaban/Vue_Notes_App.git
+
+* Change directory to Vue_Notes_App directory ``` cd Vue_Notes_App ```
+
+* Install the packages ``` npm install ```
+
+* Run the development server ``` npm run dev ```
+
+* Open the web browser and go to ` http://localhost:5173/ ` to see the results.
+
+
+## Recommended IDE Setup
 
-- [Vuejs 3 Search Bar Using Computed Properties](https://softauthor.com/vuejs-composition-api-search-bar-using-computed-properties/)
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

src/views/AboutView.vue

@@ -21,6 +21,9 @@
             <a :class="$q.dark.isActive ? 'text-white' : 'text-dark'" href="https://vuejs.org/" target="_blank">Vue.js
               3</a>
           </q-item>
+          <q-item clickable v-ripple>
+            <a :class="$q.dark.isActive ? 'text-white' : 'text-dark'" href="https://pinia.vuejs.org//" target="_blank">Pinia</a>
+          </q-item>
           <q-item clickable v-ripple>
             <a :class="$q.dark.isActive ? 'text-white' : 'text-dark'" href="https://vueuse.org/"
               target="_blank">VueUse</a>