init

2025-03-02 17:15:58 +00:00
commit e4253e6de2
26 changed files with 1806 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,5 @@
+# Generate a client id through the twitch CLI
+VITE_CLIENT_ID=412c7e3c3df177bbd466a213ce4d05
+VITE_TWITCH_API_BASE=http://localhost:8080/mock
+# Then get yourself a token via curl -X POST 'http://localhost:8080/auth/authorize?client_id={client_id}&client_secret={client_secret}&grant_type=user_token&user_id={user_id}&scope={scopes}
+VITE_TOKEN_OVERRIDE=ed70cddba8db975
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1,2 @@
+VITE_CLIENT_ID=vzn24kqo5sq0g9duja3vpuenknend6
+VITE_TWITCH_API_BASE=https://api.twitch.tv/helix
--- a/.envrc
+++ b/.envrc
@@ -0,0 +1 @@
+use flake
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.direnv
--- a/biome.json
+++ b/biome.json
@@ -0,0 +1,26 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"all": true,
+			"correctness": {
+				"noUndeclaredDependencies": "off"
+			},
+			"complexity": {
+				"useLiteralKeys": "off"
+			},
+			"style": {
+				"useExplicitLengthCheck": "off",
+				"useNamingConvention": "off"
+			}
+		},
+		"ignore": [
+			"src/Services/Miniflux/Requests/*",
+			"src/Services/Miniflux/Responses/*"
+		]
+	}
+}
--- a/flake.lock
+++ b/flake.lock
@@ -0,0 +1,64 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": [
+          "systems"
+        ]
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1736200483,
+        "narHash": "sha256-JO+lFN2HsCwSLMUWXHeOad6QUxOuwe9UOAF/iSl1J4I=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "3f0a8ac25fb674611b98089ca3a5dd6480175751",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-24.11",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs",
+        "systems": "systems"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1680978846,
+        "narHash": "sha256-Gtqg8b/v49BFDpDetjclCYXm8mAnTrUzR0JnE2nv5aw=",
+        "owner": "nix-systems",
+        "repo": "x86_64-linux",
+        "rev": "2ecfcac5e15790ba6ce360ceccddb15ad16d08a8",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "x86_64-linux",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}
--- a/flake.nix
+++ b/flake.nix
@@ -0,0 +1,26 @@
+{
+  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-24.11";
+  inputs.systems.url = "github:nix-systems/x86_64-linux";
+  inputs.flake-utils = {
+    url = "github:numtide/flake-utils";
+    inputs.systems.follows = "systems";
+  };
+
+  outputs =
+    { nixpkgs, flake-utils, ... }:
+    flake-utils.lib.eachDefaultSystem (
+      system:
+      let
+        pkgs = nixpkgs.legacyPackages.${system};
+      in
+      {
+        devShells.default = pkgs.mkShell {
+          packages = with pkgs;[
+            biome
+            nodejs_22
+            twitch-cli
+          ];
+        };
+      }
+    );
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#000000">
+    <title>Twitch Chatter Helper</title>
+    <style>
+      body:has(dialog[open]) {
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,24 @@
+{
+	"name": "vite-template-solid",
+	"version": "0.0.0",
+	"description": "",
+	"type": "module",
+	"scripts": {
+		"start": "vite",
+		"dev": "vite",
+		"build": "vite build",
+		"serve": "vite preview"
+	},
+	"license": "MIT",
+	"devDependencies": {
+		"typescript": "^5.8.2",
+		"vite": "^6.2.0",
+		"vite-plugin-solid": "^2.11.6",
+		"vite-tsconfig-paths": "^5.1.4"
+	},
+	"dependencies": {
+		"@picocss/pico": "^2.0.6",
+		"es-toolkit": "^1.32.0",
+		"solid-js": "^1.9.5"
+	}
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,14 @@
+import { Chatters } from "@components/Chatters.tsx";
+import { Contexts } from "@contexts/Contexts.tsx";
+import type { Component } from "solid-js";
+
+export const App: Component = () => {
+	return (
+		<main class="container">
+			<h1>Current Chatters</h1>
+			<Contexts>
+				<Chatters />
+			</Contexts>
+		</main>
+	);
+};
--- a/src/components/Chatters.tsx
+++ b/src/components/Chatters.tsx
@@ -0,0 +1,214 @@
+import { TwitchServiceContext } from "@contexts/TwitchServiceContext";
+import { UserContext } from "@contexts/UserContext";
+import type { ChatterResponse } from "@services/twitch/responses/GetChattersResponse.ts";
+import type { SubscriptionResponse } from "@services/twitch/responses/GetSubscriptionsResponse.ts";
+import { useRequiredContext } from "@utils/useRequiredContext";
+import { sortBy } from "es-toolkit";
+import {
+	type Accessor,
+	type Component,
+	For,
+	type Setter,
+	Show,
+	createResource,
+	createSignal,
+} from "solid-js";
+import { ResourceComponent } from "./ResourceComponent.tsx";
+
+const ExportDialog: Component<{
+	setRef: Setter<HTMLDialogElement | undefined>;
+	ref: Accessor<HTMLDialogElement | undefined>;
+	getJson: () => string;
+}> = (props) => {
+	const [clipboardStatus, setClipboardStatus] = createSignal<
+		"Writing" | "Written" | "Initial"
+	>("Initial");
+
+	const copyClipboard = async () => {
+		setClipboardStatus("Writing");
+		await navigator.clipboard.writeText(props.getJson());
+		setClipboardStatus("Written");
+		setTimeout(() => setClipboardStatus("Initial"), 1000);
+	};
+
+	return (
+		<dialog ref={props.setRef}>
+			<article style={{ display: "grid", gap: "1rem" }}>
+				<div style={{ display: "flex" }}>
+					<button
+						type="button"
+						onClick={copyClipboard}
+						disabled={clipboardStatus() !== "Initial"}
+					>
+						<Show
+							when={clipboardStatus() === "Written"}
+							fallback={"Copy to Clipboard"}
+						>
+							Copied!
+						</Show>
+					</button>
+					<button
+						type="button"
+						onClick={() => props.ref()?.close()}
+						style={{ "margin-left": "auto" }}
+					>
+						Close
+					</button>
+				</div>
+				<pre
+					style={{ "max-height": "80vh", overflow: "auto", padding: "1rem" }}
+				>
+					{props.getJson()}
+				</pre>
+			</article>
+		</dialog>
+	);
+};
+
+const ChatttersView: Component<{
+	chatters: ChatterResponse[];
+	subscriptions: SubscriptionResponse[];
+}> = (props) => {
+	const [selected, setSelected] = createSignal<string[]>([]);
+	const [search, setSearch] = createSignal<string>("");
+	const subs = sortBy(props.subscriptions, ["user_name"]);
+	const scrubs = sortBy(
+		props.chatters.filter((chat) =>
+			props.subscriptions.find((sub) => sub.user_id !== chat.user_id),
+		),
+		["user_name"],
+	);
+
+	const onChange = (id: string) => {
+		setSelected((prev: string[]) =>
+			prev.includes(id)
+				? prev.filter((prevId) => prevId !== id)
+				: [...prev, id],
+		);
+	};
+
+	const oneHundredClick = () => {
+		setSelected([
+			...subs.slice(0, 100).map((sub) => sub.user_id),
+			...scrubs.slice(0, 100 - subs.length).map((scrub) => scrub.user_id),
+		]);
+	};
+
+	const [dialogRef, setDialogRef] = createSignal<HTMLDialogElement>();
+
+	const getJson = () =>
+		JSON.stringify(
+			props.chatters
+				.filter((chat) => selected().includes(chat.user_id))
+				.map((chat) => chat.user_name),
+			null,
+			4,
+		);
+
+	return (
+		<>
+			<ExportDialog ref={dialogRef} setRef={setDialogRef} getJson={getJson} />
+			<div style={{ display: "grid", gap: "1rem" }}>
+				<div style={{ display: "flex", gap: "1rem" }}>
+					<button
+						type="button"
+						onClick={() =>
+							setSelected(props.chatters.map((chat) => chat.user_id))
+						}
+					>
+						Select All
+					</button>
+					<button type="button" onClick={oneHundredClick}>
+						Select First 100
+					</button>
+					<button type="button" onClick={() => setSelected([])}>
+						Select None
+					</button>
+					<button
+						type="button"
+						onClick={() => dialogRef()?.showModal()}
+						style={{ "margin-left": "auto" }}
+					>
+						Export to JSON
+					</button>
+				</div>
+				<input
+					placeholder="Search"
+					onInput={(e) => setSearch(e.currentTarget.value.toLocaleLowerCase())}
+				/>
+				<article>
+					<h2>Subs</h2>
+					<For
+						each={subs.filter((sub) =>
+							search()
+								? sub.user_name.toLocaleLowerCase().includes(search())
+								: true,
+						)}
+					>
+						{(sub) => (
+							<label>
+								<input
+									type="checkbox"
+									onChange={() => onChange(sub.user_id)}
+									checked={selected().includes(sub.user_id)}
+								/>
+								{sub.user_name}
+							</label>
+						)}
+					</For>
+				</article>
+				<article>
+					<h2>Scrubs</h2>
+					<div style={{ display: "flex", "flex-wrap": "wrap", gap: "1rem" }}>
+						<For
+							each={scrubs.filter((scrub) =>
+								search()
+									? scrub.user_name.toLocaleLowerCase().includes(search())
+									: true,
+							)}
+						>
+							{(scrub) => (
+								<label>
+									<input
+										type="checkbox"
+										onChange={() => onChange(scrub.user_id)}
+										checked={selected().includes(scrub.user_id)}
+									/>
+									{scrub.user_name}
+								</label>
+							)}
+						</For>
+					</div>
+				</article>
+			</div>
+		</>
+	);
+};
+
+export const Chatters: Component = () => {
+	const twitchService = useRequiredContext(TwitchServiceContext);
+	const user = useRequiredContext(UserContext);
+
+	const [resource] = createResource(async () => {
+		const chatters = await twitchService.getChatters(user.id);
+		const subscriptions = await twitchService.getSubscribers(
+			user.id,
+			chatters.map((e) => e.user_id),
+		);
+		return {
+			chatters,
+			subscriptions,
+		};
+	});
+
+	return (
+		<ResourceComponent resource={resource}>
+			{(response) => (
+				<ChatttersView
+					chatters={response().chatters}
+					subscriptions={response().subscriptions}
+				/>
+			)}
+		</ResourceComponent>
+	);
+};
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -0,0 +1,5 @@
+import type { Component } from "solid-js";
+
+export const Loading: Component = () => {
+	return "Loading...";
+};
--- a/src/components/ResourceComponent.tsx
+++ b/src/components/ResourceComponent.tsx
@@ -0,0 +1,68 @@
+import { Loading } from "@components/Loading.tsx";
+import { parseError } from "@utils/parseError.ts";
+import {
+	type Accessor,
+	type Component,
+	type JSX,
+	Match,
+	type Resource,
+	Show,
+	Switch,
+} from "solid-js";
+
+export const ResourceComponent = <TValue,>(props: {
+	children: (value: Accessor<NonNullable<TValue>>) => JSX.Element;
+	resource: Resource<TValue>;
+	errorComponent?: (e: Accessor<Error>) => JSX.Element;
+	loadingComponent?: () => JSX.Element;
+	fallback?: JSX.Element;
+}) => {
+	const isError = () => {
+		const error = props.resource.error;
+		if (error) {
+			return parseError(error);
+		}
+		return undefined;
+	};
+
+	return (
+		<Switch fallback={props.fallback}>
+			<Match when={props.resource.loading}>
+				<Show when={props.loadingComponent} fallback={<Loading />}>
+					{(loadingComponent) => loadingComponent()()}
+				</Show>
+			</Match>
+			<Match when={isError()}>
+				{(error) => (
+					<Show
+						when={props.errorComponent}
+						fallback={<FallbackError error={error} />}
+					>
+						{(errorComponent) => errorComponent()(error)}
+					</Show>
+				)}
+			</Match>
+			<Match when={props.resource()}>{(value) => props.children(value)}</Match>
+		</Switch>
+	);
+};
+
+const FallbackError: Component<{ error: Accessor<unknown> }> = (props) => {
+	return (
+		<div role="alert" class="alert alert-error">
+			<div>
+				An error occurred
+				<details>
+					<summary>Click for details</summary>
+					<p>
+						{JSON.stringify(
+							props.error(),
+							Object.getOwnPropertyNames(props.error()),
+							2,
+						)}
+					</p>
+				</details>
+			</div>
+		</div>
+	);
+};
--- a/src/contexts/Contexts.tsx
+++ b/src/contexts/Contexts.tsx
@@ -0,0 +1,11 @@
+import type { ParentComponent } from "solid-js";
+import { TwitchServiceContextProvider } from "./TwitchServiceContext.tsx";
+import { UserContextProvider } from "./UserContext.tsx";
+
+export const Contexts: ParentComponent = (props) => {
+	return (
+		<TwitchServiceContextProvider>
+			<UserContextProvider>{props.children}</UserContextProvider>
+		</TwitchServiceContextProvider>
+	);
+};
--- a/src/contexts/TwitchServiceContext.tsx
+++ b/src/contexts/TwitchServiceContext.tsx
@@ -0,0 +1,56 @@
+import { TwitchApiService } from "@services/twitch/TwitchApiService.ts";
+import {
+	type ParentComponent,
+	Show,
+	createContext,
+	createRenderEffect,
+	createSignal,
+} from "solid-js";
+
+const searchParams = new URLSearchParams({
+	client_id: import.meta.env["VITE_CLIENT_ID"],
+	redirect_uri: new URL(location.origin).toString(),
+	response_type: "token",
+	scope: "moderator:read:chatters channel:read:subscriptions",
+});
+const url = new URL(
+	`https://id.twitch.tv/oauth2/authorize?${searchParams.toString()}`,
+);
+
+export const TwitchServiceContext = createContext<TwitchApiService>();
+
+export const TwitchServiceContextProvider: ParentComponent = (props) => {
+	const [twitchApiService, setTwitchApiService] =
+		createSignal<TwitchApiService>();
+
+	createRenderEffect(() => {
+		const devOverride = import.meta.env["VITE_TOKEN_OVERRIDE"];
+		if (devOverride) {
+			setTwitchApiService(new TwitchApiService(devOverride));
+			return;
+		}
+
+		const urlSearchParams = new URLSearchParams(location.hash.slice(1));
+		const accessToken = urlSearchParams.get("access_token");
+		if (accessToken) {
+			setTwitchApiService(new TwitchApiService(accessToken));
+			window.location.hash = "";
+		}
+	}, []);
+
+	return (
+		<Show
+			when={twitchApiService()}
+			fallback={
+				<p>
+					To use this application, please{" "}
+					<a href={url.toString()}>Connect with Twitch</a>
+				</p>
+			}
+		>
+			<TwitchServiceContext.Provider value={twitchApiService()}>
+				{props.children}
+			</TwitchServiceContext.Provider>
+		</Show>
+	);
+};
--- a/src/contexts/UserContext.tsx
+++ b/src/contexts/UserContext.tsx
@@ -0,0 +1,23 @@
+import { ResourceComponent } from "@components/ResourceComponent.tsx";
+import type { UserResponse } from "@services/twitch/responses/GetUsersResponse.ts";
+import { type ParentComponent, createContext, createResource } from "solid-js";
+import { useRequiredContext } from "../utils/useRequiredContext.ts";
+import { TwitchServiceContext } from "./TwitchServiceContext.tsx";
+
+export const UserContext = createContext<UserResponse>();
+
+export const UserContextProvider: ParentComponent = (props) => {
+	const twitchService = useRequiredContext(TwitchServiceContext);
+
+	const [resource] = createResource(async () => await twitchService.getUser());
+
+	return (
+		<ResourceComponent resource={resource}>
+			{(user) => (
+				<UserContext.Provider value={user()}>
+					{props.children}
+				</UserContext.Provider>
+			)}
+		</ResourceComponent>
+	);
+};
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -0,0 +1,8 @@
+/* @refresh reload */
+import "@picocss/pico";
+import { render } from "solid-js/web";
+import { App } from "./App.tsx";
+
+const root = document.createElement("div");
+document.body.appendChild(root);
+render(() => <App />, root);
--- a/src/services/twitch/TwitchApiService.ts
+++ b/src/services/twitch/TwitchApiService.ts
@@ -0,0 +1,89 @@
+import type {
+	ChatterResponse,
+	GetChattersResponse,
+} from "./responses/GetChattersResponse.ts";
+import type {
+	GetSubscriptionsResponse,
+	SubscriptionResponse,
+} from "./responses/GetSubscriptionsResponse.ts";
+import type {
+	GetUsersResponse,
+	UserResponse,
+} from "./responses/GetUsersResponse.ts";
+
+export class TwitchApiService {
+	baseUrl: string;
+	headers: HeadersInit;
+
+	constructor(accessToken: string) {
+		this.baseUrl = import.meta.env["VITE_TWITCH_API_BASE"];
+		this.headers = {
+			Authorization: `Bearer ${accessToken}`,
+			"Client-Id": import.meta.env["VITE_CLIENT_ID"],
+		};
+	}
+
+	private async parseResponse<T>(response: Response): Promise<T> {
+		if (!response.ok) {
+			throw new Error(
+				`${response.status.toString()}: ${await response.text()}`,
+			);
+		}
+		return await response.json();
+	}
+
+	getUser = async (): Promise<UserResponse> => {
+		const url = new URL([this.baseUrl, "users"].join("/"));
+		const response = await fetch(url.toString(), { headers: this.headers });
+		const users = await this.parseResponse<GetUsersResponse>(response);
+		return users.data[0] as UserResponse;
+	};
+
+	getChatters = async (id: string): Promise<ChatterResponse[]> => {
+		const params = new URLSearchParams({
+			broadcaster_id: id,
+			moderator_id: id,
+			first: (1000).toString(),
+		});
+		const url = new URL([this.baseUrl, "chat", "chatters"].join("/"));
+
+		const response = await fetch(`${url.toString()}?${params.toString()}`, {
+			headers: this.headers,
+		});
+		let parsed = await this.parseResponse<GetChattersResponse>(response);
+		let chatters = parsed.data;
+
+		while (parsed.pagination?.cursor) {
+			params.set("after", parsed.pagination.cursor);
+			const response = await fetch(`${url.toString()}?${params.toString()}`, {
+				headers: this.headers,
+			});
+			parsed = await this.parseResponse<GetChattersResponse>(response);
+			chatters = chatters.concat(parsed.data);
+		}
+
+		return chatters;
+	};
+
+	getSubscribers = async (
+		id: string,
+		userIds: string[],
+	): Promise<SubscriptionResponse[]> => {
+		const url = new URL([this.baseUrl, "subscriptions"].join("/"));
+		let subscribers: SubscriptionResponse[] = [];
+
+		for (let index = 0; index < userIds.length; index += 100) {
+			const ids = userIds
+				.slice(index, index + 100)
+				.map((id) => ["user_id", id]);
+			const params = new URLSearchParams([["broadcaster_id", id]].concat(ids));
+			const response = await fetch(`${url.toString()}?${params.toString()}`, {
+				headers: this.headers,
+			});
+			const parsed =
+				await this.parseResponse<GetSubscriptionsResponse>(response);
+			subscribers = subscribers.concat(parsed.data);
+		}
+		return subscribers;
+	};
+}
--- a/src/services/twitch/responses/GetChattersResponse.ts
+++ b/src/services/twitch/responses/GetChattersResponse.ts
@@ -0,0 +1,13 @@
+export interface ChatterResponse {
+	user_id: string;
+	user_login: string;
+	user_name: string;
+}
+
+export interface GetChattersResponse {
+	data: ChatterResponse[];
+	pagination?: {
+		cursor: string;
+	};
+	total: number;
+}
--- a/src/services/twitch/responses/GetSubscriptionsResponse.ts
+++ b/src/services/twitch/responses/GetSubscriptionsResponse.ts
@@ -0,0 +1,23 @@
+export interface SubscriptionResponse {
+	broadcaster_id: string;
+	broadcaster_login: string;
+	broadcaster_name: string;
+	gifter_id: string;
+	gifter_login: string;
+	gifter_name: string;
+	is_gift: boolean;
+	tier: string;
+	plan_name: string;
+	user_id: string;
+	user_name: string;
+	user_login: string;
+}
+
+export interface GetSubscriptionsResponse {
+	data: SubscriptionResponse[];
+	pagination: {
+		cursor: string;
+	};
+	total: number;
+	points: number;
+}
--- a/src/services/twitch/responses/GetUsersResponse.ts
+++ b/src/services/twitch/responses/GetUsersResponse.ts
@@ -0,0 +1,17 @@
+export interface UserResponse {
+	id: string;
+	login: string;
+	display_name: string;
+	type: string;
+	broadcaster_type: string;
+	description: string;
+	profile_image_url: string;
+	offline_image_url: string;
+	view_count: number;
+	email: string;
+	created_at: string;
+}
+
+export interface GetUsersResponse {
+	data: UserResponse[];
+}
--- a/src/utils/parseError.ts
+++ b/src/utils/parseError.ts
@@ -0,0 +1,3 @@
+export function parseError(error: unknown): Error {
+	return error instanceof Error ? error : new Error(JSON.stringify(error));
+}
--- a/src/utils/useRequiredContext.ts
+++ b/src/utils/useRequiredContext.ts
@@ -0,0 +1,13 @@
+import { type Context, useContext } from "solid-js";
+
+export const useRequiredContext = <T>(context: Context<T | undefined>): T => {
+	const getContext = useContext(context);
+
+	if (getContext === undefined) {
+		throw new Error(
+			`${context.constructor.name} must be used within a provider instance`,
+		);
+	}
+
+	return getContext;
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+	"compilerOptions": {
+		"strict": true,
+		"allowUnusedLabels": false,
+		"allowUnreachableCode": false,
+		"exactOptionalPropertyTypes": false,
+		"noFallthroughCasesInSwitch": true,
+		"noImplicitOverride": true,
+		"noImplicitReturns": true,
+		"noPropertyAccessFromIndexSignature": true,
+		"noUncheckedIndexedAccess": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+
+		"isolatedModules": true,
+
+		"checkJs": true,
+
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true,
+		"jsx": "preserve",
+		"jsxImportSource": "solid-js",
+		"types": ["vite/client"],
+		"noEmit": true,
+		"allowImportingTsExtensions": true,
+
+		"paths": {
+			"@components/*": ["./src/components/*"],
+			"@services/*": ["./src/services/*"],
+			"@contexts/*": ["./src/contexts/*"],
+			"@utils/*": ["./src/utils/*"],
+			"@src/*": ["./src/*"]
+		}
+	},
+	"include": ["src/**/*"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+	plugins: [tsconfigPaths(), solidPlugin()],
+	server: {
+		port: 3000,
+	},
+	build: {
+		target: "esnext",
+		watch: {
+			exclude: ["**/.devenv/**", "**/.direnv/**"],
+		},
+	},
+});