("")
+
+ const onSubmit = (e: FormEvent) => {
+ e.preventDefault()
+
+ if (newTimerName === LOCAL) {
+ dispatch(resetTimer())
+ } else {
+ dispatch(createTimer({ id: newTimerName, source: name }))
+ }
+
+ setNewTimerName("")
+ }
+
+ return (
+
+ )
+}
diff --git a/src/features/newTimerForm/slice.ts b/src/features/newTimerForm/slice.ts
new file mode 100644
index 0000000..b8711c3
--- /dev/null
+++ b/src/features/newTimerForm/slice.ts
@@ -0,0 +1,45 @@
+import { createSlice } from "@reduxjs/toolkit"
+import type { RootState } from "@/app/store"
+import { createTimer } from "@/features/timersList/thunks"
+import { STATUS } from "@/app/constants"
+import type { FetchStatus } from "@/app/types"
+
+export const name = "form"
+
+const initialState: FetchStatus = {
+ status: STATUS.idle,
+ error: null,
+}
+
+export const form = createSlice({
+ name,
+ initialState,
+ reducers: {},
+ extraReducers: builder => {
+ builder.addCase(createTimer.pending, (state, action) => {
+ if (action.meta.arg.source === name) {
+ state.status = STATUS.pending
+ state.error = null
+ }
+ })
+ builder.addCase(createTimer.fulfilled, (state, action) => {
+ if (action.meta.arg.source === name) {
+ state.status = STATUS.succeeded
+ state.error = null
+ }
+ })
+ builder.addCase(createTimer.rejected, (state, action: any) => {
+ if (action.meta.arg.source === name) {
+ state.status = STATUS.failed
+ state.error = action.payload ?? "Unknown Error"
+ }
+ })
+ },
+})
+
+export const {} = form.actions
+
+export default form.reducer
+
+export const selectFormStatus = (state: RootState) => state.form.status
+export const selectFormError = (state: RootState) => state.form.error
diff --git a/src/features/settings/Settings.tsx b/src/features/settings/Settings.tsx
new file mode 100644
index 0000000..e65fad7
--- /dev/null
+++ b/src/features/settings/Settings.tsx
@@ -0,0 +1,67 @@
+import {
+ Radio,
+ RadioGroup,
+ Checkbox,
+ Button,
+ makeStyles,
+} from "@fluentui/react-components"
+import { useAppDispatch, useAppSelector } from "@/app/hooks"
+import {
+ toggleTabs,
+ setTheme,
+ togglePreserveLocalTimer,
+ selectPreserveLocalTimer,
+} from "@/features/settings/slice"
+import { selectTabsView, selectTheme } from "@/features/settings/slice"
+import type { AppTheme } from "@/app/types"
+import { THEME } from "@/app/constants"
+
+const useStyles = makeStyles({
+ container: {
+ margin: "20px 0 0 20px",
+ display: "flex",
+ flexDirection: "column",
+ gap: "10px",
+ },
+})
+
+export const Settings = () => {
+ const styles = useStyles()
+ const dispatch = useAppDispatch()
+ const tabsView = useAppSelector(selectTabsView)
+ const theme = useAppSelector(selectTheme)
+ const preserve = useAppSelector(selectPreserveLocalTimer)
+
+ return (
+
+
+ dispatch(setTheme(data.value as AppTheme))}
+ aria-label="theme"
+ >
+
+
+
+ dispatch(togglePreserveLocalTimer())}
+ label="Preserve local timer between sessions"
+ />
+
+
+ )
+}
diff --git a/src/features/settings/middleware.ts b/src/features/settings/middleware.ts
new file mode 100644
index 0000000..c113820
--- /dev/null
+++ b/src/features/settings/middleware.ts
@@ -0,0 +1,29 @@
+import { Middleware } from "@reduxjs/toolkit"
+import { toggleTabs, togglePreserveLocalTimer } from "@/features/settings/slice"
+import { saveLocalTimerToStorage } from "../timer/slice"
+
+export const settingsMiddleware: Middleware = store => next => action => {
+ const result = next(action)
+ const state = store.getState()
+
+ if (toggleTabs.match(action)) {
+ const { tabsView } = state.settings
+
+ const searchParams = new URLSearchParams(window.location.search)
+ searchParams.set("tabsView", tabsView)
+ const newUrl = `${window.location.pathname}?${searchParams.toString()}`
+ window.history.replaceState({}, "", newUrl)
+ }
+
+ if (togglePreserveLocalTimer.match(action)) {
+ const { preserveLocalTimer } = state.settings
+
+ if (preserveLocalTimer) {
+ store.dispatch(saveLocalTimerToStorage())
+ } else {
+ localStorage.removeItem("localTimer")
+ }
+ }
+
+ return result
+}
diff --git a/src/features/settings/slice.ts b/src/features/settings/slice.ts
new file mode 100644
index 0000000..9752dd7
--- /dev/null
+++ b/src/features/settings/slice.ts
@@ -0,0 +1,43 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { RootState } from "@/app/store"
+import { SettingState } from "./types"
+import type { AppTheme } from "@/app/types"
+import { THEME } from "@/app/constants"
+
+const queryString = window.location.search
+const urlParams = new URLSearchParams(queryString)
+const tabsViewParam = urlParams.get("tabsView")
+const tabsView = !(tabsViewParam === "false")
+const localTimer: string | null = localStorage.getItem("localTimer")
+
+const initialState: SettingState = {
+ tabsView,
+ theme: THEME.light,
+ preserveLocalTimer: !!localTimer,
+}
+
+export const settings = createSlice({
+ name: "tabsView",
+ initialState,
+ reducers: {
+ toggleTabs: state => {
+ state.tabsView = !state.tabsView
+ },
+ setTheme: (state, action: PayloadAction) => {
+ state.theme = action.payload
+ },
+ togglePreserveLocalTimer: state => {
+ state.preserveLocalTimer = !state.preserveLocalTimer
+ },
+ },
+})
+
+export const { toggleTabs, setTheme, togglePreserveLocalTimer } =
+ settings.actions
+
+export const selectTabsView = (state: RootState) => state.settings.tabsView
+export const selectTheme = (state: RootState) => state.settings.theme
+export const selectPreserveLocalTimer = (state: RootState) =>
+ state.settings.preserveLocalTimer
+
+export default settings.reducer
diff --git a/src/features/settings/types.ts b/src/features/settings/types.ts
new file mode 100644
index 0000000..d98ad48
--- /dev/null
+++ b/src/features/settings/types.ts
@@ -0,0 +1,7 @@
+import type { AppTheme } from "@/app/types"
+
+export interface SettingState {
+ tabsView: boolean
+ theme: AppTheme
+ preserveLocalTimer: boolean
+}
diff --git a/src/features/timer/LocalTimer.tsx b/src/features/timer/LocalTimer.tsx
new file mode 100644
index 0000000..6796a72
--- /dev/null
+++ b/src/features/timer/LocalTimer.tsx
@@ -0,0 +1,27 @@
+import { useAppSelector } from "@/app/hooks"
+import {
+ selectLocalTimer,
+ selectStart,
+ resetTimer,
+} from "@/features/timer/slice"
+import { formatTime } from "@/helpers.ts/formatTime"
+import { TableRow, TableCell, Button } from "@fluentui/react-components"
+import { useAppDispatch } from "@/app/hooks"
+import { LOCAL } from "@/app/constants"
+
+export default function LocalTimer() {
+ useAppSelector(selectLocalTimer)
+ const start = useAppSelector(selectStart)
+ const now = Date.now() / 1000
+ const dispatch = useAppDispatch()
+
+ return (
+
+ {LOCAL}
+ {formatTime(now - start)}
+
+
+
+
+ )
+}
diff --git a/src/features/timer/ServerTimer.tsx b/src/features/timer/ServerTimer.tsx
new file mode 100644
index 0000000..fbd85b9
--- /dev/null
+++ b/src/features/timer/ServerTimer.tsx
@@ -0,0 +1,50 @@
+import { useAppSelector } from "@/app/hooks"
+import { TableCell, TableRow, Button } from "@fluentui/react-components"
+import { selectLocalTimer } from "./slice"
+import { TimerWithId } from "@/features/timersList/types"
+import { formatTime } from "@/helpers.ts/formatTime"
+import { useAppDispatch } from "@/app/hooks"
+import { createTimer } from "@/features/timersList/thunks"
+import { name } from "@/features/timersList/slice"
+import {
+ selectResetId,
+ selectResetStatus,
+ selectResetError,
+} from "@/features/timersList/slice"
+import { ThemeSpinner } from "@/components/ThemeSpinner"
+import { STATUS } from "@/app/constants"
+
+export default function ServerTimer({ id, elapsed, receivedAt }: TimerWithId) {
+ useAppSelector(selectLocalTimer)
+ const now = Date.now() / 1000
+ const dispatch = useAppDispatch()
+ const resetStatus = useAppSelector(selectResetStatus)
+ const resetId = useAppSelector(selectResetId)
+ const isCurrentId = id === resetId
+ const isPending = resetStatus === STATUS.pending && isCurrentId
+ const isFailed = resetStatus === STATUS.failed && isCurrentId
+ const error = useAppSelector(selectResetError)
+
+ return (
+
+ {id}
+ {formatTime(elapsed + (now - receivedAt))}
+
+
+ {isPending && (
+
+ )}
+ {isFailed && (
+ {error}
+ )}
+
+
+ )
+}
diff --git a/src/features/timer/middelware.ts b/src/features/timer/middelware.ts
new file mode 100644
index 0000000..ac28d66
--- /dev/null
+++ b/src/features/timer/middelware.ts
@@ -0,0 +1,53 @@
+import { Middleware } from "@reduxjs/toolkit"
+import {
+ startTimer,
+ restoreTimer,
+ saveLocalTimerToStorage,
+ stopTimer,
+ resetTimer,
+ tick,
+} from "@/features/timer/slice"
+import { FREQUENCY_MS } from "@/app/constants"
+
+export const timerMiddelware: Middleware = store => {
+ let intervalId: ReturnType | null = null
+
+ return next => action => {
+ const result = next(action)
+ const state = store.getState()
+ const { preserveLocalTimer } = state.settings
+
+ if (startTimer.match(action)) {
+ if (preserveLocalTimer) {
+ const localTimer: string | null = localStorage.getItem("localTimer")
+
+ localTimer !== null && store.dispatch(restoreTimer(+localTimer))
+ }
+
+ const frequencyMs = action.payload
+
+ if (intervalId === null) {
+ intervalId = setInterval(() => {
+ store.dispatch(tick(frequencyMs || FREQUENCY_MS))
+ }, frequencyMs)
+ }
+ }
+
+ if (saveLocalTimerToStorage.match(action) || resetTimer.match(action)) {
+ const { start } = state.timer
+
+ if (preserveLocalTimer) {
+ localStorage.setItem("localTimer", start)
+ }
+ }
+
+ if (stopTimer.match(action)) {
+ intervalId !== null && clearInterval(intervalId)
+ intervalId = null
+
+ store.dispatch(saveLocalTimerToStorage())
+ }
+
+ return result
+ }
+}
diff --git a/src/features/timer/slice.ts b/src/features/timer/slice.ts
new file mode 100644
index 0000000..1a69127
--- /dev/null
+++ b/src/features/timer/slice.ts
@@ -0,0 +1,40 @@
+import { createSlice, PayloadAction, createAction } from "@reduxjs/toolkit"
+import type { RootState } from "@/app/store"
+
+interface LocalTimerState {
+ start: number
+ localTimer: number
+}
+
+const initialState: LocalTimerState = {
+ start: 0,
+ localTimer: 0,
+}
+
+export const timer = createSlice({
+ name: "timer",
+ initialState: initialState,
+ reducers: {
+ tick: (state, action: PayloadAction) => {
+ state.localTimer += action.payload
+ },
+ startTimer: (state, _action: PayloadAction) => {
+ state.start = Date.now() / 1000
+ },
+ restoreTimer: (state, action: { payload: number }) => {
+ state.start = action.payload
+ },
+ resetTimer: (state, _action: PayloadAction) => {
+ state.start = Date.now() / 1000
+ },
+ },
+})
+
+export const { tick, startTimer, restoreTimer, resetTimer } = timer.actions
+export const saveLocalTimerToStorage = createAction("timer/saveLocalToStorage")
+export const stopTimer = createAction("timer/stopTimer")
+
+export default timer.reducer
+
+export const selectLocalTimer = (state: RootState) => state.timer.localTimer
+export const selectStart = (state: RootState) => state.timer.start
diff --git a/src/features/timersList/TimersList.tsx b/src/features/timersList/TimersList.tsx
new file mode 100644
index 0000000..ff46b53
--- /dev/null
+++ b/src/features/timersList/TimersList.tsx
@@ -0,0 +1,86 @@
+import { useEffect } from "react"
+import {
+ TableBody,
+ TableRow,
+ Table,
+ TableHeader,
+ TableHeaderCell,
+ makeStyles,
+} from "@fluentui/react-components"
+import { useAppSelector, useAppDispatch } from "@/app/hooks"
+import {
+ selectAllTimers,
+ selectIsInitialLoading,
+ selectTimersStatus,
+ selectTimersError,
+} from "@/features/timersList/slice"
+import { fetchTimers } from "@/features/timersList/thunks"
+import LocalTimer from "@/features/timer/LocalTimer"
+import ServerTimer from "@/features/timer/ServerTimer"
+import { ThemeSpinner } from "@/components/ThemeSpinner"
+import { STATUS } from "@/app/constants"
+
+const columns = [
+ { columnKey: "name", label: "Name" },
+ { columnKey: "value", label: "Value" },
+ { columnKey: "action", label: "Action" },
+]
+
+const useStyles = makeStyles({
+ spinnerContainer: {
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ minHeight: "42px",
+ },
+})
+
+export const TimersList = () => {
+ const styles = useStyles()
+ const dispatch = useAppDispatch()
+ const timers = useAppSelector(selectAllTimers)
+ const timersStatus = useAppSelector(selectTimersStatus)
+ const isInitialLoading = useAppSelector(selectIsInitialLoading)
+ const error = useAppSelector(selectTimersError)
+
+ useEffect(() => {
+ if (timersStatus === "idle") {
+ dispatch(fetchTimers())
+ }
+
+ const interval = setInterval(() => {
+ dispatch(fetchTimers())
+ }, 30000)
+ return () => clearInterval(interval)
+ }, [])
+
+ return (
+ <>
+
+
+
+ {columns.map(column => (
+
+ {column.label}
+
+ ))}
+
+
+
+
+ {timers.map(([id, timer]) => (
+
+ ))}
+
+
+
+ {timersStatus === STATUS.pending && isInitialLoading && (
+
+ )}
+ {timersStatus === STATUS.failed && (
+ {error}
+ )}
+
+
+ )
+}
diff --git a/src/features/timersList/api.ts b/src/features/timersList/api.ts
new file mode 100644
index 0000000..c3da9a7
--- /dev/null
+++ b/src/features/timersList/api.ts
@@ -0,0 +1,61 @@
+import { Timer, TimerResponse } from "./types"
+const URL = import.meta.env.VITE_API_URL
+
+export async function getTimer(id: string): Promise {
+ const response = await fetch(`${URL}/${id}`)
+
+ if (!response.ok) {
+ let message = `Server returned ${response.status}`
+
+ try {
+ const data = await response.json()
+ if (data?.message) message = data.message
+ } catch {}
+
+ throw new Error(message)
+ }
+
+ const data: Timer = await response.json()
+
+ return data
+}
+
+export async function getListOfTimers(): Promise {
+ const response = await fetch(`${URL}/list`)
+
+ if (!response.ok) {
+ let message = `Server returned ${response.status}`
+
+ try {
+ const data = await response.json()
+ if (data?.message) message = data.message
+ } catch {}
+
+ throw new Error(message)
+ }
+
+ const data: string[] = await response.json()
+
+ return data
+}
+
+export async function postTimer(id: string): Promise {
+ const response = await fetch(`${URL}/reset/${id}`, {
+ method: "POST",
+ })
+
+ if (!response.ok) {
+ let message = `Server returned ${response.status}`
+
+ try {
+ const data = await response.json()
+ if (data?.message) message = data.message
+ } catch {}
+
+ throw new Error(message)
+ }
+
+ const data: Timer = await response.json()
+
+ return data
+}
diff --git a/src/features/timersList/slice.ts b/src/features/timersList/slice.ts
new file mode 100644
index 0000000..25d1e69
--- /dev/null
+++ b/src/features/timersList/slice.ts
@@ -0,0 +1,94 @@
+import { createSlice, createSelector } from "@reduxjs/toolkit"
+import type { RootState } from "@/app/store"
+import { Timer, TimersState } from "./types"
+import { fetchTimers, createTimer } from "./thunks"
+import { STATUS } from "@/app/constants"
+
+export const name = "timersList"
+
+const initialState: TimersState = {
+ map: {},
+ fetchTimers: {
+ status: STATUS.idle,
+ error: null,
+ },
+ resetTimer: {
+ id: "",
+ status: STATUS.idle,
+ error: null,
+ },
+ isInitialLoading: true,
+}
+
+export const timers = createSlice({
+ name,
+ initialState,
+ reducers: {},
+ extraReducers: builder => {
+ builder.addCase(fetchTimers.pending, state => {
+ state.fetchTimers.status = STATUS.pending
+ state.fetchTimers.error = null
+ })
+ builder.addCase(fetchTimers.fulfilled, (state, action) => {
+ state.fetchTimers.status = STATUS.succeeded
+ state.fetchTimers.error = null
+ state.isInitialLoading = false
+ state.map = action.payload.reduce(
+ (acc, { id, start, elapsed, receivedAt }) => {
+ acc[id] = { start, elapsed, receivedAt }
+ return acc
+ },
+ {} as Record,
+ )
+ })
+ builder.addCase(fetchTimers.rejected, (state, action) => {
+ state.fetchTimers.status = STATUS.failed
+ state.fetchTimers.error = action.payload ?? "Unknown Error"
+ })
+ builder.addCase(createTimer.pending, (state, action) => {
+ const { source, id } = action.meta.arg
+
+ if (source === name) {
+ state.resetTimer.status = STATUS.pending
+ state.resetTimer.error = null
+ state.resetTimer.id = id
+ }
+ })
+ builder.addCase(createTimer.fulfilled, (state, action) => {
+ const { id, elapsed, start, receivedAt } = action.payload
+ if (action.meta.arg.source === name) {
+ state.resetTimer.status = STATUS.succeeded
+ state.resetTimer.error = null
+ }
+ state.map[id] = { elapsed, start, receivedAt }
+ })
+ builder.addCase(createTimer.rejected, (state, action: any) => {
+ if (action.meta.arg.source === name) {
+ state.resetTimer.status = STATUS.failed
+ state.resetTimer.error = action.payload ?? "Unknown Error"
+ }
+ })
+ },
+})
+
+export const {} = timers.actions
+
+export default timers.reducer
+
+const selectTimerMap = (state: RootState) => state.timers.map
+export const selectAllTimers = createSelector(
+ selectTimerMap,
+ (map: Record) => Object.entries(map),
+)
+export const selectTimersStatus = (state: RootState) =>
+ state.timers.fetchTimers.status
+export const selectTimersError = (state: RootState) =>
+ state.timers.fetchTimers.error
+export const selectIsInitialLoading = (state: RootState) =>
+ state.timers.isInitialLoading
+
+export const selectResetError = (state: RootState) =>
+ state.timers.resetTimer.error
+export const selectResetStatus = (state: RootState) =>
+ state.timers.resetTimer.status
+export const selectResetId = (state: RootState) => state.timers.resetTimer.id
diff --git a/src/features/timersList/thunks.ts b/src/features/timersList/thunks.ts
new file mode 100644
index 0000000..0c0e95f
--- /dev/null
+++ b/src/features/timersList/thunks.ts
@@ -0,0 +1,61 @@
+import { createAppAsyncThunk } from "@/app/withTypes"
+import { SliceNames, TimerResponse, TimerWithId } from "./types"
+import { getTimer, getListOfTimers, postTimer } from "./api"
+
+export const fetchTimerById = createAppAsyncThunk(
+ "timer/fetchTimerById",
+ async (id: string, { rejectWithValue }) => {
+ try {
+ const response: TimerResponse = await getTimer(id)
+
+ return response
+ } catch (err: unknown) {
+ if (err instanceof Error) {
+ return rejectWithValue(err.message)
+ }
+ return rejectWithValue("Unknown error")
+ }
+ },
+)
+
+export const fetchTimers = createAppAsyncThunk<
+ TimerWithId[],
+ void,
+ { rejectValue: string }
+>("timer/fetchTimers", async (_, { rejectWithValue }) => {
+ try {
+ const ids: string[] = await getListOfTimers()
+
+ return Promise.all(
+ ids.map(async id => {
+ const response: TimerResponse = await getTimer(id)
+ const receivedAt = Date.now() / 1000
+
+ return { id, ...response, receivedAt }
+ }),
+ )
+ } catch (err: unknown) {
+ if (err instanceof Error) {
+ return rejectWithValue(err.message)
+ }
+ return rejectWithValue("Unknown error")
+ }
+})
+
+export const createTimer = createAppAsyncThunk<
+ TimerWithId,
+ { id: string; source: SliceNames },
+ { rejectValue: string }
+>("timer/createTimer", async ({ id }, { rejectWithValue }) => {
+ try {
+ const response: TimerResponse = await postTimer(id)
+ const receivedAt = Date.now() / 1000
+
+ return { id, ...response, receivedAt }
+ } catch (err: unknown) {
+ if (err instanceof Error) {
+ return rejectWithValue(err.message)
+ }
+ return rejectWithValue("Unknown error")
+ }
+})
diff --git a/src/features/timersList/types.ts b/src/features/timersList/types.ts
new file mode 100644
index 0000000..ea1d332
--- /dev/null
+++ b/src/features/timersList/types.ts
@@ -0,0 +1,23 @@
+import type { FetchStatus } from "@/app/types"
+
+type WithId = T & { id: string }
+
+export interface TimerResponse {
+ start: number
+ elapsed: number
+}
+
+export interface Timer extends TimerResponse {
+ receivedAt: number
+}
+
+export type TimerWithId = WithId
+
+export interface TimersState {
+ map: Record
+ fetchTimers: FetchStatus
+ resetTimer: WithId
+ isInitialLoading: boolean
+}
+
+export type SliceNames = "form" | "timersList"
diff --git a/src/helpers.ts/formatTime.ts b/src/helpers.ts/formatTime.ts
new file mode 100644
index 0000000..2f2b564
--- /dev/null
+++ b/src/helpers.ts/formatTime.ts
@@ -0,0 +1,9 @@
+export function formatTime(totalSeconds: number): string {
+ const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, "0")
+ const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(
+ 2,
+ "0",
+ )
+ const seconds = String(Math.trunc(totalSeconds % 60)).padStart(2, "0")
+ return `${hours}:${minutes}:${seconds}`
+}
diff --git a/src/hooks/useTicker.ts b/src/hooks/useTicker.ts
new file mode 100644
index 0000000..48cc5bb
--- /dev/null
+++ b/src/hooks/useTicker.ts
@@ -0,0 +1,15 @@
+import { useEffect } from "react"
+import { useAppDispatch } from "@/app/hooks"
+import { startTimer, stopTimer } from "@/features/timer/slice"
+
+export function useTimer(frequencyMs: number) {
+ const dispatch = useAppDispatch()
+
+ useEffect(() => {
+ dispatch(startTimer(frequencyMs))
+
+ return () => {
+ dispatch(stopTimer())
+ }
+ }, [])
+}
diff --git a/src/main.tsx b/src/main.tsx
index bf27bf0..d23c174 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,8 @@
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
-import { App } from "./App"
+import { App } from "./app/App"
+import { store } from "./app/store"
+import { Provider } from "react-redux"
const container = document.getElementById("root")
@@ -9,7 +11,9 @@ if (container) {
root.render(
-
+
+
+
,
)
} else {
diff --git a/tsconfig.app.json b/tsconfig.app.json
index ea6a38d..67f76ff 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -22,7 +22,11 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
- "types": ["vitest/globals"]
+ "types": ["vitest/globals"],
+ "baseUrl": "src",
+ "paths": {
+ "@/*": ["*"]
+ }
},
"include": ["src"]
}
diff --git a/vite.config.ts b/vite.config.ts
index 0fd6681..93125a9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,6 +7,12 @@ import packageJson from "./package.json" with { type: "json" }
export default defineConfig({
plugins: [react()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
+
server: {
open: true,
},