Compare commits

..

4 Commits

Author SHA1 Message Date
Martin Švrčina
f26e490085 Exclude .claude/ local settings from version control
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-17 00:41:35 +01:00
Martin Švrčina
982b6d5fa6 Add NSwag for automatic TypeScript API client generation
- Replace Swashbuckle with NSwag.AspNetCore + NSwag.MSBuild
- Configure OpenAPI document in Program.cs via AddOpenApiDocument
- Add nswag.json: aspNetCoreToOpenApi → Axios TypeScript client
- Post-build target uses NSwagExe_Net80 to run on correct runtime
- Client generated to frontend/src/api/apiClient.ts (gitignored)
- Add axios to frontend dependencies

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-17 00:36:30 +01:00
Martin Švrčina
6b58dfa4e4 Add BaseModel and AppDbContext with auto timestamps
- BaseModel in Domain.Common with Id, Created, Updated, Deleted fields
- AppDbContext in Infrastructure.Persistence overrides SaveChanges/Async
  to automatically set Created/Updated via ChangeTracker
- Added EF Core 8 and Pomelo.EntityFrameworkCore.MySql 8 packages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-17 00:28:31 +01:00
Martin Švrčina
6cad42dbac 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
37 changed files with 3710 additions and 0 deletions

10
.gitignore vendored
View File

@ -19,6 +19,11 @@ appsettings.Local.json
publish/ publish/
out/ out/
# ========================
# Generated API client (regenerated on each backend build)
# ========================
frontend/src/api/
# ======================== # ========================
# Vue / Node # Vue / Node
# ======================== # ========================
@ -41,6 +46,11 @@ yarn-error.log*
*.swp *.swp
*.swo *.swo
# ========================
# Claude Code local settings
# ========================
.claude/
# ======================== # ========================
# OS # OS
# ======================== # ========================

48
CLAUDE.md Normal file
View File

@ -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.

48
ClaudeTest.sln Normal file
View File

@ -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

View File

@ -0,0 +1,27 @@
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<InvariantGlobalization>true</InvariantGlobalization>
</PropertyGroup>
<ItemGroup>
<ProjectReference Include="..\ClaudeTest.Application\ClaudeTest.Application.csproj" />
<ProjectReference Include="..\ClaudeTest.Infrastructure\ClaudeTest.Infrastructure.csproj" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="NSwag.AspNetCore" Version="14.*" />
<PackageReference Include="NSwag.MSBuild" Version="14.*">
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>
</ItemGroup>
<Target Name="NSwag" AfterTargets="Build">
<Exec Command="$(NSwagExe_Net80) run nswag.json /variables:Configuration=$(Configuration)" WorkingDirectory="$(ProjectDir)" />
</Target>
</Project>

View File

@ -0,0 +1,6 @@
@ClaudeTest.API_HostAddress = http://localhost:5203
GET {{ClaudeTest.API_HostAddress}}/weatherforecast/
Accept: application/json
###

View File

@ -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();
}
}

View File

@ -0,0 +1,22 @@
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
builder.Services.AddOpenApiDocument(config =>
{
config.Title = "ClaudeTest API";
config.Version = "v1";
});
var app = builder.Build();
if (app.Environment.IsDevelopment())
{
app.UseOpenApi();
app.UseSwaggerUi();
}
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();

View File

@ -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"
}
}
}
}

View File

@ -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; }
}

View File

@ -0,0 +1,9 @@
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}

View File

@ -0,0 +1,85 @@
{
"runtime": "Net80",
"defaultVariables": null,
"documentGenerator": {
"aspNetCoreToOpenApi": {
"project": "ClaudeTest.API.csproj",
"documentName": "v1",
"msBuildProjectExtensionsPath": null,
"configuration": null,
"runtime": null,
"targetFramework": null,
"noBuild": true,
"msBuildOutputPath": null,
"verbose": false,
"workingDirectory": null,
"aspNetCoreEnvironment": null,
"output": null,
"newLineBehavior": "Auto"
}
},
"codeGenerators": {
"openApiToTypeScriptClient": {
"className": "{controller}Client",
"moduleName": "",
"namespace": "",
"typeScriptVersion": 4.3,
"template": "Axios",
"promiseType": "Promise",
"httpClass": "HttpClient",
"withCredentials": false,
"useSingletonProvider": false,
"injectionTokenType": "OpaqueToken",
"rxJsVersion": 6.0,
"dateTimeType": "Date",
"nullValue": "Undefined",
"generateClientClasses": true,
"generateClientInterfaces": true,
"generateOptionalParameters": true,
"exportTypes": true,
"wrapDtoExceptions": false,
"exceptionClass": "ApiException",
"clientBaseClass": null,
"wrapResponses": false,
"wrapResponseMethods": [],
"generateResponseClasses": true,
"responseClass": "SwaggerResponse",
"protectedMethods": [],
"configurationClass": null,
"useTransformOptionsMethod": false,
"useTransformResultMethod": false,
"generateDtoTypes": true,
"operationGenerationMode": "MultipleClientsFromOperationId",
"includedOperationIds": [],
"excludedOperationIds": [],
"markOptionalProperties": true,
"generateCloneMethod": false,
"typeStyle": "Class",
"enumStyle": "Enum",
"useLeafType": false,
"classTypes": [],
"extendedClasses": [],
"extensionCode": null,
"generateDefaultValues": true,
"excludedTypeNames": [],
"excludedParameterNames": [],
"handleReferences": false,
"generateTypeCheckFunctions": false,
"generateConstructorInterface": true,
"convertConstructorInterfaceData": false,
"importRequiredTypes": true,
"useGetBaseUrlMethod": false,
"baseUrlTokenName": "API_BASE_URL",
"queryNullValue": "",
"useAbortSignal": false,
"inlineNamedDictionaries": false,
"inlineNamedAny": false,
"includeHttpContext": false,
"templateDirectory": null,
"serviceHost": null,
"serviceSchemes": null,
"output": "../../frontend/src/api/apiClient.ts",
"newLineBehavior": "Auto"
}
}
}

View File

@ -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>

View File

@ -0,0 +1,9 @@
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<ImplicitUsings>enable</ImplicitUsings>
<Nullable>enable</Nullable>
</PropertyGroup>
</Project>

View File

@ -0,0 +1,9 @@
namespace ClaudeTest.Domain.Common;
public abstract class BaseModel
{
public int Id { get; set; }
public DateTime Created { get; set; }
public DateTime Updated { get; set; }
public DateTime? Deleted { get; set; }
}

View File

@ -0,0 +1,19 @@
<Project Sdk="Microsoft.NET.Sdk">
<ItemGroup>
<ProjectReference Include="..\ClaudeTest.Application\ClaudeTest.Application.csproj" />
<ProjectReference Include="..\ClaudeTest.Domain\ClaudeTest.Domain.csproj" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.EntityFrameworkCore" Version="8.*" />
<PackageReference Include="Pomelo.EntityFrameworkCore.MySql" Version="8.*" />
</ItemGroup>
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<ImplicitUsings>enable</ImplicitUsings>
<Nullable>enable</Nullable>
</PropertyGroup>
</Project>

View File

@ -0,0 +1,42 @@
using ClaudeTest.Domain.Common;
using Microsoft.EntityFrameworkCore;
namespace ClaudeTest.Infrastructure.Persistence;
public class AppDbContext : DbContext
{
public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
{
}
public override int SaveChanges()
{
SetTimestamps();
return base.SaveChanges();
}
public override Task<int> SaveChangesAsync(CancellationToken cancellationToken = default)
{
SetTimestamps();
return base.SaveChangesAsync(cancellationToken);
}
private void SetTimestamps()
{
var entries = ChangeTracker.Entries<BaseModel>();
foreach (var entry in entries)
{
switch (entry.State)
{
case EntityState.Added:
entry.Entity.Created = DateTime.UtcNow;
entry.Entity.Updated = DateTime.UtcNow;
break;
case EntityState.Modified:
entry.Entity.Updated = DateTime.UtcNow;
break;
}
}
}
}

2
frontend/env.d.ts vendored Normal file
View File

@ -0,0 +1,2 @@
/// <reference types="vite/client" />
/// <reference types="vite-plugin-vue-layouts-next/client" />

View File

@ -0,0 +1,3 @@
import vuetify from 'eslint-config-vuetify'
export default vuetify()

13
frontend/index.html Normal file
View File

@ -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>

2902
frontend/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

38
frontend/package.json Normal file
View File

@ -0,0 +1,38 @@
{
"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",
"axios": "^1.13.6",
"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"
}
}
}

BIN
frontend/public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

18
frontend/src/App.vue Normal file
View File

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 526 B

View File

@ -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>

View File

@ -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>
```

23
frontend/src/main.ts Normal file
View File

@ -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')

View File

@ -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.

View File

@ -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)
}

View File

@ -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',
},
})

View File

@ -0,0 +1,3 @@
# Styles
This directory is for configuring the styles of the application.

View File

@ -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
// );

View File

@ -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/*"]
}
}
}

11
frontend/tsconfig.json Normal file
View File

@ -0,0 +1,11 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}

View File

@ -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"]
}
}

50
frontend/vite.config.mts Normal file
View File

@ -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,
},
})