first commit

Author: harrytran998

.env.example

@@ -0,0 +1,11 @@
+VITE_BASE_API_URL=localhost:4000
+PORT=3000
+NODE_ENV=development
+VITE_NODE_ENV=development
+VITE_ENV=development
+
+VITE_BASE_API_URL=https://api.sampleapis.com
+VITE_HOST=http://localhost:3000
+VITE_COOKIE_DOMAIN=localhost
+VITE_APP_VERSION=0.0.1
+VITE_E2E_ENABLE=0

.eslintrc.cjs

@@ -0,0 +1,19 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:@tanstack/eslint-plugin-query/recommended",
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+    'vue/multi-word-component-names': 0
+  }
+}

.gitignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.env
+.yarn/install-state.gz

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

.prototools

@@ -0,0 +1 @@
+node = "~22"

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

README.en.md

@@ -0,0 +1,82 @@
+# Techmely Vue3 Academy - Free youtube
+
+Thank [hieuhani](https://github.com/hieuhani) for [techgoda](https://github.com/hieuhani/techgoda) project & [publiz](https://github.com/hieuhani/publiz) API for me do this course.
+
+## **We cover the fundamentals, like:**
+
+- Setting up Vue 3 project using Vite
+- Integrating VueDevTools with Vue js 3
+- Routing with Vue Router and File Based Routing with unplugin-vue-router
+- Vue Component and Composable Design with the Composition API
+- State management with Pinia
+- Modern Javascript (ES2023/ESNext)
+- User permissions & Route Guards
+- Data and File Storage, plus Authentication with Firebase
+- Automatic code review with CodeRabbit
+- Linting/Formatting with ESLint + Prettier
+- Consuming REST APIs
+- Application architecture and best practices
+- Error handling and monitoring
+
+## **We also dive into practical real world features and how to implement them quickly:**
+
+- Using OpenAI with some prompts to get some key take-aways from articles.
+- Robust and beautiful components with TailwindCSS and ShadCN Vue
+- Data filtering and searching strategies across multiple resources (articles, jobs, tags)
+- Forms and Validation with Autoform + Zod
+- Auto saving on edits to inline content
+- Pagination and Infinite scroll support
+- Real time commenting
+- Analytics and events tracking with Google Analytics 4, Google Tag Manager, and Sentry.
+
+## **Vuejs API we will use**
+
+### **Global & General API**
+
+- [app.directive](https://vuejs.org/api/application.html#app-directive)
+- [app.provide](https://vuejs.org/api/application.html#app-provide)
+- [app.config.errorHandler](https://vuejs.org/api/application.html#app-config-errorhandler)
+- [app.config.performance](https://vuejs.org/api/application.html#app-config-performance)
+- [nexttick](https://vuejs.org/api/general.html#nexttick)
+- [defineComponent](https://vuejs.org/api/general.html#definecomponent)
+- [defineProps & defineEmits](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)
+- [defineExpose](https://vuejs.org/api/general.html#defineexpose)
+
+### **Composition API**
+
+- [ref](https://vuejs.org/api/reactivity-core.html#ref)
+- [reactive](https://vuejs.org/api/reactivity-core.html#reactive)
+- [computed](https://vuejs.org/api/reactivity-core.html#computed)
+- [watchEffect](https://vuejs.org/api/reactivity-core.html#watcheffect)
+- [watch](https://vuejs.org/api/reactivity-core.html#watch)
+- [effectScope](https://vuejs.org/api/reactivity-advanced.html#effectscope)
+- [Lifecycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html)
+- [Dependency Injection](https://vuejs.org/api/composition-api-dependency-injection.html)
+
+By completing the Vue 3 Techmely, you will be able to land any Vue.js related job or optimize/improve your own projects!
+
+Requirements You should be familiar with JavaScript, HTML, basic CSS, and have fundamental knowledge of Vue.js (specifically with the Composition API).
+
+You could check out our Vuejs courses for FREE: https://www.youtube.com/watch?v=Vg9n_YRGPIY&list=PLwJIrGynFq9B_BQJZJi-ikWDDkYKVUpM5
+
+
+## Project Setup
+
+```sh
+bun i
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+bun run dev
+```
+
+### ENV Variables
+
+Make sure to provide the env variables listed in the `.env.example` file along with their values.
+
+
+```
+
+```

README.md

@@ -0,0 +1,83 @@
+# Techmely Vue3 Academy - Free youtube
+
+Cảm ơn [hieuhani](https://github.com/hieuhani) vì project [techgoda](https://github.com/hieuhani/techgoda) & [publiz](https://github.com/hieuhani/publiz) API đã giúp em hoàn thành course này.
+
+## **We cover the fundamentals, like:**
+
+- Dựng base project với Vue 3 sử dụng Vite
+- Tích hợp VueDevTools
+- Routing với Vue Router và File Based Routing với unplugin-vue-router
+- Vue Component và Composable Design với Composition API
+- State management với Pinia
+- Dùng Modern Javascript (ES2023/ESNext)
+- User permissions & Route Guards
+- Data và File Storage, cộng với Authentication với Firebase
+- Tự động code review bằng CodeRabbit AI
+- Linting/Formatting với ESLint + Prettier
+- Consuming REST APIs
+- Vận dụng các kiến thức thực tế trong dự án
+- Error handling và monitoring
+
+## **Cùng nhau làm các tính năng trong thực tế một cách nhanh chóng:**
+
+- Sử dụng OpenAI với một vài prompts để lấy các thông tin tóm tắt quan trọng của bài viết, bài tìm việc...
+- Sử dụng các component tích hợp sẵn và đẹp mắt với TailwindCSS và ShadCN Vue
+- Lọc/Tìm kiếm dữ liệu với danh sách bài viết, bài đăng công việc, tags
+- Forms và Validation với Autoform + Zod
+- Tự động lưu bài viết trong quá trình viết nội dung
+- Phân trang và Infinite scroll
+- Real time commenting
+- Analytics và events tracking với Google Analytics 4, Google Tag Manager, và Sentry.
+
+## **Vuejs API ta sẽ xử dụng**
+
+### **Global & General API**
+
+- [app.directive](https://vuejs.org/api/application.html#app-directive)
+- [app.provide](https://vuejs.org/api/application.html#app-provide)
+- [app.config.errorHandler](https://vuejs.org/api/application.html#app-config-errorhandler)
+- [app.config.performance](https://vuejs.org/api/application.html#app-config-performance)
+- [nexttick](https://vuejs.org/api/general.html#nexttick)
+- [defineComponent](https://vuejs.org/api/general.html#definecomponent)
+- [defineProps & defineEmits](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)
+- [defineExpose](https://vuejs.org/api/general.html#defineexpose)
+
+### **Composition API**
+
+- [ref](https://vuejs.org/api/reactivity-core.html#ref)
+- [reactive](https://vuejs.org/api/reactivity-core.html#reactive)
+- [computed](https://vuejs.org/api/reactivity-core.html#computed)
+- [watchEffect](https://vuejs.org/api/reactivity-core.html#watcheffect)
+- [watch](https://vuejs.org/api/reactivity-core.html#watch)
+- [effectScope](https://vuejs.org/api/reactivity-advanced.html#effectscope)
+- [Lifecycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html)
+- [Dependency Injection](https://vuejs.org/api/composition-api-dependency-injection.html)
+
+
+Khi hoàn thành khoá học Vue3 của Techmely, bạn sẽ có khẳ năng tìm được công việc với Vuejs ngoài thực tế bởi những kiến thức, kỹ năng được chia sẻ trong khoá học.
+
+Khoá học yêu cầu bạn nên có nên tảng cơ bản với Javascript, HTML, CSS và đặc biệt là kiến thức cơ bản về Vuejs(đặc biệt là Composition API).
+
+Bạn có thể xem qua khoá Vuejs của Techmely FREE trên [kênh Youtube của team](https://www.youtube.com/watch?v=Vg9n_YRGPIY&list=PLwJIrGynFq9B_BQJZJi-ikWDDkYKVUpM5)
+
+
+## Project Setup
+
+```bash
+bun install
+```
+
+### Compile + Hot-Reload cho Development
+
+```bash
+bun run dev
+```
+
+### ENV Variables
+
+Chắc chắn rằng bạn tạo ra 1 file `.env` chứa các env variables như file `.env.example`. 
+
+
+```bash
+cp .env.example .env
+```

app.config.ts

@@ -0,0 +1,5 @@
+export default {
+  author: {
+    name: 'Techmely'
+  }
+}

auto-imports.d.ts

@@ -0,0 +1,74 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useGlobalStore: typeof import('./src/stores/global')['useGlobalStore']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}