Wat-Street · Scr4tch587 · Jul 28, 2026 · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
@@ -1,3 +1,3 @@
 {
-  "plugins": ["prettier-plugin-svelte"]
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/frontend/README.md b/frontend/README.md
diff --git a/frontend/bun.lock b/frontend/bun.lock
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
diff --git a/frontend/components.json b/frontend/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -1,22 +1,29 @@
 import js from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
 import globals from "globals";
-import svelte from "eslint-plugin-svelte";
+import tseslint from "typescript-eslint";
 
-export default [
-  js.configs.recommended,
-  ...svelte.configs["flat/recommended"],
+export default tseslint.config(
+  { ignores: ["dist"] },
   {
-    files: ["**/*.{js,mjs,cjs,svelte}"],
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      reactHooks.configs["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
     languageOptions: {
-      globals: {
-        ...globals.browser,
-      },
-    },
-    rules: {
-      "svelte/no-at-html-tags": "off",
+      ecmaVersion: 2022,
+      globals: globals.browser,
     },
   },
   {
-    ignores: ["dist/**"],
+    // shadcn-generated components export variants/hooks next to components
+    files: ["src/components/ui/**/*.tsx"],
+    rules: {
+      "react-refresh/only-export-components": "off",
+    },
   },
-];
+);
diff --git a/frontend/index.html b/frontend/index.html
@@ -3,10 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark" />
     <title>Datastream</title>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,24 +4,45 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
+    "dev": "bunx --bun vite",
+    "build": "bunx --bun vite build",
+    "preview": "bunx --bun vite preview",
     "lint": "eslint .",
     "format:check": "prettier --check .",
     "format:write": "prettier --write .",
-    "typecheck": "svelte-check --workspace ./src --no-tsconfig"
+    "typecheck": "tsc -b"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@tanstack/react-query": "^5.90.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.23.0",
+    "radix-ui": "^1.6.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.64.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/vite": "^4.1.14",
+    "@types/node": "^24.7.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "@vitejs/plugin-react": "^5.0.4",
     "eslint": "^9.37.0",
-    "eslint-plugin-svelte": "^3.12.4",
+    "eslint-plugin-react-hooks": "^6.1.1",
+    "eslint-plugin-react-refresh": "^0.4.23",
     "globals": "^16.4.0",
     "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "svelte-check": "^4.3.3",
-    "svelte": "^5.45.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwindcss": "^4.1.14",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.0",
     "vite": "^7.3.1"
   }
 }
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -0,0 +1,12 @@
+function App() {
+  return (
+    <div className="mx-auto max-w-[1200px] px-8 py-6">
+      <header className="mb-8">
+        <h1 className="text-2xl font-semibold">Datastream</h1>
+      </header>
+      <main />
+    </div>
+  );
+}
+
+export default App;
diff --git a/frontend/src/app.css b/frontend/src/app.css