initial commit

2025-06-14 23:47:44 -04:00 · 2025-06-14 23:47:44 -04:00 · d40b69f1f9
commit d40b69f1f9
58 changed files with 7919 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.tanstack
--- a/frontend/README.md
+++ b/frontend/README.md
@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+	extends: [
+		// Remove ...tseslint.configs.recommended and replace with this
+		...tseslint.configs.recommendedTypeChecked,
+		// Alternatively, use this for stricter rules
+		...tseslint.configs.strictTypeChecked,
+		// Optionally, add this for stylistic rules
+		...tseslint.configs.stylisticTypeChecked,
+	],
+	languageOptions: {
+		// other options...
+		parserOptions: {
+			project: ['./tsconfig.node.json', './tsconfig.app.json'],
+			tsconfigRootDir: import.meta.dirname,
+		},
+	},
+});
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x';
+import reactDom from 'eslint-plugin-react-dom';
+
+export default tseslint.config({
+	plugins: {
+		// Add the react-x and react-dom plugins
+		'react-x': reactX,
+		'react-dom': reactDom,
+	},
+	rules: {
+		// other rules...
+		// Enable its recommended typescript rules
+		...reactX.configs['recommended-typescript'].rules,
+		...reactDom.configs.recommended.rules,
+	},
+});
+```
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+	{ ignores: ['dist'] },
+	{
+		extends: [js.configs.recommended, ...tseslint.configs.recommended],
+		files: ['**/*.{ts,tsx}'],
+		languageOptions: {
+			ecmaVersion: 2020,
+			globals: globals.browser,
+		},
+		plugins: {
+			'react-hooks': reactHooks,
+			'react-refresh': reactRefresh,
+		},
+		rules: {
+			...reactHooks.configs.recommended.rules,
+			'react-refresh/only-export-components': [
+				'warn',
+				{ allowConstantExport: true },
+			],
+		},
+	},
+);
--- 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" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite + React + TS</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,46 @@
+{
+	"name": "frontend",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build",
+		"lint": "eslint .",
+		"preview": "vite preview",
+		"format": "prettier --write ."
+	},
+	"dependencies": {
+		"@radix-ui/react-icons": "^1.3.2",
+		"@radix-ui/themes": "^3.2.1",
+		"@tanstack/react-query": "^5.80.7",
+		"@tanstack/react-query-devtools": "^5.80.7",
+		"@tanstack/react-router": "^1.121.12",
+		"@tanstack/react-router-devtools": "^1.121.12",
+		"radix-ui": "^1.4.2",
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.25.0",
+		"@tanstack/router-plugin": "^1.121.12",
+		"@types/react": "^19.1.2",
+		"@types/react-dom": "^19.1.2",
+		"@vitejs/plugin-react-swc": "^3.9.0",
+		"eslint": "^9.25.0",
+		"eslint-plugin-react-hooks": "^5.2.0",
+		"eslint-plugin-react-refresh": "^0.4.19",
+		"globals": "^16.0.0",
+		"prettier": "^3.5.3",
+		"prettier-plugin-organize-imports": "^4.1.0",
+		"typescript": "~5.8.3",
+		"typescript-eslint": "^8.30.1",
+		"vite": "^6.3.5"
+	},
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"@swc/core",
+			"esbuild"
+		]
+	}
+}
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/public/vite.svg
+++ b/frontend/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@ -0,0 +1,201 @@
+import {
+	queryOptions,
+	useMutation,
+	useQuery,
+	useQueryClient,
+} from '@tanstack/react-query';
+
+export interface User {
+	id: string;
+	username: string;
+}
+
+export interface Category {
+	id: number;
+	name: string;
+	description?: string;
+	created_by: string;
+	created_at: number;
+}
+
+export interface Task {
+	id: number;
+	name: string;
+	description?: string;
+	completed: number;
+	created_by: string;
+	assigned_to: string;
+	created_at: number;
+	deadline?: number;
+}
+
+export interface TaskCategory {
+	task_id: number;
+	category_id: number;
+}
+
+export interface ErrorResponse {
+	request_id: string;
+	code: number;
+	message: string;
+}
+
+declare module '@tanstack/react-query' {
+	interface Register {
+		defaultError: ErrorResponse;
+	}
+}
+
+type HTTPMethod = 'GET' | 'POST' | 'DELETE';
+
+type CanHaveBody<M extends HTTPMethod> = M extends 'GET' ? false : true;
+
+export async function request<M extends HTTPMethod, R = unknown, T = unknown>(
+	method: M,
+	endpoint: string,
+	body?: CanHaveBody<M> extends true ? T : undefined,
+): Promise<R> {
+	const resp = await fetch(endpoint, {
+		method,
+		body: body ? JSON.stringify(body) : undefined,
+		headers: {
+			'Content-Type': 'application/json',
+		},
+	});
+
+	const responseBody = await resp.json();
+
+	if (resp.status != 200) {
+		throw responseBody;
+	}
+
+	return responseBody as R;
+}
+
+export function whoamiOptions() {
+	return queryOptions({
+		queryKey: ['user', 'me'],
+		async queryFn() {
+			return request<'GET', User>('GET', '/api/v1/user/me');
+		},
+	});
+}
+
+export function useCurrentUser() {
+	return useQuery(whoamiOptions());
+}
+
+export function userOptions(userID: string) {
+	return queryOptions({
+		queryKey: ['user', userID],
+		async queryFn() {
+			return request<'GET', User>('GET', '/api/v1/user/' + userID);
+		},
+	});
+}
+
+export function useUser(userID: string) {
+	return useQuery(userOptions(userID));
+}
+
+export function userTasksOptions(userID: string) {
+	return queryOptions({
+		queryKey: ['user', userID, 'tasks'],
+		async queryFn() {
+			return request<'GET', { tasks: Task[] }>(
+				'GET',
+				'/api/v1/user/' + userID + '/tasks',
+			);
+		},
+	});
+}
+
+export function useUserTasks(userID: string) {
+	return useQuery(userTasksOptions(userID));
+}
+
+export interface CreateTaskBody {
+	name: string;
+	description?: string;
+	deadline?: number;
+}
+
+export function useCreateTask() {
+	const queryClient = useQueryClient();
+	return useMutation({
+		async mutationFn(body: CreateTaskBody): Promise<{
+			task: Task;
+		}> {
+			return request('POST', '/api/v1/task', body);
+		},
+		onSettled() {
+			queryClient.invalidateQueries(userTasksOptions('me'));
+		},
+	});
+}
+
+export interface CreateCategoryBody {
+	name: string;
+	description?: string;
+	color?: number;
+}
+
+export function useCreateCategory() {
+	const queryClient = useQueryClient();
+	return useMutation({
+		async mutationFn(body: CreateCategoryBody): Promise<{
+			category: Category;
+		}> {
+			return request('POST', '/api/v1/category', body);
+		},
+		onSettled() {
+			queryClient.invalidateQueries(categoriesOptions());
+		},
+	});
+}
+
+export function useAddTaskCategories(taskID: number) {
+	return useMutation({
+		async mutationFn(categoryIDs: number[]) {
+			return request<'POST', { taskCategories: TaskCategory[] }>(
+				'POST',
+				'/api/v1/task/' + taskID + '/categories',
+				{
+					categoryIDs,
+				},
+			);
+		},
+	});
+}
+
+export function categoriesOptions(enabled?: boolean) {
+	return queryOptions({
+		queryKey: ['categories'],
+		async queryFn() {
+			return await request<'GET', { categories: Category[] }>(
+				'GET',
+				'/api/v1/category',
+			);
+		},
+		enabled,
+	});
+}
+
+export function useCategories(enabled?: boolean) {
+	return useQuery(categoriesOptions(enabled));
+}
+
+export function useCompleteTask(taskID: number) {
+	const queryClient = useQueryClient();
+	return useMutation({
+		async mutationFn() {
+			return request<'POST', { task: Task }>(
+				'POST',
+				'/api/v1/task' + taskID + '/complete',
+			);
+		},
+		onSettled() {
+			queryClient.invalidateQueries(userTasksOptions('me'));
+		},
+	});
+}
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@ -0,0 +1,17 @@
+*,
+::before,
+::after {
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+body {
+	padding: 0;
+	margin: 0;
+	overflow: hidden;
+}
+
+.accordion-toggle[data-state='open'] {
+	rotate: 180deg;
+}
--- a/frontend/src/components/category-select.tsx
+++ b/frontend/src/components/category-select.tsx
@ -0,0 +1,51 @@
+import { PlusIcon } from '@radix-ui/react-icons';
+import { Button, CheckboxCards, Flex, Popover } from '@radix-ui/themes';
+import { useState } from 'react';
+import { useCategories } from '../api';
+
+interface CategorySelectProps {
+	categoryIDs: Set<number>;
+	setCategoryIDs(ids: Set<number>): void;
+}
+
+export default function CategorySelect({
+	categoryIDs,
+	setCategoryIDs,
+}: CategorySelectProps) {
+	const [open, setOpen] = useState(false);
+	const categories = useCategories(open);
+
+	const checked = [...categoryIDs].map((v) => v.toString());
+
+	function setChecked(ids: string[]) {
+		const parsed = ids.map((v) => parseInt(v)).filter(Number.isSafeInteger);
+		setCategoryIDs(new Set(parsed));
+	}
+
+	return (
+		<Popover.Root open={open} onOpenChange={setOpen}>
+			<Popover.Trigger>
+				<Button>
+					<PlusIcon /> Add categories
+				</Button>
+			</Popover.Trigger>
+			<Popover.Content>
+				<Flex asChild direction="column" gap="2">
+					<CheckboxCards.Root
+						value={checked}
+						onValueChange={setChecked}
+					>
+						{categories.data?.categories.map((c) => (
+							<CheckboxCards.Item value={c.id.toString()}>
+								{c.name}
+							</CheckboxCards.Item>
+						))}
+					</CheckboxCards.Root>
+				</Flex>
+				<Popover.Close>
+					<Button>Done</Button>
+				</Popover.Close>
+			</Popover.Content>
+		</Popover.Root>
+	);
+}
--- a/frontend/src/components/create-category.tsx
+++ b/frontend/src/components/create-category.tsx
@ -0,0 +1,90 @@
+import {
+	CardStackPlusIcon,
+	CrossCircledIcon,
+	Pencil1Icon,
+	PlusIcon,
+} from '@radix-ui/react-icons';
+import {
+	Button,
+	Callout,
+	Dialog,
+	Flex,
+	Grid,
+	Spinner,
+	TextField,
+} from '@radix-ui/themes';
+import { useState, type FormEvent } from 'react';
+import { useCreateCategory } from '../api';
+
+export default function CreateCategory() {
+	const [open, setOpen] = useState(false);
+	const [name, setName] = useState('');
+	const createCategory = useCreateCategory();
+	async function submit(ev: FormEvent<HTMLFormElement>) {
+		ev.preventDefault();
+
+		await createCategory.mutateAsync({
+			name,
+		});
+
+		setOpen(false);
+	}
+	return (
+		<Dialog.Root open={open} onOpenChange={setOpen}>
+			<Dialog.Trigger>
+				<Button variant="soft">
+					<CardStackPlusIcon />
+					Create category
+				</Button>
+			</Dialog.Trigger>
+			<Dialog.Content maxWidth="400px">
+				<Dialog.Title>Create a new category</Dialog.Title>
+				<Dialog.Description></Dialog.Description>
+				{createCategory.isError && (
+					<Callout.Root>
+						<Callout.Icon>
+							<CrossCircledIcon />
+						</Callout.Icon>
+						<Callout.Text>
+							{createCategory.error.message}
+						</Callout.Text>
+					</Callout.Root>
+				)}
+				<Flex asChild direction="column" gap="4">
+					<form onSubmit={submit}>
+						<TextField.Root
+							placeholder="Category name..."
+							value={name}
+							onChange={(ev) => setName(ev.currentTarget.value)}
+						>
+							<TextField.Slot>
+								<Pencil1Icon />
+							</TextField.Slot>
+						</TextField.Root>
+
+						<Grid columns="2" gap="2">
+							<Button
+								type="submit"
+								disabled={createCategory.isPending}
+							>
+								<Spinner loading={createCategory.isPending}>
+									<PlusIcon />
+								</Spinner>
+								Create
+							</Button>
+							<Dialog.Close>
+								<Button
+									type="button"
+									variant="soft"
+									color="gray"
+								>
+									Cancel
+								</Button>
+							</Dialog.Close>
+						</Grid>
+					</form>
+				</Flex>
+			</Dialog.Content>
+		</Dialog.Root>
+	);
+}
--- a/frontend/src/components/create-task.tsx
+++ b/frontend/src/components/create-task.tsx
@ -0,0 +1,85 @@
+import { CalendarIcon, PlusIcon } from '@radix-ui/react-icons';
+import {
+	Button,
+	Dialog,
+	Flex,
+	Grid,
+	TextArea,
+	TextField,
+} from '@radix-ui/themes';
+import { useState, type FormEvent } from 'react';
+import { useCreateTask } from '../api';
+
+export default function CreateTask() {
+	const [name, setName] = useState('');
+	const [description, setDescription] = useState('');
+	const [deadline, _setDeadline] = useState(0);
+	const createMutation = useCreateTask();
+
+	async function submit(ev: FormEvent<HTMLFormElement>) {
+		ev.preventDefault();
+
+		await createMutation.mutateAsync({
+			name,
+			description,
+			deadline: deadline > 0 ? deadline : undefined,
+		});
+	}
+
+	return (
+		<Dialog.Root>
+			<Dialog.Trigger>
+				<Button>
+					<PlusIcon />
+					Create task
+				</Button>
+			</Dialog.Trigger>
+			<Dialog.Content size="3" maxWidth="400px">
+				<Flex direction="column" gap="2">
+					<Dialog.Title>Create a new task</Dialog.Title>
+					<Dialog.Description></Dialog.Description>
+					<Flex direction="column" gap="4" asChild>
+						<form onSubmit={submit}>
+							<TextField.Root
+								placeholder="Task name"
+								value={name}
+								onChange={(ev) =>
+									setName(ev.currentTarget.value)
+								}
+							></TextField.Root>
+
+							<TextArea
+								placeholder="Description... (optional)"
+								value={description}
+								onChange={(ev) =>
+									setDescription(ev.currentTarget.value)
+								}
+							/>
+
+							<TextField.Root type="datetime-local">
+								<TextField.Slot>
+									<CalendarIcon />
+								</TextField.Slot>
+							</TextField.Root>
+							<Grid gap="2" columns="2">
+								<Button type="submit">
+									<PlusIcon />
+									Create
+								</Button>
+								<Dialog.Close>
+									<Button
+										type="button"
+										variant="soft"
+										color="gray"
+									>
+										Cancel
+									</Button>
+								</Dialog.Close>
+							</Grid>
+						</form>
+					</Flex>
+				</Flex>
+			</Dialog.Content>
+		</Dialog.Root>
+	);
+}
--- a/frontend/src/components/task-card.tsx
+++ b/frontend/src/components/task-card.tsx
@ -0,0 +1,54 @@
+import {
+	Card,
+	Checkbox,
+	ChevronDownIcon,
+	Flex,
+	IconButton,
+	Text,
+} from '@radix-ui/themes';
+import { Accordion } from 'radix-ui';
+import { type Task } from '../api';
+import UserAvatar from './user-avatar';
+
+interface TaskCardProps {
+	task: Task;
+}
+
+export default function TaskCard({ task }: TaskCardProps) {
+	// const completeTask = useCompleteTask(task.id);
+
+	return (
+		<Card>
+			<Accordion.Item value={task.id.toString()}>
+				<Accordion.Header>
+					<Flex direction="row" align="center" gap="4">
+						<UserAvatar userID={task.assigned_to} />
+						<Flex flexGrow="1" direction="column">
+							<Text>{task.name}</Text>
+						</Flex>
+						<Checkbox checked={task.completed === 1} size="3" />
+						<Flex
+							align="center"
+							justify="center"
+							px="3"
+							py="2"
+							my="auto"
+						>
+							<Accordion.Trigger asChild>
+								<IconButton
+									className="accordion-toggle"
+									size="4"
+									color="gray"
+									variant="ghost"
+								>
+									<ChevronDownIcon />
+								</IconButton>
+							</Accordion.Trigger>
+						</Flex>
+					</Flex>
+				</Accordion.Header>
+				<Accordion.Content>hi</Accordion.Content>
+			</Accordion.Item>
+		</Card>
+	);
+}
--- a/frontend/src/components/user-avatar.tsx
+++ b/frontend/src/components/user-avatar.tsx
@ -0,0 +1,16 @@
+import { Avatar, Skeleton } from '@radix-ui/themes';
+import { useUser } from '../api';
+
+interface UserAvatarProps {
+	userID: string;
+}
+
+export default function UserAvatar({ userID }: UserAvatarProps) {
+	const user = useUser(userID);
+
+	return (
+		<Skeleton loading={user.isPending}>
+			<Avatar fallback={user.data?.username.charAt(0) ?? '?'} />
+		</Skeleton>
+	);
+}
--- a/frontend/src/components/user-card.tsx
+++ b/frontend/src/components/user-card.tsx
@ -0,0 +1,30 @@
+import { ExitIcon } from '@radix-ui/react-icons';
+import { Button, Card, Flex, Skeleton, Spinner, Text } from '@radix-ui/themes';
+import { useUser } from '../api';
+import UserAvatar from './user-avatar';
+
+interface UserCardProps {
+	userID: string;
+}
+
+export default function UserCard({ userID }: UserCardProps) {
+	const { data: user } = useUser(userID);
+	return (
+		<Card>
+			<Flex pr="1" direction="row" gap="2" align="center">
+				<Skeleton loading={!user}>
+					<UserAvatar userID={userID} />
+				</Skeleton>
+				<Skeleton loading={!user}>
+					<Text>{user?.username}</Text>
+				</Skeleton>
+				<Button variant="soft" ml="auto" disabled={!user}>
+					<Spinner loading={!user}>
+						<ExitIcon />
+					</Spinner>
+					Logout
+				</Button>
+			</Flex>
+		</Card>
+	);
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@ -0,0 +1,41 @@
+import { Theme } from '@radix-ui/themes';
+import './app.css';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { routeTree } from './routeTree.gen';
+
+import '@radix-ui/themes/styles.css';
+
+const queryClient = new QueryClient({});
+
+const router = createRouter({
+	routeTree,
+	context: {
+		queryClient,
+	},
+});
+
+declare module '@tanstack/react-router' {
+	interface Register {
+		router: typeof router;
+	}
+}
+
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<QueryClientProvider client={queryClient}>
+			<Theme
+				appearance="dark"
+				panelBackground="solid"
+				accentColor="ruby"
+				grayColor="auto"
+				// radius="full"
+				radius="large"
+			>
+				<RouterProvider router={router} />
+			</Theme>
+		</QueryClientProvider>
+	</StrictMode>,
+);
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@ -0,0 +1,77 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as LoginRouteImport } from './routes/login'
+import { Route as IndexRouteImport } from './routes/index'
+
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/login': typeof LoginRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/login': typeof LoginRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/login': typeof LoginRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/login'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/login'
+  id: '__root__' | '/' | '/login'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  LoginRoute: typeof LoginRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  LoginRoute: LoginRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@ -0,0 +1,25 @@
+import { ThemePanel } from '@radix-ui/themes';
+import type { QueryClient } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { Outlet, createRootRouteWithContext } from '@tanstack/react-router';
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
+import * as React from 'react';
+
+export interface RootContext {
+	queryClient: QueryClient;
+}
+
+export const Route = createRootRouteWithContext<RootContext>()({
+	component: RootComponent,
+});
+
+function RootComponent() {
+	return (
+		<React.Fragment>
+			<Outlet />
+			<TanStackRouterDevtools />
+			<ThemePanel defaultOpen={false} />
+			<ReactQueryDevtools />
+		</React.Fragment>
+	);
+}
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@ -0,0 +1,38 @@
+import { Container, Flex, Grid } from '@radix-ui/themes';
+import { createFileRoute } from '@tanstack/react-router';
+import { Accordion } from 'radix-ui';
+import { useUserTasks } from '../api';
+
+import CreateCategory from '../components/create-category';
+import CreateTask from '../components/create-task';
+import TaskCard from '../components/task-card';
+import UserCard from '../components/user-card';
+
+export const Route = createFileRoute('/')({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const tasks = useUserTasks('me');
+
+	return (
+		<Flex direction="column" width="100vw" height="100vh">
+			<Container size="1" p="8">
+				<Flex direction="column" gap="4">
+					<UserCard userID="me" />
+					<Grid gap="2" columns="2">
+						<CreateTask />
+						<CreateCategory />
+					</Grid>
+					<Flex direction="column" gap="2" asChild>
+						<Accordion.Root type="single" collapsible>
+							{tasks.data?.tasks.map((t) => (
+								<TaskCard key={t.id} task={t} />
+							))}
+						</Accordion.Root>
+					</Flex>
+				</Flex>
+			</Container>
+		</Flex>
+	);
+}
--- a/frontend/src/routes/login.tsx
+++ b/frontend/src/routes/login.tsx
@ -0,0 +1,81 @@
+import { LockClosedIcon, PersonIcon } from '@radix-ui/react-icons';
+import { Button, Card, Flex, TextField } from '@radix-ui/themes';
+import { useMutation } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { useState, type FormEvent } from 'react';
+import { request, type User } from '../api';
+
+export const Route = createFileRoute('/login')({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const navigate = Route.useNavigate();
+	const [username, setUsername] = useState('');
+	const [password, setPassword] = useState('');
+
+	const loginMutation = useMutation({
+		async mutationFn() {
+			return await request<'POST', { user: User }>(
+				'POST',
+				'/api/v1/login',
+				{
+					username,
+					password,
+				},
+			);
+		},
+		onSuccess() {
+			navigate({ to: '/' });
+		},
+	});
+
+	async function submit(ev: FormEvent<HTMLFormElement>) {
+		ev.preventDefault();
+
+		await loginMutation.mutateAsync();
+	}
+
+	return (
+		<Flex
+			justify="center"
+			align="center"
+			direction="column"
+			width="100vw"
+			height="100vh"
+		>
+			<Card size="2" variant="classic">
+				<form onSubmit={submit}>
+					<Flex gap="3" direction="column" position="relative">
+						<TextField.Root
+							placeholder="Username"
+							value={username}
+							onChange={(ev) =>
+								setUsername(ev.currentTarget.value)
+							}
+						>
+							<TextField.Slot>
+								<PersonIcon />
+							</TextField.Slot>
+						</TextField.Root>
+						<TextField.Root
+							placeholder="Password"
+							type="password"
+							value={password}
+							onChange={(ev) =>
+								setPassword(ev.currentTarget.value)
+							}
+						>
+							<TextField.Slot>
+								<LockClosedIcon />
+							</TextField.Slot>
+						</TextField.Root>
+						<Button type="submit" loading={loginMutation.isPending}>
+							Login
+						</Button>
+					</Flex>
+				</form>
+			</Card>
+		</Flex>
+	);
+}
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@ -0,0 +1,27 @@
+{
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"erasableSyntaxOnly": false,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["src"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -0,0 +1,7 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.app.json" },
+		{ "path": "./tsconfig.node.json" }
+	]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@ -0,0 +1,25 @@
+{
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"target": "ES2022",
+		"lib": ["ES2023"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"erasableSyntaxOnly": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [
+		tanstackRouter({
+			target: 'react',
+		}),
+		react(),
+	],
+});
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>