Project created from basic template

2025-09-29 17:56:30 +02:00
commit a4ecf845bf
26 changed files with 3887 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,44 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Turbo
+.turbo
+
+# Storage
+*.local
+.storage/
+
+# Quests
+.quests/
+
+# SQLite
+*.db-journal
+*.db-wal
+*.db-shm
+etilqs_*
+
+# Environment variables
+.env*
+!.env.example
+
+# TypeScript cache
+*.tsbuildinfo
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,63 @@
+# Agent Guidelines for Basic Template
+
+This is a foundational template for building React applications. Follow these guidelines to help users build apps effectively without breaking the established architecture.
+
+## Template Architecture Overview
+
+This template uses a client-server architecture with:
+
+- Primary language: TypeScript
+- Frontend: React 19 + Vite + Tailwind CSS 4
+- Backend: Hono server with oRPC for type-safe APIs
+- Full-stack type safety between client and server
+
+## Critical Dependencies - DO NOT MODIFY
+
+These dependencies are carefully configured and should NOT be changed:
+
+- Tailwind CSS v4 - Uses the new Vite plugin (`@tailwindcss/vite`)
+- React 19 - Latest version with new features
+- oRPC - Provides type-safe client-server communication
+- Hono - Server framework
+- Vite 7 - Build tool with specific plugins configured
+- Zod - Schema validation
+
+## Important Reminders
+
+- Main React entry point: `./src/client/app.tsx`
+- File naming: Use lowercase, dash-case (kebab-case) for filenames (e.g. `component-name.tsx`)
+- Flexbox layouts: Avoid centering containers that constrain component width in `app.tsx`
+- Persistent Storage: The `.storage/` directory is ignored by git and can be used for persistent data.
+
+## Demo Files - Reference Implementations
+
+These files provide working examples for common functionality. Use them as templates or reference when implementing similar features:
+
+> [!IMPORTANT] ALWAYS read these demo files first - Do not guess implementation based on file names.
+
+### Client Patterns
+
+- `src/client/components/demo/rpc.tsx` - RPC demo that uses uses `server/rpc/demo/storage.ts`
+- `src/client/components/demo/ai.tsx` - AI mutations using response data directly (no manual state)
+
+### Server Patterns
+
+- `src/server/rpc/demo/storage.ts` - key-value storage with live subscriptions
+- `src/server/rpc/demo/ai.ts` - AI chat completion and structured generation
+- `src/server/lib/create-kv.ts` - Simple storage setup for oRPC handlers
+
+## Adding New Features
+
+- **Do NOT create new files in demo folders** - Demo files are reference implementations only
+
+### UI Components
+
+1. Create in `src/client/components/` (organize by feature)
+2. Use Tailwind CSS
+3. Reference `demo/rpc.tsx` for RPC integration
+
+### Server Functions
+
+1. Add to `src/server/rpc/index.ts` router
+2. Reference `demo/*` for patterns
+3. Use `create-kv.ts` for simple storage
--- a/README.md
+++ b/README.md
@@ -0,0 +1,11 @@
+# Quests Base Template
+
+## Dependencies
+
+- [TypeScript](https://www.typescriptlang.org/)
+- [React](https://react.dev/)
+- [Vite](https://vite.dev/)
+- [Tailwind CSS V4](https://tailwindcss.com/)
+- [oRPC](https://orpc.unnoq.com/)
+- [Hono](https://hono.dev/)
+- [Zod](https://zod.dev/)
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,42 @@
+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 },
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+      "no-console": "warn",
+      "no-warning-comments": ["warn", { terms: ["fixme"] }],
+    },
+  }
+);
--- a/package.json
+++ b/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "quests-template-basic",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "check:types": "tsc --noEmit",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@orpc/client": "^1.8.8",
+    "@orpc/server": "^1.8.8",
+    "@orpc/tanstack-query": "^1.8.8",
+    "@tailwindcss/vite": "^4.1.12",
+    "@tanstack/react-query": "^5.85.5",
+    "hono": "^4.9.4",
+    "jsonrepair": "^3.13.0",
+    "openai": "^5.17.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwindcss": "^4",
+    "unstorage": "^1.16.1",
+    "zod": "^4.0.17"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.0",
+    "@hono/vite-dev-server": "^0.20.1",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5.0.1",
+    "eslint": "^9",
+    "eslint-plugin-react-hooks": "^6.0.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "typescript": "^5",
+    "typescript-eslint": "^8.40.0",
+    "vite": "^7.1.3",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+ignoredBuiltDependencies:
+  - "@tailwindcss/oxide"
+  - esbuild
--- a/quests.json
+++ b/quests.json
@@ -0,0 +1,8 @@
+{
+  "name": "New Project",
+  "description": "",
+  "icon": {
+    "lucide": "square-dashed",
+    "background": "conic-gradient(from 42deg at 50% 50%, #18181b, #27272a)"
+  }
+}
--- a/src/client/app.tsx
+++ b/src/client/app.tsx
@@ -0,0 +1,14 @@
+function App() {
+  return (
+    <div className="min-h-screen w-full max-w-4xl mx-auto p-4">
+      {/* Replace this placeholder content with your app components */}
+      <div className="text-center mt-72">
+        <h1 className="text-2xl mb-4 opacity-50">
+          Building your new project...
+        </h1>
+      </div>
+    </div>
+  );
+}
+
+export default App;
--- a/src/client/components/demo/ai.tsx
+++ b/src/client/components/demo/ai.tsx
@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { queryClient } from "@/client/rpc-client";
+
+export function AIDemo() {
+  const [message, setMessage] = useState("");
+  const [systemPrompt, setSystemPrompt] = useState("");
+  const [personPrompt, setPersonPrompt] = useState("");
+
+  const {
+    data: completionData,
+    mutate: complete,
+    isPending: isCompleting,
+  } = useMutation(queryClient.demo.ai.complete.mutationOptions());
+
+  const {
+    data: personData,
+    mutate: generatePerson,
+    isPending: isGenerating,
+  } = useMutation(queryClient.demo.ai.generate.mutationOptions());
+
+  // When using this demo, remove any UI below that is not relevant for the user
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-8">
+      <h2 className="text-2xl font-bold">AI Demo</h2>
+
+      <div className="space-y-6">
+        <h3 className="text-xl font-semibold">Chat Completion</h3>
+
+        <div className="space-y-4">
+          <input
+            className="w-full p-3 border border-gray-300 rounded-md"
+            placeholder="System prompt (optional)"
+            value={systemPrompt}
+            onChange={(e) => setSystemPrompt(e.target.value)}
+          />
+          <input
+            className="w-full p-3 border border-gray-300 rounded-md"
+            placeholder="Your message"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+          />
+          <button
+            className="px-6 py-3 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+            onClick={() => {
+              if (message) {
+                complete({
+                  message,
+                  systemPrompt: systemPrompt || undefined,
+                });
+              }
+            }}
+            disabled={isCompleting || !message}
+          >
+            {isCompleting ? "Generating..." : "Send Message"}
+          </button>
+        </div>
+
+        {completionData && (
+          <div className="p-4 border border-gray-200 rounded-md">
+            <h4 className="font-medium mb-2">Response:</h4>
+            <p className="leading-relaxed">{completionData.response}</p>
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-6">
+        <h3 className="text-xl font-semibold">Generate Person</h3>
+
+        <div className="space-y-4">
+          <input
+            className="w-full p-3 border border-gray-300 rounded-md"
+            placeholder="Describe the person you want to generate"
+            value={personPrompt}
+            onChange={(e) => setPersonPrompt(e.target.value)}
+          />
+          <button
+            className="px-6 py-3 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+            onClick={() => {
+              if (personPrompt) {
+                generatePerson({ prompt: personPrompt });
+              }
+            }}
+            disabled={isGenerating || !personPrompt}
+          >
+            {isGenerating ? "Generating..." : "Generate Person"}
+          </button>
+        </div>
+
+        {personData && (
+          <div className="p-4 border border-gray-200 rounded-md">
+            <h4 className="font-medium mb-3">Generated Person:</h4>
+            <div className="space-y-2">
+              <p>
+                <strong>Name:</strong> {personData.person.name}
+              </p>
+              <p>
+                <strong>Age:</strong> {personData.person.age}
+              </p>
+              <p>
+                <strong>Occupation:</strong> {personData.person.occupation}
+              </p>
+              <p>
+                <strong>Bio:</strong> {personData.person.bio}
+              </p>
+              {personData.person.nickname && (
+                <p>
+                  <strong>Nickname:</strong> {personData.person.nickname}
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/src/client/components/demo/rpc.tsx
+++ b/src/client/components/demo/rpc.tsx
@@ -0,0 +1,63 @@
+import { useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { queryClient, rpcClient } from "@/client/rpc-client";
+
+export function RPCDemo() {
+  const [value, setValue] = useState("");
+
+  // Live data query - automatically updates when server data changes
+  // Use .experimental_liveOptions() for real-time subscriptions
+  // Use .queryOptions() for static data that doesn't need live updates
+  const { data: items } = useQuery(
+    queryClient.demo.storage.live.list.experimental_liveOptions()
+  );
+
+  // Mutations handle data changes with loading states
+  // Automatically invalidates related queries on success
+  const { mutate: createItem, isPending: isCreatingItem } = useMutation(
+    queryClient.demo.storage.create.mutationOptions()
+  );
+
+  return (
+    <div>
+      <h2>Storage Demo</h2>
+
+      <div>
+        <input
+          placeholder="Value"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <button
+          onClick={() => {
+            if (value) {
+              createItem({ value });
+              setValue("");
+            }
+          }}
+          disabled={isCreatingItem}
+        >
+          {isCreatingItem ? "Adding..." : "Add Item"}
+        </button>
+      </div>
+
+      <div>
+        <h3>Items:</h3>
+        {items?.map((item) => (
+          <div key={item.id}>
+            {item.id}: {item.value}
+            <button
+              onClick={() => {
+                // Direct RPC calls bypass React Query caching/mutations
+                // Use for one-off operations or when you need immediate execution
+                return rpcClient.demo.storage.remove(item.id);
+              }}
+            >
+              Remove
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles/globals.css";
+import App from "./app.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+);
--- a/src/client/rpc-client.ts
+++ b/src/client/rpc-client.ts
@@ -0,0 +1,12 @@
+import type { RouterClient } from "@orpc/server";
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import { createTanstackQueryUtils } from "@orpc/tanstack-query";
+
+import type { router } from "@/server/rpc";
+
+const link = new RPCLink({ url: `${window.location.origin}/rpc` });
+
+export const rpcClient: RouterClient<typeof router> = createORPCClient(link);
+
+export const queryClient = createTanstackQueryUtils(rpcClient);
--- a/src/client/styles/globals.css
+++ b/src/client/styles/globals.css
@@ -0,0 +1 @@
+@import "tailwindcss";
--- a/src/client/vite-env.d.ts
+++ b/src/client/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -0,0 +1,11 @@
+import { Hono } from "hono";
+
+import { rpcApp } from "./routes/rpc";
+import { clientEntry } from "./routes/client-entry";
+
+const app = new Hono();
+
+app.route("/rpc", rpcApp);
+app.get("/*", clientEntry);
+
+export default app;
--- a/src/server/lib/create-kv.ts
+++ b/src/server/lib/create-kv.ts
@@ -0,0 +1,41 @@
+import { createStorage, StorageValue, WatchEvent } from "unstorage";
+import fsDriver from "unstorage/drivers/fs";
+
+const STORAGE_PATH = "./.storage"; // It is .gitignored
+
+export function createKV<T extends StorageValue>(name: string) {
+  const storage = createStorage<T>({
+    driver: fsDriver({ base: `${STORAGE_PATH}/${name}` }),
+  });
+
+  // Async generator to play work well with oRPC live queries
+  async function* subscribe() {
+    let resolve: (value: { event: WatchEvent; key: string }) => void;
+    let promise = new Promise<{ event: WatchEvent; key: string }>(
+      (r) => (resolve = r)
+    );
+
+    const unwatch = await storage.watch((event, key) => {
+      resolve({ event, key });
+      promise = new Promise<{ event: WatchEvent; key: string }>(
+        (r) => (resolve = r)
+      );
+    });
+
+    try {
+      while (true) yield await promise;
+    } finally {
+      await unwatch();
+    }
+  }
+
+  return {
+    ...storage,
+    getAllItems: async () => {
+      const keys = await storage.getKeys();
+      const values = await storage.getItems(keys);
+      return values.map(({ value }) => value);
+    },
+    subscribe,
+  };
+}
--- a/src/server/lib/openai.ts
+++ b/src/server/lib/openai.ts
@@ -0,0 +1,28 @@
+import { jsonrepair } from "jsonrepair";
+import { z } from "zod";
+import { makeParseableResponseFormat } from "openai/lib/parser";
+
+import type { AutoParseableResponseFormat } from "openai/lib/parser";
+import type { ResponseFormatJSONSchema } from "openai/resources";
+
+export function zodResponseFormat<ZodInput extends z.ZodType>(
+  zodObject: ZodInput,
+  name: string,
+  props?: Omit<
+    ResponseFormatJSONSchema.JSONSchema,
+    "schema" | "strict" | "name"
+  >
+): AutoParseableResponseFormat<z.infer<ZodInput>> {
+  return makeParseableResponseFormat(
+    {
+      type: "json_schema",
+      json_schema: {
+        ...props,
+        name,
+        strict: true,
+        schema: z.toJSONSchema(zodObject, { target: "draft-7" }),
+      },
+    },
+    (content) => zodObject.parse(JSON.parse(jsonrepair(content)))
+  );
+}
--- a/src/server/routes/client-entry.tsx
+++ b/src/server/routes/client-entry.tsx
@@ -0,0 +1,33 @@
+/** @jsxImportSource hono/jsx */
+import type { Context } from "hono";
+import viteReact from "@vitejs/plugin-react";
+
+import type { BlankEnv } from "hono/types";
+
+export function clientEntry(c: Context<BlankEnv>) {
+  return c.html(
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <title>New Quest</title>
+        {import.meta.env.PROD ? (
+          <script src="/static/main.js" type="module" />
+        ) : (
+          <>
+            <script
+              dangerouslySetInnerHTML={{
+                __html: viteReact.preambleCode.replace("__BASE__", "/"),
+              }}
+              type="module"
+            />
+            <script src="/src/client/main.tsx" type="module" />
+          </>
+        )}
+      </head>
+      <body>
+        <div id="root" />
+      </body>
+    </html>,
+  );
+}
--- a/src/server/routes/rpc.ts
+++ b/src/server/routes/rpc.ts
@@ -0,0 +1,21 @@
+import { RPCHandler } from "@orpc/server/fetch";
+
+import { router } from "@/server/rpc";
+import { Hono } from "hono";
+
+export const rpcApp = new Hono();
+
+const handler = new RPCHandler(router);
+
+rpcApp.use("/*", async (c, next) => {
+  const { matched, response } = await handler.handle(c.req.raw, {
+    prefix: "/rpc",
+  });
+
+  if (matched) {
+    return c.newResponse(response.body, response);
+  }
+
+  await next();
+  return;
+});
--- a/src/server/rpc/demo/ai.ts
+++ b/src/server/rpc/demo/ai.ts
@@ -0,0 +1,95 @@
+import OpenAI from "openai";
+import { os } from "@orpc/server";
+import { z } from "zod";
+
+import { zodResponseFormat } from "@/server/lib/openai";
+
+if (!process.env.OPENAI_BASE_URL) {
+  throw new Error("OPENAI_BASE_URL is not set");
+}
+
+if (!process.env.OPENAI_API_KEY) {
+  throw new Error("OPENAI_API_KEY is not set");
+}
+
+const openai = new OpenAI({
+  baseURL: process.env.OPENAI_BASE_URL,
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+if (!process.env.OPENAI_DEFAULT_MODEL) {
+  throw new Error("OPENAI_DEFAULT_MODEL is not set");
+}
+
+const DEFAULT_MODEL = process.env.OPENAI_DEFAULT_MODEL;
+
+const ChatCompletionInputSchema = z.object({
+  message: z.string(),
+  systemPrompt: z.string().optional(),
+});
+
+const GeneratePersonInputSchema = z.object({
+  prompt: z.string(),
+});
+
+const complete = os
+  .input(ChatCompletionInputSchema)
+  .handler(async ({ input }) => {
+    const { message, systemPrompt } = input;
+
+    const completion = await openai.chat.completions.create({
+      model: DEFAULT_MODEL,
+      messages: [
+        ...(systemPrompt
+          ? [{ role: "system" as const, content: systemPrompt }]
+          : []),
+        { role: "user" as const, content: message },
+      ],
+    });
+
+    return {
+      response: completion.choices[0]?.message?.content || "",
+    };
+  });
+
+// Object generation schemas only support nullability, not optionality.
+// Use .nullable() instead of .optional() for fields that may not have values.
+const DemoSchema = z.object({
+  name: z.string().describe("The name of the person"),
+  age: z.number().describe("The age of the person"),
+  occupation: z.string().describe("The occupation of the person"),
+  bio: z.string().describe("The bio of the person"),
+  nickname: z
+    .string()
+    .nullable()
+    .describe("The person's nickname, if they have one"),
+});
+
+const generate = os
+  .input(GeneratePersonInputSchema)
+  .handler(async ({ input }) => {
+    const completion = await openai.chat.completions.parse({
+      model: DEFAULT_MODEL,
+      messages: [
+        {
+          role: "user",
+          content: `Generate a person based on this prompt: ${input.prompt}`,
+        },
+      ],
+      response_format: zodResponseFormat(DemoSchema, "person"),
+    });
+
+    const person = completion.choices[0]?.message?.parsed;
+    if (!person) {
+      throw new Error("No parsed data received from OpenAI");
+    }
+
+    return {
+      person,
+    };
+  });
+
+export const router = {
+  complete,
+  generate,
+};
--- a/src/server/rpc/demo/index.ts
+++ b/src/server/rpc/demo/index.ts
@@ -0,0 +1,7 @@
+import { router as storageRouter } from "./storage";
+import { router as aiRouter } from "./ai";
+
+export const demo = {
+  storage: storageRouter,
+  ai: aiRouter,
+};
--- a/src/server/rpc/demo/storage.ts
+++ b/src/server/rpc/demo/storage.ts
@@ -0,0 +1,51 @@
+import { call, os } from "@orpc/server";
+import { z } from "zod";
+import { randomUUID } from "crypto";
+import { createKV } from "@/server/lib/create-kv";
+
+const DemoSchema = z.object({
+  id: z.string(),
+  value: z.string(),
+});
+
+type Demo = z.output<typeof DemoSchema>;
+
+// createKV provides simple key-value storage with publisher/subscriber support
+// perfect for live queries and small amounts of data
+const kv = createKV<Demo>("demo");
+
+// Handler with input validation using .input() and schema
+const create = os
+  .input(DemoSchema.omit({ id: true }))
+  .handler(async ({ input }) => {
+    const id = randomUUID();
+    const item = { id, value: input.value };
+    await kv.setItem(id, item);
+  });
+
+const remove = os.input(z.string()).handler(async ({ input }) => {
+  await kv.removeItem(input);
+});
+
+// Handler without input - returns all items
+const list = os.handler(async () => {
+  return kv.getAllItems();
+});
+
+// Live data stream using generator function
+// Yields initial data, then subscribes to changes for real-time updates
+const live = {
+  list: os.handler(async function* ({ signal }) {
+    yield call(list, {}, { signal });
+    for await (const _ of kv.subscribe()) {
+      yield call(list, {}, { signal });
+    }
+  }),
+};
+
+export const router = {
+  create,
+  remove,
+  list,
+  live,
+};
--- a/src/server/rpc/index.ts
+++ b/src/server/rpc/index.ts
@@ -0,0 +1,5 @@
+import { demo } from "./demo";
+
+export const router = {
+  demo,
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "noImplicitAny": false,
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022"
+  },
+  "include": ["**/*.ts", "src"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,27 @@
+import devServer, { defaultOptions } from "@hono/vite-dev-server";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { defineConfig, loadEnv } from "vite";
+
+export default defineConfig(({ mode }) => {
+  if (process.env.QUESTS_INSIDE_STUDIO !== "true") {
+    // When app is run outside Quests, this ensure .env* files are loaded
+    // Removes need for VITE_ prefix in .env files for the server as well
+    const env = loadEnv(mode, process.cwd(), "");
+    process.env = env;
+  }
+  return {
+    plugins: [
+      tsconfigPaths(),
+      react(),
+      tailwindcss(),
+      devServer({
+        // Exclude client folder from server because we only client render and
+        // it interferes with image imports.
+        exclude: [/src\/client\/.*/, ...defaultOptions.exclude],
+        entry: "./src/server/index.ts",
+      }),
+    ],
+  };
+});