integration test basics + client webapp

2025-10-09 22:21:22 -04:00 · 2025-10-09 22:21:22 -04:00 · 48c45b79bd
commit 48c45b79bd
parent 8d987ee50e
40 changed files with 3951 additions and 35 deletions
--- a/client/.browserslistrc
+++ b/client/.browserslistrc
@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
--- a/client/.editorconfig
+++ b/client/.editorconfig
@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/client/.eslintrc-auto-import.json
+++ b/client/.eslintrc-auto-import.json
@ -0,0 +1,82 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "DirectiveBinding": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "PropType": true,
+    "Ref": true,
+    "Slot": true,
+    "Slots": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "defineStore": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "onWatcherCleanup": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "storeToRefs": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useId": true,
+    "useModel": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "useTemplateRef": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}
--- a/client/.gitignore
+++ b/client/.gitignore
@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/client/README.md
+++ b/client/README.md
@ -0,0 +1,79 @@
+# Vuetify (Default)
+
+This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
+
+## ❗️ Important Links
+
+- 📄 [Docs](https://vuetifyjs.com/)
+- 🚨 [Issues](https://issues.vuetifyjs.com/)
+- 🏬 [Store](https://store.vuetifyjs.com/)
+- 🎮 [Playground](https://play.vuetifyjs.com/)
+- 💬 [Discord](https://community.vuetifyjs.com)
+
+## 💿 Install
+
+Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
+
+| Package Manager                                                | Command        |
+|---------------------------------------------------------------|----------------|
+| [yarn](https://yarnpkg.com/getting-started)                   | `yarn install` |
+| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install)     | `npm install`  |
+| [pnpm](https://pnpm.io/installation)                          | `pnpm install` |
+| [bun](https://bun.sh/#getting-started)                        | `bun install`  |
+
+After completing the installation, your environment is ready for Vuetify development.
+
+## ✨ Features
+
+- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
+- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
+- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
+- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
+- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
+
+These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
+
+## 💡 Usage
+
+This section covers how to start the development server and build your project for production.
+
+### Starting the Development Server
+
+To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
+
+```bash
+yarn dev
+```
+
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+> Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
+
+### Building for Production
+
+To build your project for production, use:
+
+```bash
+yarn build
+```
+
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+Once the build process is completed, your application will be ready for deployment in a production environment.
+
+## 💪 Support Vuetify Development
+
+This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
+
+- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
+- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
+- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
+- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
+- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
+- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
+- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
+
+## 📑 License
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2016-present Vuetify, LLC
--- a/client/eslint.config.js
+++ b/client/eslint.config.js
@ -0,0 +1,3 @@
+import vuetify from 'eslint-config-vuetify'
+
+export default vuetify()
--- a/client/index.html
+++ b/client/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bolts</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/client/jsconfig.json
+++ b/client/jsconfig.json
@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/client/package.json
+++ b/client/package.json
@ -0,0 +1,34 @@
+{
+  "name": "bolts-client",
+  "private": true,
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "5.2.7",
+    "@mdi/font": "7.4.47",
+    "pinia": "^3.0.3",
+    "vue": "^3.5.21",
+    "vue-router": "^4.5.1",
+    "vuetify": "^3.10.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint": "^9.35.0",
+    "eslint-config-vuetify": "^4.2.0",
+    "sass-embedded": "^1.92.1",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-fonts": "^1.4.0",
+    "unplugin-vue-components": "^29.0.0",
+    "unplugin-vue-router": "^0.15.0",
+    "vite": "^7.1.5",
+    "vite-plugin-vue-layouts-next": "^1.0.0",
+    "vite-plugin-vuetify": "^2.1.2"
+  },
+  "packageManager": "pnpm@8.14.3+sha1.872b21adeaae4e71acd5c551ba848d927d6aa446"
+}
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
--- a/client/public/favicon.ico
+++ b/client/public/favicon.ico
--- a/client/src/App.vue
+++ b/client/src/App.vue
@ -0,0 +1,9 @@
+<template>
+  <v-app>
+    <router-view />
+  </v-app>
+</template>
+
+<script setup>
+  //
+</script>
--- a/client/src/assets/logo.png
+++ b/client/src/assets/logo.png
--- a/client/src/assets/logo.svg
+++ b/client/src/assets/logo.svg
@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>
--- a/client/src/components/AppFooter.vue
+++ b/client/src/components/AppFooter.vue
@ -0,0 +1,82 @@
+<template>
+  <v-footer
+    app
+    height="40"
+  >
+    <a
+      v-for="item in items"
+      :key="item.title"
+      class="d-inline-block mx-2 social-link"
+      :href="item.href"
+      rel="noopener noreferrer"
+      target="_blank"
+      :title="item.title"
+    >
+      <v-icon
+        :icon="item.icon"
+        :size="item.icon === '$vuetify' ? 24 : 16"
+      />
+    </a>
+
+    <div
+      class="text-caption text-disabled"
+      style="position: absolute; right: 16px;"
+    >
+      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
+      —
+      <a
+        class="text-decoration-none on-surface"
+        href="https://vuetifyjs.com/about/licensing/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        MIT License
+      </a>
+    </div>
+  </v-footer>
+</template>
+
+<script setup>
+  const items = [
+    {
+      title: 'Vuetify Documentation',
+      icon: `$vuetify`,
+      href: 'https://vuetifyjs.com/',
+    },
+    {
+      title: 'Vuetify Support',
+      icon: 'mdi-shield-star-outline',
+      href: 'https://support.vuetifyjs.com/',
+    },
+    {
+      title: 'Vuetify X',
+      icon: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'],
+      href: 'https://x.com/vuetifyjs',
+    },
+    {
+      title: 'Vuetify GitHub',
+      icon: `mdi-github`,
+      href: 'https://github.com/vuetifyjs/vuetify',
+    },
+    {
+      title: 'Vuetify Discord',
+      icon: ['M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'],
+      href: 'https://community.vuetifyjs.com/',
+    },
+    {
+      title: 'Vuetify Reddit',
+      icon: `mdi-reddit`,
+      href: 'https://reddit.com/r/vuetifyjs',
+    },
+  ]
+</script>
+
+<style scoped lang="sass">
+  .social-link :deep(.v-icon)
+    color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
+    text-decoration: none
+    transition: .2s ease-in-out
+
+    &:hover
+      color: rgba(25, 118, 210, 1)
+</style>
--- a/client/src/components/HelloWorld.vue
+++ b/client/src/components/HelloWorld.vue
@ -0,0 +1,90 @@
+<template>
+  <v-container class="fill-height" max-width="900">
+    <div>
+      <v-img
+        class="mb-4"
+        height="150"
+        src="@/assets/logo.png"
+      />
+
+      <div class="mb-8 text-center">
+        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
+        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+      </div>
+
+      <v-row>
+        <v-col cols="12">
+          <v-card
+            class="py-4"
+            color="surface-variant"
+            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
+            prepend-icon="mdi-rocket-launch-outline"
+            rounded="lg"
+            variant="tonal"
+          >
+            <template #image>
+              <v-img position="top right" />
+            </template>
+
+            <template #title>
+              <h2 class="text-h5 font-weight-bold">
+                Get started
+              </h2>
+            </template>
+
+            <template #subtitle>
+              <div class="text-subtitle-1">
+                Change this page by updating <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>components/HelloWorld.vue</v-kbd>.
+              </div>
+            </template>
+          </v-card>
+        </v-col>
+
+        <v-col v-for="link in links" :key="link.href" cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            :href="link.href"
+            :prepend-icon="link.icon"
+            rel="noopener noreferrer"
+            rounded="lg"
+            :subtitle="link.subtitle"
+            target="_blank"
+            :title="link.title"
+            variant="tonal"
+          />
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
+</template>
+
+<script setup>
+  const links = [
+    {
+      href: 'https://vuetifyjs.com/',
+      icon: 'mdi-text-box-outline',
+      subtitle: 'Learn about all things Vuetify in our documentation.',
+      title: 'Documentation',
+    },
+    {
+      href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
+      icon: 'mdi-star-circle-outline',
+      subtitle: 'Explore available framework Features.',
+      title: 'Features',
+    },
+    {
+      href: 'https://vuetifyjs.com/components/all',
+      icon: 'mdi-widgets-outline',
+      subtitle: 'Discover components in the API Explorer.',
+      title: 'Components',
+    },
+    {
+      href: 'https://discord.vuetifyjs.com',
+      icon: 'mdi-account-group-outline',
+      subtitle: 'Connect with Vuetify developers.',
+      title: 'Community',
+    },
+  ]
+</script>
--- a/client/src/components/README.md
+++ b/client/src/components/README.md
@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import MyComponent from '@/components/MyComponent.vue'
+</script>
+```
--- a/client/src/layouts/README.md
+++ b/client/src/layouts/README.md
@ -0,0 +1,5 @@
+# Layouts
+
+Layouts are reusable components that wrap around pages. They are used to provide a consistent look and feel across multiple pages.
+
+Full documentation for this feature can be found in the Official [vite-plugin-vue-layouts-next](https://github.com/loicduong/vite-plugin-vue-layouts-next) repository.
--- a/client/src/layouts/default.vue
+++ b/client/src/layouts/default.vue
@ -0,0 +1,11 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+
+  <AppFooter />
+</template>
+
+<script setup>
+  //
+</script>
--- a/client/src/main.js
+++ b/client/src/main.js
@ -0,0 +1,23 @@
+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+// Styles
+import 'unfonts.css'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')
--- a/client/src/pages/README.md
+++ b/client/src/pages/README.md
@ -0,0 +1,5 @@
+# Pages
+
+Vue components created in this folder will automatically be converted to navigatable routes.
+
+Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository.
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@ -0,0 +1,7 @@
+<template>
+  <HelloWorld />
+</template>
+
+<script setup>
+  //
+</script>
--- a/client/src/plugins/README.md
+++ b/client/src/plugins/README.md
@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.
--- a/client/src/plugins/index.js
+++ b/client/src/plugins/index.js
@ -0,0 +1,17 @@
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+import pinia from '@/stores'
+import router from '@/router'
+
+export function registerPlugins (app) {
+  app
+    .use(vuetify)
+    .use(router)
+    .use(pinia)
+}
--- a/client/src/plugins/vuetify.js
+++ b/client/src/plugins/vuetify.js
@ -0,0 +1,19 @@
+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'system',
+  },
+})
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@ -0,0 +1,36 @@
+/**
+ * router/index.ts
+ *
+ * Automatic routes for `./src/pages/*.vue`
+ */
+
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+import { setupLayouts } from 'virtual:generated-layouts'
+import { routes } from 'vue-router/auto-routes'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: setupLayouts(routes),
+})
+
+// Workaround for https://github.com/vitejs/vite/issues/11804
+router.onError((err, to) => {
+  if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
+    if (localStorage.getItem('vuetify:dynamic-reload')) {
+      console.error('Dynamic import error, reloading page did not fix it', err)
+    } else {
+      console.log('Reloading page to fix dynamic import error')
+      localStorage.setItem('vuetify:dynamic-reload', 'true')
+      location.assign(to.fullPath)
+    }
+  } else {
+    console.error(err)
+  }
+})
+
+router.isReady().then(() => {
+  localStorage.removeItem('vuetify:dynamic-reload')
+})
+
+export default router
--- a/client/src/stores/README.md
+++ b/client/src/stores/README.md
@ -0,0 +1,5 @@
+# Store
+
+Pinia stores are used to store reactive state and expose actions to mutate it.
+
+Full documentation for this feature can be found in the Official [Pinia](https://pinia.esm.dev/) repository.
--- a/client/src/stores/app.js
+++ b/client/src/stores/app.js
@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})
--- a/client/src/stores/index.js
+++ b/client/src/stores/index.js
@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()
--- a/client/src/styles/README.md
+++ b/client/src/styles/README.md
@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.
--- a/client/src/styles/settings.scss
+++ b/client/src/styles/settings.scss
@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );
--- a/client/vite.config.mjs
+++ b/client/vite.config.mjs
@ -0,0 +1,80 @@
+// Plugins
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import Fonts from 'unplugin-fonts/vite'
+import Layouts from 'vite-plugin-vue-layouts-next'
+import Vue from '@vitejs/plugin-vue'
+import VueRouter from 'unplugin-vue-router/vite'
+import { VueRouterAutoImports } from 'unplugin-vue-router'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+// Utilities
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    VueRouter(),
+    Layouts(),
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    Vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'src/styles/settings.scss',
+      },
+    }),
+    Components(),
+    Fonts({
+      google: {
+        families: [{
+          name: 'Roboto',
+          styles: 'wght@100;300;400;500;700;900',
+        }],
+      },
+    }),
+    AutoImport({
+      imports: [
+        'vue',
+        VueRouterAutoImports,
+        {
+          pinia: ['defineStore', 'storeToRefs'],
+        },
+      ],
+      eslintrc: {
+        enabled: true,
+      },
+      vueTemplate: true,
+    }),
+  ],
+  optimizeDeps: {
+    exclude: [
+      'vuetify',
+      'vue-router',
+      'unplugin-vue-router/runtime',
+      'unplugin-vue-router/data-loaders',
+      'unplugin-vue-router/data-loaders/basic',
+    ],
+  },
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('src', import.meta.url)),
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
+  },
+  server: {
+    port: 3000,
+  },
+})
--- a/src/main/java/dev/mduchene/App.java
+++ b/src/main/java/dev/mduchene/App.java
@ -2,9 +2,6 @@ package dev.mduchene;

 public class App {
  public static void main(String[] args) {
-    System.setProperty("org.jooq.no-tips", "true");
-    System.setProperty("org.jooq.no-logo", "true");
-
    Db db =
        Db.builder()
            .url("jdbc:postgresql://127.0.0.1:5432/bolts")
--- a/src/main/java/dev/mduchene/Db.java
+++ b/src/main/java/dev/mduchene/Db.java
@ -4,18 +4,19 @@ import com.zaxxer.hikari.HikariConfig;
 import com.zaxxer.hikari.HikariDataSource;
 import java.sql.Connection;
 import java.sql.SQLException;
+import java.sql.Statement;
+
 import org.jooq.SQLDialect;
 import org.jooq.conf.RenderQuotedNames;
 import org.jooq.conf.Settings;
 import org.jooq.impl.DSL;

-public class Db {
+public class Db implements AutoCloseable {
  private HikariDataSource dataSource;
  private org.jooq.DSLContext dsl;

  private Db() {}

-
  public static Builder builder() {
    return new Builder();
  }
@ -27,7 +28,6 @@ public class Db {

    private Builder() {}

-
    public Builder url(String url) {
      this.url = url;
      return this;
@ -44,6 +44,9 @@ public class Db {
    }

    public Db build() {
+      System.setProperty("org.jooq.no-tips", "true");
+      System.setProperty("org.jooq.no-logo", "true");
+
      Db db = new Db();
      HikariConfig config = new HikariConfig();
      config.setJdbcUrl(url);
@ -66,15 +69,12 @@ public class Db {
  public Connection getConnection() throws Exception {
    Connection connection = dataSource.getConnection();
    connection.setAutoCommit(false);
+    connection.setSchema("public");
    return connection;
  }

-  public void run(String query) {
-    try (Connection connection = getConnection()) {
-      run(connection, query);
-    } catch (Exception e) {
-      throw new RuntimeException(e);
-    }
+  public void close() {
+    dataSource.close();
  }

  public void run(Connection connection, String query) {
--- a/src/main/java/dev/mduchene/ResourceFileLister.java
+++ b/src/main/java/dev/mduchene/ResourceFileLister.java
@ -8,7 +8,6 @@ import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.Paths;
 import java.util.List;
-import java.util.stream.Collectors;
 import java.util.stream.Stream;

 public class ResourceFileLister {
--- a/src/main/java/dev/mduchene/Server.java
+++ b/src/main/java/dev/mduchene/Server.java
@ -9,7 +9,13 @@ import java.sql.Connection;

 public class Server {
  private Javalin app;
-  private Db db;
+  private final Db db;
+  private final int port;
+
+  private Server(Db db, int port) {
+    this.db = db;
+    this.port = port;
+  }

  public static Builder builder() {
    return new Builder();
@ -66,7 +72,7 @@ public class Server {
          throw new RuntimeException("error");
        });

-    app.start(3001);
+    app.start(port);
    return this;
  }

@ -81,6 +87,7 @@ public class Server {

  public static class Builder {
    private Db db;
+    private int port = 3001;

    private Builder() {}

@ -89,10 +96,13 @@ public class Server {
      return this;
    }

+    public Builder port(int port) {
+      this.port = port;
+      return this;
+    }
+
    public Server build() {
-      Server server = new Server();
-      server.db = this.db;
-      return server;
+      return new Server(db, port);
    }
  }
 }
--- a/src/main/resources/migrations/20250920-create-migration.sql
+++ b/src/main/resources/migrations/20250920-create-migration.sql
@ -1,6 +1,6 @@
-create table _migrations (
+create table public._migrations (
    name varchar(255) primary key,
    executedAt timestamp,
-    base int(1),
-    content longtext
+    base boolean,
+    content text
 )
--- a/src/test/java/dev/mduchene/BasicHttpCallTest.java
+++ b/src/test/java/dev/mduchene/BasicHttpCallTest.java
@ -1,12 +1,20 @@
 package dev.mduchene;

+import com.fasterxml.jackson.databind.JsonNode;
+import org.junit.jupiter.api.Assertions;
 import org.junit.jupiter.api.Test;
 import org.junit.jupiter.api.extension.ExtendWith;

+import java.net.http.HttpResponse;
+
+import static dev.mduchene.TestUtil.*;
+import static org.junit.jupiter.api.Assertions.*;
+
@ExtendWith(BoltsIntegrationTest.class)
 public class BasicHttpCallTest {
  @Test
  void test() {
-get("http://localhost:7000/health");
+    HttpResponse<JsonNode> res = get("/");
+    assertEquals(200, res.statusCode());
  }
 }
--- a/src/test/java/dev/mduchene/BoltsIntegrationTest.java
+++ b/src/test/java/dev/mduchene/BoltsIntegrationTest.java
@ -1,31 +1,40 @@
 package dev.mduchene;

-import org.junit.jupiter.api.extension.*;
-
 import java.sql.Connection;
+import java.sql.Statement;
+import org.junit.jupiter.api.extension.*;

 public class BoltsIntegrationTest
    implements BeforeAllCallback, BeforeEachCallback, AfterEachCallback, AfterAllCallback {
+  public static final int PORT = 4001;
+  public static final String BASE_URL = "http://localhost:" + PORT;

  private Server server;

  @Override
  public void beforeAll(ExtensionContext context) throws Exception {
-    Db db =
+    Db.Builder dbBuilder =
        Db.builder()
-            .url("jdbc:postgresql://127.0.0.1:5432/bolts_test")
+            .url("jdbc:postgresql://127.0.0.1:5432/bolts_test?currentSchema=public")
            .user("root")
-            .password("root")
+            .password("root");
+    Db db =
+        dbBuilder
            .build();

-    try (Connection connection = db.getConnection()) {
-        connection.createStatement().execute("DROP SCHEMA IF EXISTS public CASCADE;");
-        connection.createStatement().execute("CREATE SCHEMA public;");
+    try (Connection connection = db.getConnection();
+        Statement stmt = connection.createStatement()) {
+      stmt.executeUpdate("DROP SCHEMA IF EXISTS public CASCADE;");
+      stmt.executeUpdate("CREATE SCHEMA public;");
+      connection.commit();
    }

+    db.close();
+    db = dbBuilder.build();
+
    Migration.of(db).runBaseMigrations();

-    server = Server.builder().db(db).build().start();
+    server = Server.builder().db(db).port(4001).build().start();
  }

  @Override
--- a/src/test/java/dev/mduchene/TestUtil.java
+++ b/src/test/java/dev/mduchene/TestUtil.java
@ -1,8 +1,6 @@
 package dev.mduchene;

 import com.fasterxml.jackson.databind.JsonNode;
-
-import java.io.IOException;
 import java.net.URI;
 import java.net.http.HttpClient;
 import java.net.http.HttpRequest;
@ -10,8 +8,10 @@ import java.net.http.HttpResponse;

 public class TestUtil {
  public static HttpResponse<JsonNode> get(String url) {
-    UriBuilder.
-    HttpRequest request = HttpRequest.newBuilder().uri(URI.create(url)).GET().build();
+    StringBuilder sb = new StringBuilder();
+    sb.append(BoltsIntegrationTest.BASE_URL);
+    sb.append(url);
+    HttpRequest request = HttpRequest.newBuilder().uri(URI.create(sb.toString())).GET().build();

    try (var client = HttpClient.newHttpClient()) {
      return client.send(request, JsonBodyHandler.getInstance());