Initial commit

2024-11-25 08:40:14 +01:00 · 2024-11-25 08:40:14 +01:00 · 1547af6ae0
commit 1547af6ae0
53 changed files with 8270 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# DB
+db.sqlite
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+engine-strict=true
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
--- a/drizzle.config.ts
+++ b/drizzle.config.ts
@ -0,0 +1,10 @@
+import { defineConfig } from 'drizzle-kit';
+
+export default defineConfig({
+    out: './drizzle',
+    schema: './src/db/schema.ts',
+    dialect: 'sqlite',
+    dbCredentials: {
+        url: 'file:db.sqlite',
+    },
+});
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,33 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,51 @@
+{
+	"name": "three60",
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@types/d3-array": "^3.2.1",
+		"@types/d3-scale": "^4.0.8",
+		"@types/d3-shape": "^3.1.6",
+		"@types/eslint": "^9.6.0",
+		"autoprefixer": "^10.4.20",
+		"drizzle-kit": "^0.28.1",
+		"eslint": "^9.7.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-tailwindcss": "^0.6.5",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^3.4.9",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0",
+		"vite": "^5.0.3"
+	},
+	"dependencies": {
+		"@libsql/client": "^0.14.0",
+		"@node-rs/argon2": "^2.0.0",
+		"@oslojs/crypto": "^1.0.1",
+		"@oslojs/encoding": "^1.1.0",
+		"@tailwindcss/forms": "^0.5.9",
+		"@tailwindcss/typography": "^0.5.15",
+		"d3-array": "^3.2.4",
+		"d3-scale": "^4.0.2",
+		"d3-shape": "^3.2.0",
+		"drizzle-orm": "^0.36.3",
+		"layerchart": "^0.59.1"
+	}
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};
--- a/src/app.css
+++ b/src/app.css
@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -0,0 +1,19 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+
+import { Session } from "./lib/session/session";
+
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		interface Locals {
+			session: Session | null,
+			userId: number | null
+		}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export { };
--- a/src/app.html
+++ b/src/app.html
@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/src/db/index.ts
+++ b/src/db/index.ts
@ -0,0 +1,7 @@
+import { drizzle } from 'drizzle-orm/libsql';
+import * as schema from './schema';
+
+export const db = drizzle({
+    connection: 'file:db.sqlite',
+    schema
+});
--- a/src/db/schema.ts
+++ b/src/db/schema.ts
@ -0,0 +1,44 @@
+import { index, int, primaryKey, sqliteTable, text } from "drizzle-orm/sqlite-core";
+
+export const usersTable = sqliteTable("users_table", {
+    id: int().primaryKey({ autoIncrement: true }),
+    email: text().notNull().unique(),
+    password_hash: text().notNull(),
+});
+
+export const sessions = sqliteTable("sessions", {
+    token: text().notNull().primaryKey(),
+    userId: int().notNull().references(() => usersTable.id, { onDelete: "cascade" }),
+    expires: int().notNull(),
+});
+
+export const surveysTable = sqliteTable("surveys_table", {
+    id: int().primaryKey({ autoIncrement: true }),
+    title: text().notNull(),
+    description: text(),
+    owner: int().notNull().references(() => usersTable.id, { onDelete: "cascade" }),
+});
+
+export const surveySkillsTable = sqliteTable("survey_skills_table", {
+    id: int().primaryKey({ autoIncrement: true }),
+    surveyId: int().notNull().references(() => surveysTable.id, { onDelete: "cascade" }),
+    title: text().notNull(),
+    description: text(),
+})
+
+export const surveyAccessTable = sqliteTable("survey_access_table", {
+    id: int().primaryKey({ autoIncrement: true }),
+    surveyId: int().notNull().references(() => surveysTable.id, { onDelete: "cascade" }),
+    recepientEmail: text().notNull(),
+    accessToken: text().notNull(),
+}, (table) => ({
+    tokenIndex: index("token_index").on(table.accessToken),
+}));
+
+export const surveyAnswersTable = sqliteTable("survey_answers_table", {
+    participantId: int().notNull().references(() => surveyAccessTable.id, { onDelete: "cascade" }),
+    skillId: int().notNull().references(() => surveySkillsTable.id, { onDelete: "cascade" }),
+    rating: int().notNull(),
+}, (table) => ({
+    pk: primaryKey({ columns: [table.participantId, table.skillId] }),
+}));
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@ -0,0 +1,24 @@
+import type { Handle } from "@sveltejs/kit";
+
+import { deleteSessionTokenCookie, setSessionTokenCookie, validateSession } from "./lib/session/session";
+
+export const handle: Handle = async ({ event, resolve }) => {
+    const token = event.cookies.get("session") ?? null;
+    if (token === null) {
+        console.log("No session available")
+        event.locals.userId = null;
+        event.locals.session = null;
+        return resolve(event);
+    }
+
+    const session = await validateSession(token);
+    if (session !== null) {
+        setSessionTokenCookie(event, token, new Date(session.expires));
+    } else {
+        deleteSessionTokenCookie(event);
+    }
+
+    event.locals.session = session;
+    event.locals.userId = session?.userId ?? null;
+    return resolve(event);
+};
--- a/src/lib/SkillInput.svelte
+++ b/src/lib/SkillInput.svelte
@ -0,0 +1,49 @@
+<script lang="ts">
+	import InfoIcon from './components/icons/InfoIcon.svelte';
+
+	export type SkillProps = {
+		id: string;
+		title: string;
+		description: string | null;
+		value: number;
+	};
+	type Props = { skill: SkillProps };
+
+	let { skill = $bindable() }: Props = $props();
+</script>
+
+<label for={skill.id} class="justify-self-end"
+	>{skill.title}
+	<button popovertarget="description-{skill.id}" type="button" title="Show skill description"
+		><InfoIcon class="size-4 fill-lime-500" /></button
+	></label
+>
+<div class="justify-self-start">
+	<input
+		type="range"
+		id={skill.id}
+		name={skill.id}
+		min="0"
+		max="3"
+		step="0.5"
+		bind:value={skill.value}
+		class="w-80 justify-self-start"
+		list="values"
+	/>
+	<span class="ml-2">{skill.value}</span>
+</div>
+<datalist id="values">
+	<option value="0" label="0"></option>
+	<option value="1" label="1"></option>
+	<option value="2" label="2"></option>
+	<option value="3" label="3"></option>
+</datalist>
+
+<div
+	id="description-{skill.id}"
+	popover="auto"
+	class="border border-slate-400 p-4 backdrop:bg-black/30 backdrop:backdrop-blur-sm"
+>
+	<h2 class="mb-2 text-2xl">{skill.title}</h2>
+	<p>{skill.description}</p>
+</div>
--- a/src/lib/Skills.svelte
+++ b/src/lib/Skills.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+	import SkillInput, { type SkillProps } from './SkillInput.svelte';
+
+	type Props = { skills: SkillProps[] };
+
+	let { skills = $bindable() }: Props = $props();
+</script>
+
+<div class="mt-4 grid grid-cols-2 gap-2">
+	{#each skills as _, index}
+		<SkillInput bind:skill={skills[index]} />
+	{/each}
+</div>
--- a/src/lib/components/Diagram.svelte
+++ b/src/lib/components/Diagram.svelte
@ -0,0 +1,70 @@
+<script lang="ts">
+	import { scaleBand } from 'd3-scale';
+	import { curveLinearClosed } from 'd3-shape';
+	import { flatGroup } from 'd3-array';
+	import { Axis, Chart, Points, Spline, Svg } from 'layerchart';
+
+	const {
+		data
+	}: {
+		data: { skill: string; participant: number; rating: number | undefined }[];
+	} = $props();
+
+	const averageValues = flatGroup(data, (d) => d.skill).map(([skill, ratings]) => {
+		const actualRatings = ratings.filter((r) => r.rating !== undefined);
+		const avg = actualRatings.reduce((a, b) => a + (b.rating ?? 0), 0) / actualRatings.length;
+		return { skill, rating: avg };
+	});
+
+	const colors = [
+		'stroke-slate-300',
+		'stroke-violet-300',
+		'stroke-red-300',
+		'stroke-lime-300',
+		'stroke-blue-300',
+		'stroke-amber-300',
+		'stroke-stone-300',
+		'stroke-emerald-300',
+		'stroke-cyan-300',
+		'stroke-pink-300'
+	];
+</script>
+
+<div class="chart-container">
+	<Chart
+		{data}
+		x="skill"
+		xScale={scaleBand()}
+		y="rating"
+		yDomain={[0, 3]}
+		yPadding={[0, 10]}
+		padding={{ top: 32, bottom: 8 }}
+		radial
+	>
+		<Svg center>
+			<Axis
+				placement="radius"
+				grid={{ class: 'stroke-slate-950' }}
+				ticks={[0, 1, 2, 3]}
+				format={(d) => ''}
+			/>
+			<Axis placement="angle" grid={{ class: 'stroke-slate-950' }} />
+			{#each flatGroup(data, (d) => d.participant) as [participant, ratings], idx}
+				<Spline
+					data={ratings}
+					curve={curveLinearClosed}
+					class="{colors[idx % colors.length]} stroke-[2px]"
+				/>
+			{/each}
+			<Spline data={averageValues} curve={curveLinearClosed} class="stroke-lime-600 stroke-[4px]" />
+			<!-- <Points class="fill-red-900 stroke-slate-950" /> -->
+		</Svg>
+	</Chart>
+</div>
+
+<style>
+	.chart-container {
+		width: 30rem;
+		height: 30rem;
+	}
+</style>
--- a/src/lib/components/Link.svelte
+++ b/src/lib/components/Link.svelte
@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	const { class: cls, children, ...rest }: HTMLAnchorAttributes = $props();
+</script>
+
+<a class="text-sky-700 {cls}" {...rest}>{@render children?.()}</a>
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = {
+		title: string;
+	} & HTMLAttributes<HTMLElement>;
+
+	const { title, children }: Props = $props();
+</script>
+
+<nav class="mb-2 grid grid-cols-2 bg-indigo-800 p-3 text-white">
+	<h1 class="justify-self-start text-3xl">{title}</h1>
+	{@render children?.()}
+</nav>
--- a/src/lib/components/icons/CheckIcon.svelte
+++ b/src/lib/components/icons/CheckIcon.svelte
@ -0,0 +1,13 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="currentColor"
+	class="inline-block size-4 fill-lime-600"
+	aria-label="Answered"
+>
+	<path
+		fill-rule="evenodd"
+		d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+		clip-rule="evenodd"
+	/>
+</svg>
--- a/src/lib/components/icons/DuplicateIcon.svelte
+++ b/src/lib/components/icons/DuplicateIcon.svelte
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
+	<path
+		d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 0 1 3.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0 1 21 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 0 1 7.5 16.125V3.375Z"
+	/>
+	<path
+		d="M15 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 17.25 7.5h-1.875A.375.375 0 0 1 15 7.125V5.25ZM4.875 6H6v10.125A3.375 3.375 0 0 0 9.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V7.875C3 6.839 3.84 6 4.875 6Z"
+	/>
+</svg>
--- a/src/lib/components/icons/HomeIcon.svelte
+++ b/src/lib/components/icons/HomeIcon.svelte
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+	<path
+		d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z"
+	/>
+	<path
+		d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z"
+	/>
+</svg>
--- a/src/lib/components/icons/InfoIcon.svelte
+++ b/src/lib/components/icons/InfoIcon.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	let { class: cls }: { class?: string } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="currentColor"
+	class={cls ?? 'size-6'}
+>
+	<path
+		fill-rule="evenodd"
+		d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 0 1-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 0 1-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 0 1-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584ZM12 18a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+		clip-rule="evenodd"
+	/>
+</svg>
--- a/src/lib/components/icons/LinkIcon.svelte
+++ b/src/lib/components/icons/LinkIcon.svelte
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
+	<path
+		fill-rule="evenodd"
+		d="M19.902 4.098a3.75 3.75 0 0 0-5.304 0l-4.5 4.5a3.75 3.75 0 0 0 1.035 6.037.75.75 0 0 1-.646 1.353 5.25 5.25 0 0 1-1.449-8.45l4.5-4.5a5.25 5.25 0 1 1 7.424 7.424l-1.757 1.757a.75.75 0 1 1-1.06-1.06l1.757-1.757a3.75 3.75 0 0 0 0-5.304Zm-7.389 4.267a.75.75 0 0 1 1-.353 5.25 5.25 0 0 1 1.449 8.45l-4.5 4.5a5.25 5.25 0 1 1-7.424-7.424l1.757-1.757a.75.75 0 1 1 1.06 1.06l-1.757 1.757a3.75 3.75 0 1 0 5.304 5.304l4.5-4.5a3.75 3.75 0 0 0-1.035-6.037.75.75 0 0 1-.354-1Z"
+		clip-rule="evenodd"
+	/>
+</svg>
--- a/src/lib/components/icons/TrashIcon.svelte
+++ b/src/lib/components/icons/TrashIcon.svelte
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
+	<path
+		fill-rule="evenodd"
+		d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+		clip-rule="evenodd"
+	/>
+</svg>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/src/lib/queries.ts
+++ b/src/lib/queries.ts
@ -0,0 +1,34 @@
+import { eq, and, inArray } from "drizzle-orm";
+import { db } from "../db";
+import { surveyAccessTable, surveyAnswersTable, surveySkillsTable, surveysTable } from "../db/schema";
+
+export async function loadSurvey(id: number, ownerId: number) {
+    const survey = await db.select().from(surveysTable).where(and(eq(surveysTable.id, id), eq(surveysTable.owner, ownerId))).limit(1);
+    const participants = await db.select().from(surveyAccessTable).where(eq(surveyAccessTable.surveyId, id));
+    const skills = await db.select().from(surveySkillsTable).where(eq(surveySkillsTable.surveyId, id));
+    const answers = await db.select().from(surveyAnswersTable).where(inArray(surveyAnswersTable.participantId, participants.map(participant => participant.id)));
+
+    if (survey.length === 0) {
+        return null;
+    }
+
+    return {
+        id,
+        title: survey[0].title,
+        description: survey[0].description,
+        participants: participants.map(participant => ({
+            id: participant.id,
+            email: participant.recepientEmail,
+            accessToken: participant.accessToken,
+            answers: answers.filter(answer => answer.participantId === participant.id).map(answer => ({
+                skillId: answer.skillId,
+                rating: answer.rating
+            }))
+        })),
+        skills: skills.map(skill => ({
+            id: skill.id,
+            title: skill.title,
+            description: skill.description
+        }))
+    }
+}
--- a/src/lib/randomToken.ts
+++ b/src/lib/randomToken.ts
@ -0,0 +1,7 @@
+import { encodeBase32LowerCaseNoPadding } from "@oslojs/encoding";
+
+export function generateRandomToken() {
+    const randomBytes = new Uint8Array(20);
+    crypto.getRandomValues(randomBytes);
+    return encodeBase32LowerCaseNoPadding(randomBytes)
+}
--- a/src/lib/session/session.ts
+++ b/src/lib/session/session.ts
@ -0,0 +1,52 @@
+import { encodeBase32LowerCaseNoPadding } from '@oslojs/encoding';
+import { db } from '../../db';
+import { sessions } from '../../db/schema';
+import { eq, lt } from 'drizzle-orm';
+import type { RequestEvent } from '@sveltejs/kit';
+
+export type Session = {
+    userId: number;
+    expires: number; // Millisecond UNIX timestamp
+}
+
+export async function createSession(token: string, userId: number) {
+    const session = {
+        userId,
+        expires: Date.now() + 600 * 1000 // 600 seconds
+    }
+    await db.insert(sessions).values({ token, userId, expires: session.expires });
+    return session;
+
+}
+
+export async function validateSession(token: string) {
+    const session = await db.select().from(sessions).where(eq(sessions.token, token)).limit(1);
+    if (session[0] && session[0].expires > Date.now()) {
+        db.update(sessions).set({ expires: Date.now() + 600 * 1000 }).where(eq(sessions.token, token)); // refresh the session as long as the user is working in it
+        return session[0];
+    }
+    await db.delete(sessions).where(lt(sessions.expires, Date.now())); // clean up
+    return null;
+}
+
+export async function invalidateSession(token: string) {
+    await db.delete(sessions).where(eq(sessions.token, token));
+}
+
+export function setSessionTokenCookie(event: RequestEvent, token: string, expiresAt: Date): void {
+    event.cookies.set("session", token, {
+        httpOnly: true,
+        sameSite: "lax",
+        expires: expiresAt,
+        path: "/"
+    });
+}
+
+export function deleteSessionTokenCookie(event: RequestEvent): void {
+    event.cookies.set("session", "", {
+        httpOnly: true,
+        sameSite: "lax",
+        maxAge: 0,
+        path: "/"
+    });
+}
--- a/src/routes/(app)/+layout.server.ts
+++ b/src/routes/(app)/+layout.server.ts
@ -0,0 +1,8 @@
+import { redirect } from '@sveltejs/kit';
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = ({ locals, url, ...rest }) => {
+    if (!locals.userId) {
+        redirect(307, `/login?redirect_uri=${url.href}`);
+    }
+};
--- a/src/routes/(app)/+page.server.ts
+++ b/src/routes/(app)/+page.server.ts
@ -0,0 +1,33 @@
+import { error } from '@sveltejs/kit';
+import { db } from '../../db';
+import { surveyAccessTable, surveyAnswersTable, surveysTable } from '../../db/schema';
+import type { PageServerLoad } from './$types';
+
+import { eq, inArray, not, sql } from 'drizzle-orm';
+
+export const load: PageServerLoad = async ({ locals }) => {
+    if (!locals.userId) {
+        error(403, 'User is not logged in');
+    }
+    const mySurveys = await db.select().from(surveysTable).where(eq(surveysTable.owner, locals.userId));
+    const fillRates = await db.select({
+        surveyId: surveyAccessTable.surveyId,
+        filled: sql`count(distinct(${surveyAnswersTable.participantId}))`.mapWith(Number),
+        expected: sql`count(distinct(${surveyAccessTable.id}))`.mapWith(Number),
+    })
+        .from(surveyAccessTable)
+        .leftJoin(surveyAnswersTable, eq(surveyAccessTable.id, surveyAnswersTable.participantId))
+        .groupBy(surveyAccessTable.surveyId);
+
+    return {
+        surveys: mySurveys.map(survey => ({
+            id: survey.id,
+            title: survey.title,
+            description: survey.description,
+            fillRate: {
+                filled: fillRates.find(fillRate => fillRate.surveyId === survey.id)?.filled ?? 0,
+                expected: fillRates.find(fillRate => fillRate.surveyId === survey.id)?.expected ?? 0
+            }
+        }))
+    }
+}
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+	import Link from '$lib/components/Link.svelte';
+	import Navbar from '$lib/components/Navbar.svelte';
+	import CheckIcon from '$lib/components/icons/CheckIcon.svelte';
+	import DuplicateIcon from '$lib/components/icons/DuplicateIcon.svelte';
+</script>
+
+<Navbar title="Dashboard" />
+
+<div class="p-4">
+	<h2 class="text-2xl">Surveys you own</h2>
+	<ul class="ml-8 list-disc">
+		{#each data.surveys as survey}
+			<li class="grid grid-cols-2">
+				<div>
+					<Link href="/survey/{survey.id}">{survey.title}</Link>
+					<span class="mr-5 inline-block">
+						({survey.fillRate.filled}/{survey.fillRate.expected})
+						{#if survey.fillRate.filled === survey.fillRate.expected}
+							<CheckIcon />
+						{/if}
+					</span>
+				</div>
+				<div>
+					<Link
+						href="/survey/new?from={survey.id}"
+						class="ml-2 inline-block hover:bg-slate-200"
+						title="Duplicate survey"
+						aria-label="Duplicate survey"
+						><DuplicateIcon />
+					</Link>
+				</div>
+			</li>
+		{/each}
+	</ul>
+
+	<Link href="/survey/new">Create a new Survey</Link>
+</div>
--- a/src/routes/(app)/survey/[surveyId]/+page.server.ts
+++ b/src/routes/(app)/survey/[surveyId]/+page.server.ts
@ -0,0 +1,20 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { loadSurvey } from '$lib/queries';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+    const surveyId = parseInt(params.surveyId);
+
+    if (isNaN(surveyId)) {
+        error(400, 'Invalid survey ID');
+    }
+    if (!locals.userId) {
+        error(403, 'User is not logged in');
+    }
+
+    const surveyData = await loadSurvey(surveyId, locals.userId);
+    if (!surveyData) {
+        error(404, 'Survey not found');
+    }
+    return surveyData;
+}
--- a/src/routes/(app)/survey/[surveyId]/+page.svelte
+++ b/src/routes/(app)/survey/[surveyId]/+page.svelte
@ -0,0 +1,106 @@
+<script lang="ts">
+	import CheckIcon from '$lib/components/icons/CheckIcon.svelte';
+	import DuplicateIcon from '$lib/components/icons/DuplicateIcon.svelte';
+	import HomeIcon from '$lib/components/icons/HomeIcon.svelte';
+	import LinkIcon from '$lib/components/icons/LinkIcon.svelte';
+	import Navbar from '$lib/components/Navbar.svelte';
+	import Diagram from '$lib/components/Diagram.svelte';
+
+	import type { PageData } from './$types';
+	import TrashIcon from '$lib/components/icons/TrashIcon.svelte';
+	import { goto } from '$app/navigation';
+
+	let { data }: { data: PageData } = $props();
+
+	const diagramData = data.skills.flatMap((skill) =>
+		data.participants.map((participant) => ({
+			skill: skill.title,
+			participant: participant.id,
+			rating: participant.answers.find((answer) => answer.skillId === skill.id)?.rating
+		}))
+	);
+
+	function copyLinkToClipboard(link: string) {
+		navigator.clipboard.writeText(link);
+	}
+
+	let dialogRef: HTMLDialogElement | null = null;
+
+	async function deleteSurvey() {
+		await fetch('', {
+			method: 'DELETE'
+		});
+		goto('/');
+	}
+</script>
+
+<Navbar title={data.title}>
+	<div class="flex w-20 flex-row justify-self-end">
+		<a href="/" class="flex items-center" aria-label="Home" title="Home">
+			<HomeIcon />
+		</a>
+		<a
+			href="/survey/new?from={data.id}"
+			class="ml-2 flex items-center"
+			aria-label="Duplicate"
+			title="Duplicate"
+			><DuplicateIcon />
+		</a>
+		<button
+			onclick={() => {
+				dialogRef?.showModal();
+			}}
+			class="ml-2 inline-block"
+			aria-label="Delete"
+			title="Delete"
+			><TrashIcon />
+		</button>
+	</div>
+</Navbar>
+{#if data.description}
+	<div class="ml-4 text-xs text-slate-500">{data.description}</div>
+{/if}
+
+<h2 class="ml-2 mt-4 text-2xl">Participants</h2>
+<ul class="disc ml-4">
+	{#each data.participants as participant}
+		<li>
+			<span class="mr-5">
+				{participant.email}
+				{#if participant.answers.length > 0}
+					<CheckIcon />
+				{/if}
+			</span>
+			<button
+				aria-label="Copy link to clipboard"
+				class="text-sky-700"
+				title="Copy link to clipboard"
+				onclick={() => copyLinkToClipboard(`${window.location.origin}/${participant.accessToken}`)}
+			>
+				<LinkIcon />
+			</button>
+		</li>
+	{/each}
+</ul>
+
+<div class="grid grid-cols-1 justify-items-center">
+	<Diagram data={diagramData} />
+</div>
+
+<dialog
+	bind:this={dialogRef}
+	class="border-2 border-red-300 p-4 backdrop:bg-black/40 backdrop:backdrop-blur-sm"
+>
+	<h2 class="mb-4 text-2xl">Delete survey</h2>
+	<p>
+		Are you sure you want to delete the survey. <span class="font-bold text-red-400"
+			>This action cannot be undone.</span
+		>
+	</p>
+	<div class="mt-4 grid grid-cols-2 gap-2">
+		<button onclick={() => dialogRef?.close()} class="w-40 justify-self-end bg-slate-400"
+			>Cancel</button
+		>
+		<button class="w-40 bg-red-500" onclick={deleteSurvey}>Delete</button>
+	</div>
+</dialog>
--- a/src/routes/(app)/survey/[surveyId]/+server.ts
+++ b/src/routes/(app)/survey/[surveyId]/+server.ts
@ -0,0 +1,17 @@
+import { type RequestHandler } from "@sveltejs/kit";
+import { db } from "../../../../db";
+import { surveysTable } from "../../../../db/schema";
+import { eq } from "drizzle-orm";
+
+
+export const DELETE: RequestHandler = async ({ params }) => {
+    const surveyId = parseInt(params.surveyId ?? '');
+
+    if (isNaN(surveyId)) {
+        return new Response(null, { status: 400 });
+    }
+
+    await db.delete(surveysTable).where(eq(surveysTable.id, surveyId));
+
+    return new Response(null, { status: 204 });
+};
--- a/src/routes/(app)/survey/new/+page.server.ts
+++ b/src/routes/(app)/survey/new/+page.server.ts
@ -0,0 +1,59 @@
+import type { Actions, PageServerLoad } from './$types';
+import { error, redirect } from '@sveltejs/kit';
+import { surveyAccessTable, surveySkillsTable, surveysTable } from '../../../../db/schema';
+import { db } from '../../../../db';
+import { generateRandomToken } from '$lib/randomToken';
+import { loadSurvey } from '$lib/queries';
+
+export const load: PageServerLoad = async ({ url, locals }) => {
+    const baseSurveyId = url.searchParams.get('from');
+    if (baseSurveyId) {
+        const baseSurvey = await loadSurvey(parseInt(baseSurveyId), locals.userId ?? 0);
+        return baseSurvey;
+    }
+    return null;
+}
+
+
+export const actions = {
+    default: async (event) => {
+        const formData = await event.request.formData();
+
+        const participants = formData.getAll('participants').filter(email => !!email).map(email => email.toString());
+        const title = formData.get('title')?.toString();
+        const description = formData.get('description')?.toString();
+        const skillTitles = formData.getAll('skill');
+        const skillDescriptions = formData.getAll('skill-description');
+
+        if (!title) {
+            error(400, 'Title is required');
+        }
+        if (participants.length === 0) {
+            error(400, 'At least one email is required');
+        }
+        const owner = event.locals.userId;
+        if (!owner) {
+            error(400, 'User is not logged in');
+        }
+
+        const skills = skillTitles.flatMap((title, index) => !!title ? [({
+            title: title.toString(),
+            description: skillDescriptions[index].toString()
+        })] : []);
+
+        if (skills.length === 0) {
+            error(400, 'At least one skill is required');
+        }
+
+        const ids = await db.insert(surveysTable).values({ title, description, owner }).returning({ id: surveysTable.id });
+
+        const surveyId = ids[0].id;
+        for (const participant of participants) {
+            await db.insert(surveyAccessTable).values({ surveyId, recepientEmail: participant, accessToken: generateRandomToken() });
+        }
+        for (const skill of skills) {
+            await db.insert(surveySkillsTable).values({ surveyId, title: skill.title, description: skill.description });
+        }
+        redirect(303, `/survey/${surveyId}`);
+    }
+} satisfies Actions;
--- a/src/routes/(app)/survey/new/+page.svelte
+++ b/src/routes/(app)/survey/new/+page.svelte
@ -0,0 +1,59 @@
+<script lang="ts">
+	import Navbar from '$lib/components/Navbar.svelte';
+	import type { PageData } from './$types';
+
+	const { data }: { data: PageData } = $props();
+
+	let participants = $state(data?.participants?.length ?? 1);
+	let skills = $state(data?.skills?.length ?? 1);
+</script>
+
+<Navbar title="Create a new survey" />
+<form class="grid grid-cols-2 gap-2 p-4" method="post">
+	<label for="title" class="justify-self-end">Survey Title</label>
+	<input type="text" name="title" id="title" class="justify-self-start" value={data?.title} />
+	<label for="description" class="justify-self-end">Survey Description</label>
+	<textarea name="description" id="description" class="justify-self-start"
+		>{data?.description}</textarea
+	>
+
+	<h2 class="col-span-2 text-2xl">Participants</h2>
+	{#each Array(participants) as _, idx}
+		<label for="participants" class="justify-self-end">Email</label>
+		<input
+			type="email"
+			name="participants"
+			id="participants"
+			class="justify-self-start"
+			value={data?.participants?.[idx].email}
+		/>
+	{/each}
+	<button
+		type="button"
+		class="col-span-2 w-40 justify-self-center bg-blue-200"
+		onclick={() => (participants += 1)}>Add participant</button
+	>
+
+	<h2 class="col-span-2 text-2xl">Skills</h2>
+	{#each Array(skills) as _, idx}
+		<div class="col-span-2 ml-4 grid grid-cols-2">
+			<div class="justify-self-end">
+				<label for="skill">Skill title</label>
+				<input name="skill" id="skill" value={data?.skills?.[idx]?.title} />
+			</div>
+			<div class="justify-self-start">
+				<label for="skill-description">Skill description</label>
+				<textarea name="skill-description" id="skill-description"
+					>{data?.skills?.[idx]?.description}</textarea
+				>
+			</div>
+		</div>
+	{/each}
+	<button
+		type="button"
+		class="col-span-2 w-40 justify-self-center bg-blue-200"
+		onclick={() => (skills += 1)}>Add skill</button
+	>
+
+	<button type="submit" class="col-span-2 w-40 justify-self-center bg-slate-200">Create</button>
+</form>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,6 @@
+<script lang="ts">
+	import '../app.css';
+	let { children } = $props();
+</script>
+
+{@render children()}
--- a/src/routes/[accessToken]/+page.server.ts
+++ b/src/routes/[accessToken]/+page.server.ts
@ -0,0 +1,77 @@
+import { error, redirect } from '@sveltejs/kit';
+import { db } from '../../db';
+import { surveyAccessTable, surveyAnswersTable, surveySkillsTable, surveysTable } from '../../db/schema';
+import type { PageServerLoad } from './$types';
+
+import { eq } from 'drizzle-orm';
+
+export const load: PageServerLoad = async ({ params, url }) => {
+    const results = await db.select()
+        .from(surveyAccessTable)
+        .where(eq(surveyAccessTable.accessToken, params.accessToken))
+        .innerJoin(surveysTable, eq(surveysTable.id, surveyAccessTable.surveyId))
+        .limit(1);
+
+    if (results.length === 0) {
+        error(404, 'Survey not found');
+    }
+
+    if (await db.$count(surveyAnswersTable, eq(surveyAnswersTable.participantId, results[0].survey_access_table.id)) > 0) {
+        error(400, 'Answers already submitted');
+    }
+
+    const survey = results[0].surveys_table;
+
+    const skills = await db.select().from(surveySkillsTable).where(eq(surveySkillsTable.surveyId, survey.id));
+
+    return {
+        title: survey.title,
+        description: survey.description,
+        skills: skills.map(skills => ({
+            id: skills.id,
+            title: skills.title,
+            description: skills.description,
+        }))
+    }
+}
+
+export const actions = {
+    default: async ({ request, params }) => {
+        const results = await db.select()
+            .from(surveyAccessTable)
+            .where(eq(surveyAccessTable.accessToken, params.accessToken))
+            .innerJoin(surveysTable, eq(surveysTable.id, surveyAccessTable.surveyId))
+            .limit(1);
+
+        if (results.length === 0) {
+            error(404, 'Survey not found');
+        }
+
+        if (await db.$count(surveyAnswersTable, eq(surveyAnswersTable.participantId, results[0].survey_access_table.id)) > 0) {
+            error(400, 'Answers already submitted');
+        }
+
+        const survey = results[0].surveys_table;
+        const skills = await db.select().from(surveySkillsTable).where(eq(surveySkillsTable.surveyId, survey.id));
+
+        const formData = await request.formData();
+        // validate that the form doesn't contain invalid skill IDs
+        const skillEntries = [...formData.entries()];
+        const allIdsValid = skillEntries.every(([key, _]) => skills.some(skill => skill.id.toString() === key));
+        if (!allIdsValid || skillEntries.length !== skills.length) {
+            error(400, 'Invalid skill ID');
+        }
+
+        const answers = skillEntries.map(([key, value]) => ({
+            participantId: results[0].survey_access_table.id,
+            skillId: parseInt(key),
+            rating: parseFloat(value.toString())
+        }));
+        if (answers.some(answer => isNaN(answer.rating) || answer.rating < 0 || answer.rating > 3)) {
+            error(400, 'Invalid answer');
+        }
+        await db.insert(surveyAnswersTable).values([...answers]);
+
+        redirect(303, `/${params.accessToken}/thanks`);
+    }
+}
--- a/src/routes/[accessToken]/+page.svelte
+++ b/src/routes/[accessToken]/+page.svelte
@ -0,0 +1,39 @@
+<script lang="ts">
+	import Skills from '$lib/Skills.svelte';
+
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	let skills = $state(
+		data.skills.map((skill) => ({
+			id: skill.id.toString(),
+			title: skill.title,
+			description: skill.description,
+			value: 0
+		}))
+	);
+</script>
+
+<nav class="grid grid-cols-2 bg-indigo-800 p-3 text-white">
+	<h1 class="justify-self-start text-3xl">{data.title}</h1>
+</nav>
+{#if data.description}
+	<div class="ml-4 text-sm text-slate-500">{data.description}</div>
+{/if}
+<form method="POST" class="text-center">
+	<Skills bind:skills />
+
+	<button type="submit" class="mt-5 w-40 bg-slate-200">Submit</button>
+</form>
+
+<dl class="ml-8 mt-5 grid grid-cols-[2rem_1fr] text-sm">
+	<dt class="font-semibold">0</dt>
+	<dd>The person does not have this skill or I can't answer.</dd>
+	<dt class="font-semibold">1</dt>
+	<dd>The person can use this skill with guidance by more experienced people.</dd>
+	<dt class="font-semibold">2</dt>
+	<dd>The person is able to use this skill by themselves.</dd>
+	<dt class="font-semibold">3</dt>
+	<dd>The person is able to guide others to use this skill.</dd>
+</dl>
--- a/src/routes/[accessToken]/thanks/+page.svelte
+++ b/src/routes/[accessToken]/thanks/+page.svelte
@ -0,0 +1,6 @@
+<script>
+	import Navbar from '$lib/components/Navbar.svelte';
+</script>
+
+<Navbar title="Thanks" />
+<p>Thanks for your ratings</p>
--- a/src/routes/login/+layout.svelte
+++ b/src/routes/login/+layout.svelte
@ -0,0 +1,6 @@
+<script lang="ts">
+	import '../../app.css';
+	let { children } = $props();
+</script>
+
+{@render children()}
--- a/src/routes/login/+page.server.ts
+++ b/src/routes/login/+page.server.ts
@ -0,0 +1,44 @@
+import { redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { createSession, setSessionTokenCookie } from '../../lib/session/session';
+import { db } from '../../db';
+import { usersTable } from '../../db/schema';
+import { eq } from 'drizzle-orm';
+import { error } from '@sveltejs/kit';
+import { verify } from '@node-rs/argon2';
+import { generateRandomToken } from '$lib/randomToken';
+
+export const actions = {
+    default: async (event) => {
+        const formData = await event.request.formData();
+        const email = formData.get('email')?.toString();
+        const password = formData.get('password')?.toString();
+        if (!email || !password) {
+            error(400, 'Email and password are required');
+        }
+
+        const userCredentials = await db.select().from(usersTable).where(eq(usersTable.email, email));
+        console.log(userCredentials, formData.get('email'));
+        if (userCredentials.length === 0) {
+            error(403, 'Invalid credentials');
+        }
+        const isPasswordValid = await verify(userCredentials[0].password_hash, password);
+        if (isPasswordValid) {
+            // create the session
+            const token = generateRandomToken();
+            await createSession(token, userCredentials[0].id);
+            setSessionTokenCookie(event, token, new Date(Date.now() + 600 * 1000));
+            // redirect to the original URI
+            const redirect_uri = event.url.searchParams.get('redirect_uri');
+            if (redirect_uri) {
+                redirect(303, redirect_uri);
+            }
+            else {
+                redirect(303, '/');
+            }
+        }
+        else {
+            error(403, 'Invalid credentials');
+        }
+    }
+} satisfies Actions;
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@ -0,0 +1,10 @@
+<h1 class="text-3xl">Login</h1>
+<div>
+	<form class="grid grid-cols-2 gap-1" method="POST">
+		<label for="name" class="justify-self-end">Email address</label>
+		<input type="email" name="email" id="email" class="justify-self-start" required />
+		<label for="password" class="justify-self-end">Password</label>
+		<input type="password" name="password" id="password" class="justify-self-start" required />
+		<button type="submit" class="col-span-2 w-40 justify-self-center bg-slate-200">Log In</button>
+	</form>
+</div>
--- a/src/routes/register/+page.server.ts
+++ b/src/routes/register/+page.server.ts
@ -0,0 +1,21 @@
+import { hash } from '@node-rs/argon2';
+import type { Actions } from './$types';
+import { usersTable } from '../../db/schema';
+import { db } from '../../db';
+import { redirect } from '@sveltejs/kit';
+
+export const actions = {
+    default: async (event) => {
+        const formData = await event.request.formData();
+        const email = formData.get('email');
+        const password = formData.get('password');
+        const hashedPassword = await hash(password);
+
+        await db.insert(usersTable).values({
+            email,
+            password_hash: hashedPassword
+        });
+
+        redirect(303, '/login');
+    }
+} satisfies Actions;
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@ -0,0 +1,41 @@
+<script lang="ts">
+	let password = $state('');
+	let password_repeat = $state('');
+</script>
+
+<h1 class="text-3xl">Register a new Account</h1>
+<div>
+	<form class="grid grid-cols-2 gap-1" method="POST">
+		<label for="name" class="justify-self-end">Email address</label>
+		<input type="email" name="email" id="email" class="justify-self-start" required />
+		<label for="password" class="justify-self-end">Password</label>
+		<input
+			type="password"
+			name="password"
+			id="password"
+			class="justify-self-start"
+			required
+			bind:value={password}
+		/>
+		<label for="password_repeat" class="justify-self-end">Password</label>
+		<input
+			type="password"
+			name="password_repeat"
+			id="password_repeat"
+			class="justify-self-start"
+			required
+			bind:value={password_repeat}
+		/>
+		<button
+			type="submit"
+			class="col-span-2 w-40 justify-self-center bg-slate-200"
+			disabled={password !== password_repeat || password === ''}
+		>
+			{#if password !== password_repeat}
+				Passwords don't match
+			{:else}
+				Register
+			{/if}
+		</button>
+	</form>
+</div>
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -0,0 +1,13 @@
+import forms from '@tailwindcss/forms';
+import typography from '@tailwindcss/typography';
+import type { Config } from 'tailwindcss';
+
+export default {
+	content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/layerchart/**/*.{svelte,js}'],
+
+	theme: {
+		extend: {}
+	},
+
+	plugins: [typography, forms]
+} satisfies Config;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});
				`@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.