Scaffold project structure: .NET 8 Clean Architecture + Vue 3 Vuetify 3

- Solution with API, Application, Domain, Infrastructure projects - Clean Architecture project references configured - Vue 3 + Vuetify 3 + TypeScript frontend scaffolded Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-17 00:21:58 +01:00 · 2026-03-17 00:21:58 +01:00 · 6cad42dbac
commit 6cad42dbac
parent 9536baf5ca
32 changed files with 651 additions and 0 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -0,0 +1,48 @@
+# claude-test
+
+A Facebook Events replacement webapp for a private friend group.
+
+## Stack
+
+- **Backend:** .NET 8 Web API, Clean Architecture, EF Core 8, FluentValidation, JWT auth
+- **Database:** MySQL
+- **Frontend:** Vue 3 (Vite), Vuetify 3
+- **Version control:** Gitea at https://git.svrcina.eu/martin/claude-test.git
+
+## Project Structure (planned)
+
+```
+claude-test/
+├── backend/
+│   ├── ClaudeTest.API/           # Controllers, middleware, DI config
+│   ├── ClaudeTest.Application/   # Services, DTOs, validators
+│   ├── ClaudeTest.Domain/        # Entities, domain interfaces
+│   └── ClaudeTest.Infrastructure/# EF Core, repositories, email
+├── frontend/                     # Vue 3 + Vuetify 3 app
+└── CLAUDE.md
+```
+
+## Conventions
+
+- REST API with consistent JSON responses and HTTP status codes
+- EF Core code-first migrations (never edit migrations manually)
+- DTOs for all API input/output (never expose domain entities directly)
+- FluentValidation for all request validation
+- Async/await throughout the backend
+- Vue 3 Composition API (`<script setup>`) only — no Options API
+- Pinia for frontend state management
+
+## Deployment
+
+- **Development:** run natively — .NET CLI, `vite dev`, local MySQL
+- **Production/testing:** Docker Compose with 3 containers:
+  - `api` — .NET 8 Web API
+  - `frontend` — nginx serving built Vue app
+  - `db` — MySQL
+- **Server:** same machine as Gitea (already running Docker)
+- **Reverse proxy:** nginx running on the host, proxying to Docker containers
+
+## Development Approach
+
+This project is also a learning experience for working effectively with Claude.
+When starting a new feature, use `/plan` to align on approach before writing code.
--- a/ClaudeTest.sln
+++ b/ClaudeTest.sln
@ -0,0 +1,48 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.0.31903.59
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "backend", "backend", "{2A81C792-29A3-41A0-A14D-73C49594C7D5}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ClaudeTest.API", "backend\ClaudeTest.API\ClaudeTest.API.csproj", "{8EB876F6-4A9E-4FE3-8A40-F4DF078930E6}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ClaudeTest.Application", "backend\ClaudeTest.Application\ClaudeTest.Application.csproj", "{14BB106A-A7B2-4A0C-BCBF-15DD9CE38A43}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ClaudeTest.Domain", "backend\ClaudeTest.Domain\ClaudeTest.Domain.csproj", "{0CE64603-B27D-4D4E-8A80-908A1D04DE8C}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ClaudeTest.Infrastructure", "backend\ClaudeTest.Infrastructure\ClaudeTest.Infrastructure.csproj", "{E49FFA0A-E5A5-4934-9709-883BC8F557F7}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{8EB876F6-4A9E-4FE3-8A40-F4DF078930E6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{8EB876F6-4A9E-4FE3-8A40-F4DF078930E6}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{8EB876F6-4A9E-4FE3-8A40-F4DF078930E6}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{8EB876F6-4A9E-4FE3-8A40-F4DF078930E6}.Release|Any CPU.Build.0 = Release|Any CPU
+		{14BB106A-A7B2-4A0C-BCBF-15DD9CE38A43}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{14BB106A-A7B2-4A0C-BCBF-15DD9CE38A43}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{14BB106A-A7B2-4A0C-BCBF-15DD9CE38A43}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{14BB106A-A7B2-4A0C-BCBF-15DD9CE38A43}.Release|Any CPU.Build.0 = Release|Any CPU
+		{0CE64603-B27D-4D4E-8A80-908A1D04DE8C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{0CE64603-B27D-4D4E-8A80-908A1D04DE8C}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{0CE64603-B27D-4D4E-8A80-908A1D04DE8C}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{0CE64603-B27D-4D4E-8A80-908A1D04DE8C}.Release|Any CPU.Build.0 = Release|Any CPU
+		{E49FFA0A-E5A5-4934-9709-883BC8F557F7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{E49FFA0A-E5A5-4934-9709-883BC8F557F7}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{E49FFA0A-E5A5-4934-9709-883BC8F557F7}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{E49FFA0A-E5A5-4934-9709-883BC8F557F7}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(NestedProjects) = preSolution
+		{8EB876F6-4A9E-4FE3-8A40-F4DF078930E6} = {2A81C792-29A3-41A0-A14D-73C49594C7D5}
+		{14BB106A-A7B2-4A0C-BCBF-15DD9CE38A43} = {2A81C792-29A3-41A0-A14D-73C49594C7D5}
+		{0CE64603-B27D-4D4E-8A80-908A1D04DE8C} = {2A81C792-29A3-41A0-A14D-73C49594C7D5}
+		{E49FFA0A-E5A5-4934-9709-883BC8F557F7} = {2A81C792-29A3-41A0-A14D-73C49594C7D5}
+	EndGlobalSection
+EndGlobal
--- a/backend/ClaudeTest.API/ClaudeTest.API.csproj
+++ b/backend/ClaudeTest.API/ClaudeTest.API.csproj
@ -0,0 +1,19 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <InvariantGlobalization>true</InvariantGlobalization>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\ClaudeTest.Application\ClaudeTest.Application.csproj" />
+    <ProjectReference Include="..\ClaudeTest.Infrastructure\ClaudeTest.Infrastructure.csproj" />
+  </ItemGroup>
+
+</Project>
--- a/backend/ClaudeTest.API/ClaudeTest.API.http
+++ b/backend/ClaudeTest.API/ClaudeTest.API.http
@ -0,0 +1,6 @@
+@ClaudeTest.API_HostAddress = http://localhost:5203
+
+GET {{ClaudeTest.API_HostAddress}}/weatherforecast/
+Accept: application/json
+
+###
--- a/backend/ClaudeTest.API/Controllers/WeatherForecastController.cs
+++ b/backend/ClaudeTest.API/Controllers/WeatherForecastController.cs
@ -0,0 +1,32 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace ClaudeTest.API.Controllers;
+
+[ApiController]
+[Route("[controller]")]
+public class WeatherForecastController : ControllerBase
+{
+    private static readonly string[] Summaries = new[]
+    {
+        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+    };
+
+    private readonly ILogger<WeatherForecastController> _logger;
+
+    public WeatherForecastController(ILogger<WeatherForecastController> logger)
+    {
+        _logger = logger;
+    }
+
+    [HttpGet(Name = "GetWeatherForecast")]
+    public IEnumerable<WeatherForecast> Get()
+    {
+        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+        {
+            Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
+            TemperatureC = Random.Shared.Next(-20, 55),
+            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
+        })
+        .ToArray();
+    }
+}
--- a/backend/ClaudeTest.API/Program.cs
+++ b/backend/ClaudeTest.API/Program.cs
@ -0,0 +1,25 @@
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+
+builder.Services.AddControllers();
+// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
+builder.Services.AddEndpointsApiExplorer();
+builder.Services.AddSwaggerGen();
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (app.Environment.IsDevelopment())
+{
+    app.UseSwagger();
+    app.UseSwaggerUI();
+}
+
+app.UseHttpsRedirection();
+
+app.UseAuthorization();
+
+app.MapControllers();
+
+app.Run();
--- a/backend/ClaudeTest.API/Properties/launchSettings.json
+++ b/backend/ClaudeTest.API/Properties/launchSettings.json
@ -0,0 +1,41 @@
+{
+  "$schema": "http://json.schemastore.org/launchsettings.json",
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:48574",
+      "sslPort": 44379
+    }
+  },
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "applicationUrl": "http://localhost:5203",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "applicationUrl": "https://localhost:7231;http://localhost:5203",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}
--- a/backend/ClaudeTest.API/WeatherForecast.cs
+++ b/backend/ClaudeTest.API/WeatherForecast.cs
@ -0,0 +1,12 @@
+namespace ClaudeTest.API;
+
+public class WeatherForecast
+{
+    public DateOnly Date { get; set; }
+
+    public int TemperatureC { get; set; }
+
+    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+
+    public string? Summary { get; set; }
+}
--- a/backend/ClaudeTest.API/appsettings.json
+++ b/backend/ClaudeTest.API/appsettings.json
@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}
--- a/backend/ClaudeTest.Application/ClaudeTest.Application.csproj
+++ b/backend/ClaudeTest.Application/ClaudeTest.Application.csproj
@ -0,0 +1,13 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <ItemGroup>
+    <ProjectReference Include="..\ClaudeTest.Domain\ClaudeTest.Domain.csproj" />
+  </ItemGroup>
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+
+</Project>
--- a/backend/ClaudeTest.Domain/ClaudeTest.Domain.csproj
+++ b/backend/ClaudeTest.Domain/ClaudeTest.Domain.csproj
@ -0,0 +1,9 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+
+</Project>
--- a/backend/ClaudeTest.Infrastructure/ClaudeTest.Infrastructure.csproj
+++ b/backend/ClaudeTest.Infrastructure/ClaudeTest.Infrastructure.csproj
@ -0,0 +1,14 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <ItemGroup>
+    <ProjectReference Include="..\ClaudeTest.Application\ClaudeTest.Application.csproj" />
+    <ProjectReference Include="..\ClaudeTest.Domain\ClaudeTest.Domain.csproj" />
+  </ItemGroup>
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+
+</Project>
--- a/frontend/env.d.ts
+++ b/frontend/env.d.ts
@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-vue-layouts-next/client" />
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@ -0,0 +1,3 @@
+import vuetify from 'eslint-config-vuetify'
+
+export default vuetify()
--- a/frontend/index.html
+++ b/frontend/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>Welcome to Vuetify 4</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,37 @@
+{
+  "name": "vuetify-project",
+  "private": true,
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "^5.2.10",
+    "@mdi/font": "7.4.47",
+    "vue": "^3.5.30",
+    "vuetify": "^4.0.2"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.5",
+    "@types/node": "^24.12.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.0",
+    "npm-run-all2": "^8.0.4",
+    "sass-embedded": "^1.98.0",
+    "typescript": "~5.9.3",
+    "unplugin-fonts": "^1.4.0",
+    "vite": "^8.0.0",
+    "vite-plugin-vuetify": "^2.1.3",
+    "vue-tsc": "^3.2.5"
+  },
+  "overrides": {
+    "unplugin-fonts": {
+      "vite": "^8.0.0"
+    }
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -0,0 +1,18 @@
+<template>
+  <v-app>
+    <v-main>
+      <HelloWorld />
+    </v-main>
+    <v-btn
+      class="ma-2"
+      icon="mdi-theme-light-dark"
+      location="top right"
+      position="absolute"
+      @click="$vuetify.theme.cycle()"
+    />
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>
--- a/frontend/src/assets/logo.png
+++ b/frontend/src/assets/logo.png
--- a/frontend/src/assets/logo.svg
+++ b/frontend/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/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@ -0,0 +1,94 @@
+<template>
+  <v-container class="fill-height d-flex flex-column justify-center" max-width="1100">
+    <div>
+      <v-img
+        class="mb-4 font-weight-bold"
+        height="150"
+        src="@/assets/logo.png"
+      />
+
+      <div class="mb-8 text-center">
+        <div class="text-body-medium font-weight-light mb-n1">Welcome to</div>
+        <div class="text-display-medium font-weight-bold">Vuetify</div>
+      </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"
+            rounded="lg"
+            variant="tonal"
+          >
+            <template #prepend>
+              <v-avatar class="ml-2 mr-4" icon="mdi-rocket-launch-outline" size="60" variant="tonal" />
+            </template>
+
+            <template #image>
+              <v-img position="top right" />
+            </template>
+
+            <template #title>
+              <div class="my-title my-uppercase text-headline-medium font-weight-bold">Get started</div>
+            </template>
+
+            <template #subtitle>
+              <div class="text-body-large">
+                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"
+            rel="noopener noreferrer"
+            rounded="lg"
+            :subtitle="link.subtitle"
+            target="_blank"
+            :title="link.title"
+            variant="tonal"
+          >
+            <template #prepend>
+              <v-avatar class="ml-2 mr-4" :icon="link.icon" size="60" variant="tonal" />
+            </template>
+          </v-card>
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+  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/frontend/src/components/README.md
+++ b/frontend/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/frontend/src/main.ts
+++ b/frontend/src/main.ts
@ -0,0 +1,23 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+// Styles
+import 'unfonts.css'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')
--- a/frontend/src/plugins/README.md
+++ b/frontend/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/frontend/src/plugins/index.ts
+++ b/frontend/src/plugins/index.ts
@ -0,0 +1,15 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Types
+import type { App } from 'vue'
+
+// Plugins
+import vuetify from './vuetify'
+
+export function registerPlugins (app: App) {
+  app.use(vuetify)
+}
--- a/frontend/src/plugins/vuetify.ts
+++ b/frontend/src/plugins/vuetify.ts
@ -0,0 +1,19 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Composables
+import { createVuetify } from 'vuetify'
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+
+import 'vuetify/styles'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'system',
+  },
+})
--- a/frontend/src/styles/README.md
+++ b/frontend/src/styles/README.md
@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.
--- a/frontend/src/styles/settings.scss
+++ b/frontend/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/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
--- a/frontend/vite.config.mts
+++ b/frontend/vite.config.mts
@ -0,0 +1,50 @@
+import { fileURLToPath, URL } from 'node:url'
+import Vue from '@vitejs/plugin-vue'
+import Fonts from 'unplugin-fonts/vite'
+import { defineConfig } from 'vite'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    Vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'src/styles/settings.scss',
+      },
+    }),
+    Fonts({
+      fontsource: {
+        families: [
+          {
+            name: 'Roboto',
+            weights: [100, 300, 400, 500, 700, 900],
+            styles: ['normal', 'italic'],
+          },
+        ],
+      },
+    }),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('src', import.meta.url)),
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
+  },
+  server: {
+    port: 3000,
+  },
+})