feat(frontend): bootstrap React + Vite + Tailwind + Router + Layout

packages/frontend/src/components/Layout.tsx

@@ -0,0 +1,16 @@
+import { Link, Outlet } from 'react-router-dom';
+
+export function Layout() {
+  return (
+    <div className="flex h-full flex-col">
+      <header className="border-b border-slate-200 bg-white px-6 py-3 dark:border-slate-800 dark:bg-slate-900">
+        <nav className="flex gap-4 text-sm">
+          <Link to="/" className="font-semibold">Flashcards</Link>
+          <Link to="/admin">Admin</Link>
+          <Link to="/stats">Stats</Link>
+        </nav>
+      </header>
+      <main className="flex-1 overflow-auto"><Outlet /></main>
+    </div>
+  );
+}

packages/frontend/src/main.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router.js';
+import './styles.css';
+
+const root = createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);

packages/frontend/src/router.tsx

@@ -0,0 +1,14 @@
+import { createBrowserRouter, Navigate } from 'react-router-dom';
+import { Layout } from './components/Layout.js';
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      { index: true, element: <div className="p-6">Dashboard placeholder</div> },
+      { path: 'admin', element: <div className="p-6">Admin placeholder</div> },
+      { path: '*', element: <Navigate to="/" replace /> },
+    ],
+  },
+]);

packages/frontend/src/styles.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body, #root { height: 100%; }
+.card-perspective { perspective: 1000px; }
+.card-face { backface-visibility: hidden; }

packages/frontend/src/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';