♻️(frontend) starting a bit more structured frontend app

the idea is to use react aria, panda-css, react query and wouter as a base, in addition to livekit react components this is still mostly wip but it's usable: - homepage shows a login link to create a room - before joining a room you are asked to configure your audio/video/user name - note that if you directly go to a a conference url it creates it even if you are not logged in… very secured!
2024-07-02 20:05:46 +02:00
parent cf11cc3e60
commit e3eb3e240a
48 changed files with 6387 additions and 306 deletions
--- a/src/frontend/.eslintrc.cjs
+++ b/src/frontend/.eslintrc.cjs
@@ -5,6 +5,8 @@ module.exports = {
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
+    'plugin:jsx-a11y/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
--- a/src/frontend/.gitignore
+++ b/src/frontend/.gitignore
@@ -12,6 +12,10 @@ dist
 dist-ssr
 *.local

+# Panda CSS
+styled-system
+styled-system-studio
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
--- a/src/frontend/.prettierrc
+++ b/src/frontend/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true
+}
--- a/src/frontend/@types/react-query.d.ts
+++ b/src/frontend/@types/react-query.d.ts
@@ -0,0 +1,7 @@
+import { ApiError } from '../src/api/ApiError'
+
+declare module '@tanstack/react-query' {
+  interface Register {
+    defaultError: ApiError
+  }
+}
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-lk-theme="visio-light">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/play-icon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Meet</title>
  </head>
  <body>
    <div id="root"></div>
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -4,18 +4,28 @@
  "version": "0.0.0",
  "type": "module",
  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
+    "dev": "panda codegen && vite",
+    "build": "panda codegen && tsc -b && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepare": "panda codegen"
  },
  "dependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
-  },
-  "devDependencies": {
    "@livekit/components-react": "2.3.3",
    "@livekit/components-styles": "1.0.12",
+    "@pandacss/preset-panda": "0.41.0",
+    "@tanstack/react-query": "5.49.2",
+    "classnames": "2.5.1",
+    "livekit-client": "2.3.1",
+    "react": "18.2.0",
+    "react-aria-components": "1.2.1",
+    "react-dom": "18.2.0",
+    "wouter": "^3.3.0"
+  },
+  "devDependencies": {
+    "@pandacss/dev": "0.41.0",
+    "@tanstack/eslint-plugin-query": "5.49.1",
+    "@tanstack/react-query-devtools": "5.49.2",
    "@types/node": "20.14.9",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
@@ -23,10 +33,12 @@
    "@typescript-eslint/parser": "7.13.1",
    "@vitejs/plugin-react": "4.3.1",
    "eslint": "8.57.0",
+    "eslint-plugin-jsx-a11y": "6.9.0",
    "eslint-plugin-react-hooks": "4.6.2",
    "eslint-plugin-react-refresh": "0.4.7",
-    "livekit-client": "2.3.1",
+    "postcss": "8.4.39",
    "typescript": "5.5.2",
-    "vite": "5.3.1"
+    "vite": "5.3.1",
+    "vite-tsconfig-paths": "4.3.2"
  }
 }
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -0,0 +1,69 @@
+import pandaPreset from '@pandacss/preset-panda'
+import { defineConfig, defineTokens } from '@pandacss/dev'
+
+export default defineConfig({
+  preflight: true,
+  include: ['./src/**/*.{js,jsx,ts,tsx}'],
+  exclude: [],
+  jsxFramework: 'react',
+  outdir: 'src/styled-system',
+  conditions: {
+    extend: {
+      // React Aria builds upon data attributes instead of css pseudo-classes, make sure to only work based on react aria stuff
+      hover: '&:is([data-hovered])',
+      focus: '&:is([data-focused])',
+      focusVisible: '&:is([data-focus-visible])',
+      disabled: '&:is([data-disabled])',
+      pressed: '&:is([data-pressed])',
+    },
+  },
+  theme: {
+    ...pandaPreset.theme,
+    tokens: defineTokens({
+      ...pandaPreset.theme.tokens,
+      spacing: {
+        0: { value: '0rem' },
+        0.125: { value: '0.125rem' },
+        0.25: { value: '0.25rem' },
+        0.375: { value: '0.375rem' },
+        0.5: { value: '0.5rem' },
+        0.75: { value: '0.75rem' },
+        1: { value: '1rem' },
+        1.25: { value: '1.25rem' },
+        1.5: { value: '1.5rem' },
+        1.75: { value: '1.75rem' },
+        2: { value: '2rem' },
+        2.25: { value: '2.25rem' },
+        2.5: { value: '2.5rem' },
+        2.75: { value: '2.75rem' },
+        3: { value: '3rem' },
+        3.5: { value: '3.5rem' },
+        4: { value: '4rem' },
+        5: { value: '5rem' },
+        6: { value: '6rem' },
+        7: { value: '7rem' },
+        8: { value: '8rem' },
+        9: { value: '9rem' },
+        10: { value: '10rem' },
+        12: { value: '12rem' },
+        14: { value: '14rem' },
+        16: { value: '16rem' },
+        20: { value: '20rem' },
+        24: { value: '24rem' },
+        28: { value: '28rem' },
+        32: { value: '32rem' },
+        36: { value: '36rem' },
+        40: { value: '40rem' },
+        44: { value: '44rem' },
+        48: { value: '48rem' },
+        52: { value: '52rem' },
+        56: { value: '56rem' },
+        60: { value: '60rem' },
+        64: { value: '64rem' },
+        72: { value: '72rem' },
+        80: { value: '80rem' },
+        96: { value: '96rem' },
+      },
+    }),
+  },
+})
--- a/src/frontend/postcss.config.cjs
+++ b/src/frontend/postcss.config.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+}
--- a/src/frontend/public/vite.svg
+++ b/src/frontend/public/vite.svg
@@ -1 +0,0 @@
-<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/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -1,139 +1,24 @@
-import {useEffect, useState} from 'react'
-import './App.css'
-import {LiveKitRoom, VideoConference} from "@livekit/components-react";
-
-import '@livekit/components-styles';
-
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL
-const LIVEKIT_SERVER_URL = import.meta.env.VITE_LIVEKIT_SERVER_URL
-
-export interface User {
-  id: string;
-  email: string;
-}
-
-export interface Room {
-  livekit?: {
-    token: string
-  };
-  is_public: boolean;
-}
-
-function getCSRFToken() {
-  return document.cookie
-    .split(';')
-    .filter((cookie) => cookie.trim().startsWith('csrftoken='))
-    .map((cookie) => cookie.split('=')[1])
-    .pop();
-}
-
-async function getMe() {
-  const csrfToken = getCSRFToken();
-  const response = await fetch(
-    `${API_BASE_URL}users/me/`,
-    {
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-        ...(csrfToken && {'X-CSRFToken': csrfToken}),
-      },
-    }
-  )
-  if (!response.ok) {
-    throw new Error(`Couldn't fetch user data: ${response.statusText}`);
-  }
-  return response.json() as Promise<User>;
-}
-
-function slugify(str: string) {
-  return str
-    .toLowerCase()
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .trim()
-    .replace(/[^a-z0-9\s-]/g, '')
-    .replace(/\s+/g, '-')
-    .replace(/-+/g, '-')
-}
-
-async function fetchRoom(roomId: string) {
-  const csrfToken = getCSRFToken();
-  const response = await fetch(
-    `${API_BASE_URL}rooms/${roomId}/`,
-    {
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-        ...(csrfToken && {'X-CSRFToken': csrfToken}),
-      },
-    }
-  )
-
-  if (!response.ok) {
-    throw new Error(`Couldn't fetch room data: ${response.statusText}`);
-  }
-
-  return response.json() as Promise<Room>;
-}
+import '@livekit/components-styles'
+import '@/styles/index.css'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Route, Switch } from 'wouter'
+import { Home } from './routes/Home'
+import { Conference } from './routes/Conference'
+import { NotFoundScreen } from './layout/NotFoundScreen'

+const queryClient = new QueryClient()

 function App() {
-  const [authenticatedUser, setAuthenticatedUser] = useState<User | null>(null)
-  const [roomData, setRoomData] = useState<Room | null>(null)
-  const [isLoading, setIsLoading] = useState<boolean>(true)
-
-  useEffect(() => {
-    getMe()
-      .then((data) => setAuthenticatedUser(data))
-      .catch(() => {
-        console.log('user not logged-in.')
-      })
-      .finally(() => setIsLoading(false))
-  }, [])
-
-  const getRoom = async () => {
-
-    const roomName = (document.getElementById('roomName')as HTMLInputElement)?.value || crypto.randomUUID()
-    const roomData = await fetchRoom(slugify(roomName))
-    setRoomData(roomData)
-
-    if (!roomData.livekit && !roomData.is_public) {
-      alert('no access')
-    }
-  }
-
-  if (isLoading) {
-    return (
-      <div>
-        loading ...
-      </div>
-    )
-  }
-
  return (
-    <div>
-      {
-        authenticatedUser ? (
-          <div style={{display: 'flex', flexDirection: 'column'}}>
-            <p>You are connected as: {authenticatedUser.email}</p>
-            <button onClick={() => window.location.replace(new URL('logout/', API_BASE_URL).href)}>Logout</button>
-          </div>
-        ) : (
-          <button onClick={() => window.location.replace(new URL('authenticate/', API_BASE_URL).href)}>Login</button>
-        )
-      }
-      <>
-        <input id="roomName" type="text" placeholder="Room name"/>
-        <button onClick={() => getRoom()}>Get room</button>
-      </>
-      {
-        roomData?.livekit && (
-          <LiveKitRoom serverUrl={LIVEKIT_SERVER_URL} token={roomData?.livekit?.token} connect={true}>
-            <VideoConference/>
-          </LiveKitRoom>
-        )
-      }
-    </div>
+    <QueryClientProvider client={queryClient}>
+      <Switch>
+        <Route path="/" component={Home} />
+        <Route path="/:roomId" component={Conference} />
+        <Route component={NotFoundScreen} />
+      </Switch>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
  )
 }

--- a/src/frontend/src/api/ApiError.ts
+++ b/src/frontend/src/api/ApiError.ts
@@ -0,0 +1,11 @@
+class ApiError extends Error {
+  statusCode: number
+  body: unknown
+  constructor(statusCode: number, body: unknown) {
+    super(`Api error ${statusCode}`)
+    this.statusCode = statusCode
+    this.body = body
+  }
+}
+
+export { ApiError }
--- a/src/frontend/src/api/ApiRoom.ts
+++ b/src/frontend/src/api/ApiRoom.ts
@@ -0,0 +1,10 @@
+export type ApiRoom = {
+  id: string
+  name: string
+  slug: string
+  is_public: boolean
+  livekit?: {
+    room: string
+    token: string
+  }
+}
--- a/src/frontend/src/api/ApiUser.ts
+++ b/src/frontend/src/api/ApiUser.ts
@@ -0,0 +1,4 @@
+export type ApiUser = {
+  id: string
+  email: string
+}
--- a/src/frontend/src/api/apiUrl.ts
+++ b/src/frontend/src/api/apiUrl.ts
@@ -0,0 +1,3 @@
+export const apiUrl = (path: string) => {
+  return `${import.meta.env.VITE_API_BASE_URL.replace(/\/$/, '')}${path}`
+}
--- a/src/frontend/src/api/fetchApi.ts
+++ b/src/frontend/src/api/fetchApi.ts
@@ -0,0 +1,31 @@
+import { ApiError } from './ApiError'
+import { apiUrl } from './apiUrl'
+
+export const fetchApi = async <T = Record<string, unknown>>(
+  url: string,
+  options?: RequestInit
+): Promise<T> => {
+  const csrfToken = getCsrfToken()
+  const response = await fetch(apiUrl(url), {
+    credentials: 'include',
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(!!csrfToken && { 'X-CSRFToken': csrfToken }),
+      ...options?.headers,
+    },
+  })
+  const result = await response.json()
+  if (!response.ok) {
+    throw new ApiError(response.status, result)
+  }
+  return result
+}
+
+const getCsrfToken = () => {
+  return document.cookie
+    .split(';')
+    .filter((cookie) => cookie.trim().startsWith('csrftoken='))
+    .map((cookie) => cookie.split('=')[1])
+    .pop()
+}
--- a/src/frontend/src/api/fetchRoom.ts
+++ b/src/frontend/src/api/fetchRoom.ts
@@ -0,0 +1,6 @@
+import { ApiRoom } from './ApiRoom'
+import { fetchApi } from './fetchApi'
+
+export const fetchRoom = (roomId: string) => {
+  return fetchApi<ApiRoom>(`/rooms/${roomId}`)
+}
--- a/src/frontend/src/api/fetchUser.ts
+++ b/src/frontend/src/api/fetchUser.ts
@@ -0,0 +1,6 @@
+import type { ApiUser } from './ApiUser'
+import { fetchApi } from './fetchApi'
+
+export const fetchUser = () => {
+  return fetchApi<ApiUser>('/users/me')
+}
--- a/src/frontend/src/assets/play-icon.svg
+++ b/src/frontend/src/assets/play-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.0658V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.59871 4.43433 8.69522 4.46355 8.77735 4.5183L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z"></path></svg>
--- a/src/frontend/src/assets/react.svg
+++ b/src/frontend/src/assets/react.svg
@@ -1 +0,0 @@
-<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="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -1,68 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
--- a/src/frontend/src/layout/BoxScreen.tsx
+++ b/src/frontend/src/layout/BoxScreen.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+import classNames from 'classnames'
+import { css } from '@/styled-system/css'
+import { Screen } from './Screen'
+
+export const BoxScreen = ({ children }: { children: ReactNode }) => {
+  return (
+    <Screen>
+      <div
+        className={classNames(
+          css({
+            width: '38rem',
+            maxWidth: '100%',
+            margin: 'auto',
+            border: '1px solid #ddd',
+            borderRadius: 'lg',
+            backgroundColor: 'white',
+            boxShadow: 'sm',
+            textAlign: 'center',
+            marginTop: '6',
+            gap: '1',
+            padding: '2',
+          })
+        )}
+      >
+        {children}
+      </div>
+    </Screen>
+  )
+}
--- a/src/frontend/src/layout/ErrorScreen.tsx
+++ b/src/frontend/src/layout/ErrorScreen.tsx
@@ -0,0 +1,17 @@
+import { Link } from 'wouter'
+import { A } from '@/primitives/A'
+import { H1 } from '@/primitives/H'
+import { BoxScreen } from './BoxScreen'
+
+export const ErrorScreen = () => {
+  return (
+    <BoxScreen>
+      <H1>An error occured while loading the page</H1>
+      <p>
+        <Link to="/" asChild>
+          <A size="small">Back to homescreen</A>
+        </Link>
+      </p>
+    </BoxScreen>
+  )
+}
--- a/src/frontend/src/layout/ForbiddenScreen.tsx
+++ b/src/frontend/src/layout/ForbiddenScreen.tsx
@@ -0,0 +1,17 @@
+import { Link } from 'wouter'
+import { A } from '@/primitives/A'
+import { H1 } from '@/primitives/H'
+import { BoxScreen } from './BoxScreen'
+
+export const ForbiddenScreen = () => {
+  return (
+    <BoxScreen>
+      <H1>You don't have the permission to view this page</H1>
+      <p>
+        <Link to="/" asChild>
+          <A size="small">Back to homescreen</A>
+        </Link>
+      </p>
+    </BoxScreen>
+  )
+}
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -0,0 +1,46 @@
+import { apiUrl } from '@/api/apiUrl'
+import { A } from '@/primitives/A'
+import { useUser } from '@/queries/useUser'
+import { css } from '@/styled-system/css'
+import { flex } from '@/styled-system/patterns'
+
+export const Header = () => {
+  const { user, isLoggedIn } = useUser()
+  return (
+    <div
+      className={css({
+        backgroundColor: 'white',
+        padding: '1',
+        flexShrink: 0,
+        color: '#000091',
+        boxShadow: '#00000040 0px 1px 4px',
+      })}
+    >
+      <header
+        className={flex({
+          justify: 'space-between',
+          align: 'center',
+        })}
+      >
+        <div>
+          <p
+            className={css({
+              fontWeight: 'bold',
+              fontSize: '2xl',
+            })}
+          >
+            Meet
+          </p>
+        </div>
+        <div>
+          {isLoggedIn === false && <A href={apiUrl('/authenticate')}>Login</A>}
+          {!!user && (
+            <p>
+              {user.email}&nbsp;&nbsp;<A href={apiUrl('/logout')}>Logout</A>
+            </p>
+          )}
+        </div>
+      </header>
+    </div>
+  )
+}
--- a/src/frontend/src/layout/LoadingScreen.tsx
+++ b/src/frontend/src/layout/LoadingScreen.tsx
@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+import { BoxScreen } from './BoxScreen'
+import { Screen } from './Screen'
+
+export const LoadingScreen = ({ asBox = false }: { asBox?: boolean }) => {
+  // show the loading screen only after a little while to prevent flash of texts
+  const [show, setShow] = useState(false)
+  useEffect(() => {
+    const timeout = setTimeout(() => setShow(true), 500)
+    return () => clearTimeout(timeout)
+  }, [])
+  if (!show) {
+    return null
+  }
+  const Container = asBox ? BoxScreen : Screen
+  return (
+    <Container>
+      <p>Loading…</p>
+    </Container>
+  )
+}
--- a/src/frontend/src/layout/NotFoundScreen.tsx
+++ b/src/frontend/src/layout/NotFoundScreen.tsx
@@ -0,0 +1,17 @@
+import { Link } from 'wouter'
+import { A } from '@/primitives/A'
+import { H1 } from '@/primitives/H'
+import { BoxScreen } from './BoxScreen'
+
+export const NotFoundScreen = () => {
+  return (
+    <BoxScreen>
+      <H1>Page not found</H1>
+      <p>
+        <Link to="/" asChild>
+          <A size="small">Back to homescreen</A>
+        </Link>
+      </p>
+    </BoxScreen>
+  )
+}
--- a/src/frontend/src/layout/Screen.tsx
+++ b/src/frontend/src/layout/Screen.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+import { css } from '@/styled-system/css'
+import { Header } from '@/layout/Header'
+
+export const Screen = ({ children }: { children: ReactNode }) => {
+  return (
+    <div
+      className={css({
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: 'slate.50',
+      })}
+    >
+      <Header />
+      <main
+        className={css({
+          flexGrow: 1,
+          overflow: 'auto',
+        })}
+      >
+        {children}
+      </main>
+    </div>
+  )
+}
--- a/src/frontend/src/main.tsx
+++ b/src/frontend/src/main.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'

 ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
-  </React.StrictMode>,
+  </React.StrictMode>
 )
--- a/src/frontend/src/primitives/A.tsx
+++ b/src/frontend/src/primitives/A.tsx
@@ -0,0 +1,34 @@
+import { RecipeVariantProps, cva } from '@/styled-system/css'
+import {
+  Link as Link,
+  type LinkProps as LinksProps,
+} from 'react-aria-components'
+
+const link = cva({
+  base: {
+    textDecoration: 'underline',
+    textUnderlineOffset: '2',
+    transition: 'all 200ms',
+    cursor: 'pointer',
+    _hover: {
+      textDecoration: 'none',
+    },
+    _pressed: {
+      textDecoration: 'underline',
+    },
+  },
+  variants: {
+    size: {
+      small: {
+        fontSize: 'sm',
+      },
+    },
+  },
+})
+
+export const A = ({
+  size,
+  ...props
+}: LinksProps & RecipeVariantProps<typeof link>) => {
+  return <Link {...props} className={link({ size })} />
+}
--- a/src/frontend/src/primitives/Bold.tsx
+++ b/src/frontend/src/primitives/Bold.tsx
@@ -0,0 +1,9 @@
+import { css } from '@/styled-system/css'
+
+const bold = css({
+  fontWeight: 'bold',
+})
+
+export const Bold = (props: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <strong className={bold} {...props} />
+}
--- a/src/frontend/src/primitives/Button.tsx
+++ b/src/frontend/src/primitives/Button.tsx
@@ -0,0 +1,8 @@
+import {
+  Button as RACButton,
+  type ButtonProps as RACButtonsProps,
+} from 'react-aria-components'
+
+export const Button = (props: RACButtonsProps) => {
+  return <RACButton {...props} className="lk-button" />
+}
--- a/src/frontend/src/primitives/H.tsx
+++ b/src/frontend/src/primitives/H.tsx
@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react'
+import classNames from 'classnames'
+import { css } from '@/styled-system/css'
+
+export const H1 = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLHeadingElement>) => {
+  return (
+    <h1
+      className={classNames(
+        css({
+          textStyle: '2xl',
+          marginBottom: '1',
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h1>
+  )
+}
--- a/src/frontend/src/primitives/Hr.tsx
+++ b/src/frontend/src/primitives/Hr.tsx
@@ -0,0 +1,10 @@
+import { css } from '@/styled-system/css'
+
+const hr = css({
+  marginY: '1',
+  borderColor: 'neutral.300',
+})
+
+export const Hr = (props: React.HTMLAttributes<HTMLHRElement>) => {
+  return <hr className={hr} {...props} />
+}
--- a/src/frontend/src/primitives/P.tsx
+++ b/src/frontend/src/primitives/P.tsx
@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react'
+import classNames from 'classnames'
+import { css } from '@/styled-system/css'
+
+export const P = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement>) => {
+  return (
+    <p
+      className={classNames(
+        css({
+          marginBottom: '1',
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
--- a/src/frontend/src/queries/keys.ts
+++ b/src/frontend/src/queries/keys.ts
@@ -0,0 +1,4 @@
+export const keys = {
+  user: 'user',
+  room: 'room',
+}
--- a/src/frontend/src/queries/useUser.tsx
+++ b/src/frontend/src/queries/useUser.tsx
@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query'
+import { keys } from './keys'
+import { fetchUser } from '@/api/fetchUser'
+
+export const useUser = () => {
+  const query = useQuery({
+    queryKey: [keys.user],
+    queryFn: fetchUser,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    retryOnMount: false,
+    retry: (_, error) => {
+      return error.statusCode !== 401
+    },
+  })
+
+  let isLoggedIn
+  if (query.status === 'success' && query.data?.email !== null) {
+    isLoggedIn = true
+  }
+  if (query.status === 'error' && query.failureReason?.statusCode === 401) {
+    isLoggedIn = false
+  }
+  return {
+    ...query,
+    user: query.data,
+    isLoggedIn,
+  }
+}
--- a/src/frontend/src/routes/Conference.tsx
+++ b/src/frontend/src/routes/Conference.tsx
@@ -0,0 +1,81 @@
+import { fetchRoom } from '@/api/fetchRoom'
+import { BoxScreen } from '@/layout/BoxScreen'
+import { ErrorScreen } from '@/layout/ErrorScreen'
+import { ForbiddenScreen } from '@/layout/ForbiddenScreen'
+import { LoadingScreen } from '@/layout/LoadingScreen'
+import { Screen } from '@/layout/Screen'
+import { A } from '@/primitives/A'
+import { H1 } from '@/primitives/H'
+import { keys } from '@/queries/keys'
+import {
+  LiveKitRoom,
+  VideoConference,
+  PreJoin,
+  LocalUserChoices,
+} from '@livekit/components-react'
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import { Link, useLocation, useParams } from 'wouter'
+
+export const Conference = () => {
+  const { roomId } = useParams()
+  const [, navigate] = useLocation()
+  const { status, data } = useQuery({
+    queryKey: [keys.room, roomId],
+    queryFn: ({ queryKey }) => fetchRoom(queryKey[1] as string),
+  })
+
+  const [userConfig, setUserConfig] = useState<LocalUserChoices | null>(null)
+
+  if (!userConfig) {
+    return (
+      <BoxScreen>
+        <H1>Verify your settings before joining</H1>
+        <PreJoin
+          persistUserChoices
+          onSubmit={(choices) => {
+            setUserConfig(choices)
+          }}
+        />
+        <p>
+          <Link to="/" asChild>
+            <A size="small">Back to homescreen</A>
+          </Link>
+        </p>
+      </BoxScreen>
+    )
+  }
+
+  if (status === 'error' || (status === 'success' && !data?.livekit)) {
+    return <ErrorScreen />
+  }
+
+  if (data?.is_public === false) {
+    return <ForbiddenScreen />
+  }
+
+  if (data?.livekit?.token) {
+    return (
+      <Screen>
+        <LiveKitRoom
+          serverUrl={import.meta.env.VITE_LIVEKIT_SERVER_URL}
+          token={data?.livekit?.token}
+          connect={true}
+          audio={{
+            deviceId: userConfig.audioDeviceId,
+          }}
+          video={{
+            deviceId: userConfig.videoDeviceId,
+          }}
+          onDisconnected={() => {
+            navigate('/')
+          }}
+        >
+          <VideoConference />
+        </LiveKitRoom>
+      </Screen>
+    )
+  }
+
+  return <LoadingScreen />
+}
--- a/src/frontend/src/routes/Home.tsx
+++ b/src/frontend/src/routes/Home.tsx
@@ -0,0 +1,49 @@
+import { useLocation } from 'wouter'
+import { useUser } from '@/queries/useUser'
+import { Button } from '@/primitives/Button'
+import { A } from '@/primitives/A'
+import { Bold } from '@/primitives/Bold'
+import { H1 } from '@/primitives/H'
+import { P } from '@/primitives/P'
+import { Hr } from '@/primitives/Hr'
+import { apiUrl } from '@/api/apiUrl'
+import { createRandomRoom } from '@/utils/createRandomRoom'
+import { LoadingScreen } from '@/layout/LoadingScreen'
+import { BoxScreen } from '@/layout/BoxScreen'
+
+export const Home = () => {
+  const { status, isLoggedIn } = useUser()
+  const [, navigate] = useLocation()
+
+  if (status === 'pending') {
+    return <LoadingScreen asBox />
+  }
+
+  return (
+    <BoxScreen>
+      <H1>
+        Welcome in <Bold>Meet</Bold>!
+      </H1>
+      {isLoggedIn ? (
+        <Button onPress={() => navigate(`/${createRandomRoom()}`)}>
+          Create a conference call
+        </Button>
+      ) : (
+        <>
+          <P>What do you want to do? You can either:</P>
+          <Hr aria-hidden="true" />
+          <P>
+            <A href={apiUrl('/authenticate')}>
+              Login to create a conference call
+            </A>
+          </P>
+          <Hr aria-hidden="true" />
+          <P>
+            <span style={{ fontStyle: 'italic' }}>Or </span> copy a URL in your
+            browser address bar to join an existing conference call
+          </P>
+        </>
+      )}
+    </BoxScreen>
+  )
+}
--- a/src/frontend/src/routes/NotFound.tsx
+++ b/src/frontend/src/routes/NotFound.tsx
@@ -0,0 +1,8 @@
+export const NotFound = () => {
+  return (
+    <div>
+      <h1>404</h1>
+      <p>Page not found</p>
+    </div>
+  )
+}
--- a/src/frontend/src/styles/index.css
+++ b/src/frontend/src/styles/index.css
@@ -0,0 +1,7 @@
+@import './livekit.css';
+@layer reset, base, tokens, recipes, utilities;
+html,
+body,
+#root {
+  height: 100%;
+}
--- a/src/frontend/src/styles/livekit.css
+++ b/src/frontend/src/styles/livekit.css
@@ -0,0 +1,146 @@
+/* based on https://github.com/livekit/components-js/blob/main/packages/styles/scss/themes/default.scss
+for now only "visio-light" is actually used
+*/
+[data-lk-theme='visio-dark'] {
+  color-scheme: dark;
+  --lk-bg: #111;
+  --lk-bg2: #1e1e1e;
+  --lk-bg3: #2b2b2b;
+  --lk-bg4: #373737;
+  --lk-bg5: #444444;
+  --lk-fg: #fff;
+  --lk-fg2: whitesmoke;
+  --lk-fg3: #ebebeb;
+  --lk-fg4: #e0e0e0;
+  --lk-fg5: #d6d6d6;
+  --lk-border-color: rgba(255, 255, 255, 0.1);
+  --lk-accent-fg: #fff;
+  --lk-accent-bg: #1f8cf9;
+  --lk-accent2: #3396fa;
+  --lk-accent3: #47a0fa;
+  --lk-accent4: #5babfb;
+  --lk-danger-fg: #fff;
+  --lk-danger: #842029;
+  --lk-danger2: #b02a37;
+  --lk-danger3: #dc3545;
+  --lk-danger4: #e35d6a;
+  --lk-success-fg: #fff;
+  --lk-success: #146c43;
+  --lk-success2: #198754;
+  --lk-success3: #479f76;
+  --lk-success4: #75b798;
+  --lk-control-fg: var(--lk-fg);
+  --lk-control-bg: var(--lk-bg2);
+  --lk-control-hover-bg: var(--lk-bg3);
+  --lk-control-active-bg: var(--lk-bg4);
+  --lk-control-active-hover-bg: var(--lk-bg5);
+  --lk-connection-excellent: #198754;
+  --lk-connection-good: #fd7e14;
+  --lk-connection-poor: #dc3545;
+  --lk-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --lk-font-size: 16px;
+  --lk-line-height: 1.5;
+  --lk-border-radius: 0.5rem;
+  --lk-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
+  --lk-grid-gap: 0.5rem;
+  --lk-control-bar-height: 69px;
+  --lk-chat-header-height: 69px;
+
+  --lk-bg6: #777;
+  --lk-control-border-width: 1px;
+  --lk-control-border-color: var(--lk-bg5);
+  --lk-control-border: var(--lk-control-border-color);
+  --lk-control-hover-border: var(--lk-bg6);
+}
+
+[data-lk-theme='visio-light'] {
+  color-scheme: light;
+  --lk-bg: #fff;
+  --lk-bg2: #f3f4f6;
+  --lk-bg3: #e5e7eb;
+  --lk-bg4: #d1d5db;
+  --lk-bg5: #9ca3af;
+  --lk-fg: #111;
+  --lk-fg2: #18181b;
+  --lk-fg3: #27272a;
+  --lk-fg4: #3f3f46;
+  --lk-fg5: #52525b;
+  --lk-border-color: rgba(255, 255, 255, 0.1);
+  --lk-accent-fg: #fff;
+  --lk-accent-bg: #1f8cf9;
+  --lk-accent2: #3396fa;
+  --lk-accent3: #47a0fa;
+  --lk-accent4: #5babfb;
+  --lk-danger-fg: var(--lk-fg);
+  --lk-danger: #f8d7da;
+  --lk-danger2: #f1aeb5;
+  --lk-danger3: #ea868f;
+  --lk-danger4: #e35d6a;
+  --lk-success-fg: #fff;
+  --lk-success: #146c43;
+  --lk-success2: #198754;
+  --lk-success3: #479f76;
+  --lk-success4: #75b798;
+  --lk-control-fg: var(--lk-fg);
+  --lk-control-bg: var(--lk-bg2);
+  --lk-control-hover-bg: var(--lk-bg3);
+  --lk-control-active-bg: var(--lk-bg4);
+  --lk-control-active-hover-bg: var(--lk-bg5);
+  --lk-connection-excellent: #198754;
+  --lk-connection-good: #fd7e14;
+  --lk-connection-poor: #dc3545;
+  --lk-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --lk-font-size: 16px;
+  --lk-line-height: 1.5;
+  --lk-border-radius: 0.5rem;
+  --lk-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
+  --lk-grid-gap: 0.5rem;
+  --lk-control-bar-height: 69px;
+  --lk-chat-header-height: 69px;
+
+  --lk-bg6: #6b7280;
+  --lk-control-border-width: 1px;
+  --lk-control-border-color: var(--lk-bg5);
+  --lk-control-border: var(--lk-control-border-color);
+  --lk-control-hover-border: var(--lk-bg6);
+}
+
+[data-lk-theme] {
+  background-color: var(--lk-bg);
+}
+
+.lk-button,
+.lk-start-audio-button,
+.lk-chat-toggle,
+.lk-disconnect-button {
+  border-color: var(--lk-control-border);
+  border-width: var(--lk-control-border-width);
+  border-style: solid;
+}
+
+.lk-button-group > .lk-button {
+  border-right-color: transparent;
+}
+
+.lk-button-group > .lk-button-group-menu > .lk-button {
+  border-left-color: transparent;
+}
+.lk-button:not(:disabled):hover,
+.lk-start-audio-button:not(:disabled):hover,
+.lk-chat-toggle:not(:disabled):hover {
+  border-color: var(--lk-control-hover-border);
+}
+
+.lk-disconnect-button {
+  --lk-control-border: var(--lk-danger3);
+}
+
+.lk-disconnect-button:not(:disabled):hover {
+  --lk-control-hover-bg: var(--lk-danger2);
+}
+
+.lk-prejoin {
+  padding-top: 0;
+}
--- a/src/frontend/src/utils/createRandomRoom.ts
+++ b/src/frontend/src/utils/createRandomRoom.ts
@@ -0,0 +1,5 @@
+import { slugify } from './slugify'
+
+export const createRandomRoom = () => {
+  return slugify(crypto.randomUUID())
+}
--- a/src/frontend/src/utils/slugify.ts
+++ b/src/frontend/src/utils/slugify.ts
@@ -0,0 +1,10 @@
+export const slugify = (str: string) => {
+  return str
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .trim()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+}
--- a/src/frontend/src/vite-env.d.ts
+++ b/src/frontend/src/vite-env.d.ts
@@ -1,9 +1,9 @@
 /// <reference types="vite/client" />
 interface ImportMetaEnv {
-  readonly VITE_API_BASE_URL: string;
-  readonly VITE_LIVEKIT_SERVER_URL: string;
+  readonly VITE_API_BASE_URL: string
+  readonly VITE_LIVEKIT_SERVER_URL: string
 }

 interface ImportMeta {
-  readonly env: ImportMetaEnv;
+  readonly env: ImportMetaEnv
 }
--- a/src/frontend/tsconfig.app.json
+++ b/src/frontend/tsconfig.app.json
@@ -21,7 +21,11 @@
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
  },
-  "include": ["src"]
+  "include": ["src", "@types"]
 }
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@@ -1,11 +1,12 @@
 import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'

 // https://vitejs.dev/config/
-export default defineConfig(({mode}) => {
-  const env = loadEnv(mode, process.cwd());
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
  return {
-    plugins: [react()],
+    plugins: [react(), tsconfigPaths()],
    server: {
      port: parseInt(env.VITE_PORT) || 3000,
      host: env.VITE_HOST || 'localhost',
				`@@ -1 +0,0 @@`
				<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>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.376 12.4161L8.77735 19.4818C8.54759 19.635 8.23715 19.5729 8.08397 19.3432C8.02922 19.261 8 19.1645 8 19.0658V4.93433C8 4.65818 8.22386 4.43433 8.5 4.43433C8.59871 4.43433 8.69522 4.46355 8.77735 4.5183L19.376 11.584C19.6057 11.7372 19.6678 12.0477 19.5146 12.2774C19.478 12.3323 19.4309 12.3795 19.376 12.4161Z"></path></svg>`