Update to hono and vue3

.gitignore

@@ -2,3 +2,10 @@
 node_modules/
 npm-debug.log
 .env
+
+# moon
+.moon/cache
+.moon/docker
+
+# pandacss
+styled-system

.moon/toolchain.yml

@@ -0,0 +1,79 @@
+# https://moonrepo.dev/docs/config/toolchain
+$schema: 'https://moonrepo.dev/schemas/toolchain.json'
+
+# Extend and inherit an external configuration file. Must be a valid HTTPS URL or file system path.
+# extends: './shared/toolchain.yml'
+
+# Configures Node.js within the toolchain. moon manages its own version of Node.js
+# instead of relying on a version found on the host machine. This ensures deterministic
+# and reproducible builds across any machine.
+node:
+  # The version to use. Must be a semantic version that includes major, minor, and patch.
+  # We suggest using the latest active LTS version: https://nodejs.org/en/about/releases
+  version: '18.17.1'
+
+  # The package manager to use when managing dependencies.
+  # Accepts "npm" (default), "pnpm", or "yarn".
+  packageManager: 'pnpm'
+
+  # The version of the package manager (above) to use.
+  pnpm: {}
+
+  # Add `node.version` as a constraint in the root `package.json` `engines`.
+  addEnginesConstraint: true
+
+  # Dedupe dependencies after the lockfile has changed.
+  dedupeOnLockfileChange: true
+
+  # Version format to use when syncing dependencies within the project's `package.json`.
+  # dependencyVersionFormat: 'workspace'
+
+  # Infer and automatically create moon tasks from `package.json` scripts, per project.
+  # BEWARE: Tasks and scripts are not 1:1 in functionality, so please refer to the documentation.
+  inferTasksFromScripts: true
+
+  # Sync a project's `dependsOn` as dependencies within the project's `package.json`.
+  syncProjectWorkspaceDependencies: true
+
+  # Sync `node.version` to a 3rd-party version manager's config file.
+  # Accepts "nodenv" (.node-version), "nvm" (.nvmrc), or none.
+  # syncVersionManagerConfig: 'nvm'
+
+# Configures how moon integrates with TypeScript.
+typescript:
+  # When `syncProjectReferences` is enabled and a dependent project reference
+  # *does not* have a `tsconfig.json`, automatically create one.
+  createMissingConfig: true
+
+  # Name of `tsconfig.json` file in each project root.
+  # projectConfigFileName: 'tsconfig.json'
+
+  # Name of `tsconfig.json` file in the workspace root.
+  # rootConfigFileName: 'tsconfig.json'
+
+  # Name of the config file in the workspace root that defines shared compiler
+  # options for all project reference based config files.
+  # rootOptionsConfigFileName: 'tsconfig.options.json'
+
+  # Update a project's `tsconfig.json` to route the `outDir` compiler option
+  # to moon's `.moon/cache` directory.
+  routeOutDirToCache: true
+
+  # Sync a project's `dependsOn` as project references within the
+  # project's `tsconfig.json` and the workspace root `tsconfig.json`.
+  syncProjectReferences: true
+
+  # Sync a project's project references as import aliases to the `paths`
+  # compiler option in each applicable project.
+  syncProjectReferencesToPaths: true
+
+# Configures Rust within the toolchain.
+rust:
+  # The Rust toolchain to use. Must be a semantic version that includes major, minor, and patch.
+  version: '1.70.0'
+
+  # List of Cargo binaries to install globally and make available to tasks.
+  bins: []
+
+  # Sync the configured version above as a channel to the root `rust-toolchain.toml` config.
+  syncToolchainConfig: false

.moon/workspace.yml

@@ -0,0 +1,29 @@
+# https://moonrepo.dev/docs/config/workspace
+$schema: 'https://moonrepo.dev/schemas/workspace.json'
+
+# Require a specific version of moon while running commands, otherwise fail.
+# versionConstraint: '>=1.0.0'
+
+# Extend and inherit an external configuration file. Must be a valid HTTPS URL or file system path.
+# extends: './shared/workspace.yml'
+
+# REQUIRED: A map of all projects found within the workspace, or a list or file system globs.
+# When using a map, each entry requires a unique project ID as the map key, and a file system
+# path to the project folder as the map value. File paths are relative from the workspace root,
+# and cannot reference projects located outside the workspace boundary.
+projects:
+  client: 'apps/client'
+  server: 'apps/server'
+
+# Configures the version control system to utilize within the workspace. A VCS
+# is required for determining touched (added, modified, etc) files, calculating file hashes,
+# computing affected files, and much more.
+vcs:
+  # The client to use when managing the repository.
+  # Accepts "git". Defaults to "git".
+  manager: 'git'
+
+  # The default branch (master/main/trunk) in the repository for comparing the
+  # local branch against. For git, this is is typically "master" or "main",
+  # and must include the remote prefix (before /).
+  defaultBranch: 'main'

README.md

@@ -5,8 +5,10 @@
 ## Technologies
 
 - [Deno.js](https://deno.land/)
+- [Hono](https://hono.dev/)
 - [Vue.js](https://vuejs.org/)
 - [AppWrite](https://appwrite.io/)
+- [Moon](https://moonrepo.dev/)
 
 ## Development
 
@@ -19,7 +21,7 @@
 Make sure everything is centralized in one place (`deps.ts`)
 
 ```shell
-$ deno cache server/deps.ts
+$ moon run server:deps
 ```
 
 After installation AppWrite, create `.env` in root folder and updated AppWrite environments.
@@ -33,33 +35,13 @@ APP_WRITE_API_KEY=
 For development, you need run command line:
 
 ```shell
-$ npm run dev
-```
-
-### About Vue Shopping Cart
+## backend
+$ moon run server:dev
 
-> Coming soon for development
+## frontend
+$ moon run client:dev
+```
 
-Vue shopping cart is a modern web app
-- It has a frontend (Vue.js) and a backend (Deno.js)
-- It has two roles: customer and manager
-- New users have only the customer role
-- **Customers** can:
-  - [x] Register into the system
-  - [x] Login into the system
-  - [x] List products
-  - [x] See the product details
-  - [x] Add the product into the cart
-  - [x] Remove the product from the cart
-  - Check out the cart
-  - List past orders
-- **Managers** can:
-  - Login into the system
-  - Add new products and categories
-  - Change the product stocks
-  - List products orders
-  - See order details
-  - Change order status
-  - List customers
-  - See customers details 
+## License
 
+MIT © [Dang Van Thanh](https://dangthanh.org)

apps/client/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/client/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

apps/client/README.md

@@ -0,0 +1,3 @@
+# Vue
+
+A Vue application using Vite, powered by Moon.

apps/client/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>S - Online Shopping</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

apps/client/moon.yml

@@ -0,0 +1,8 @@
+type: 'application'
+
+language: 'typescript'
+
+tasks:
+  dev:
+    command: 'vite dev'
+    local: true

apps/client/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@apps/client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "dependencies": {
+    "alova": "^2.13.1",
+    "pinia": "^2.1.6",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@pandacss/dev": "^0.15.4",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vue-tsc": "^1.8.15"
+  }
+}

apps/client/panda.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "@pandacss/dev";
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: ["./src/**/*.{js,jsx,ts,tsx,vue}"],
+
+  // Files to exclude
+  exclude: [],
+
+  // Useful for theme customization
+  theme: {
+    extend: {},
+  },
+
+  // The output directory for your css system
+  outdir: "styled-system",
+});

apps/client/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+}

apps/client/src/App.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <router-view/>
+</template>

apps/client/src/components/Product.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { css } from "../../styled-system/css";
+import { flex } from "../../styled-system/patterns";
+
+interface IProduct {
+  id: string;
+  description: string;
+  price: number;
+  title: string;
+  thumbnail: string;
+  rating: number;
+  category: string;
+  colors: string[];
+}
+
+defineProps<{
+  product: IProduct;
+}>();
+</script>
+
+<template>
+  <router-link
+    :to="`/product/${product.id}`"
+    :class="
+      flex({
+        w: 'full',
+        bgColor: 'white',
+        pb: '5',
+        direction: 'column',
+        overflow: 'hidden',
+      })
+    "
+  >
+    <div
+      :class="
+        css({
+          display: 'block',
+          pos: 'relative',
+          h: '64',
+          overflow: 'hidden',
+          bg: 'gray.100',
+          rounded: 'xl',
+          p: 6,
+        })
+      "
+    >
+      <img
+        :src="product.thumbnail"
+        loading="lazy"
+        :class="css({ w: 'full', h: 'full', objectFit: 'contain' })"
+      />
+    </div>
+    <div :class="css({ flex: '1' })">
+      <h2
+        :class="
+          css({
+            color: 'gray.900',
+            fontSize: 'base',
+            lineHeight: 'base',
+            fontWeight: 'medium',
+            mt: '3',
+            mb: '3',
+          })
+        "
+      >
+        {{ product.title }}
+      </h2>
+      <p
+        :class="
+          css({ mb: '3', fontSize: 'lg', lineHeight: 'lg', fontWeight: 'bold' })
+        "
+      >
+        $ {{ product.price }}
+      </p>
+
+      <div :class="flex({ align: 'center', gap: 2 })">
+        <template v-for="color in product.colors">
+          <div
+            :class="
+              css({
+                w: 5,
+                h: 5,
+                rounded: 'full',
+                borderWidth: '1px',
+                borderColor: 'gray.200',
+              })
+            "
+            :style="{ backgroundColor: color }"
+          ></div>
+        </template>
+      </div>
+    </div>
+  </router-link>
+</template>