feat: scaffold frontend (Vite + React + Vitest)

- Añade scaffold de frontend con Vite y React
- Configura Vitest y tests básicos (App, Navbar)
- Añade QueryClient y hooks/plantillas iniciales

frontend/src/App.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Navbar from './components/layout/Navbar';
+
+export default function App(): JSX.Element {
+  return (
+    <div>
+      <Navbar />
+      <main>
+        <h1>Quasar</h1>
+      </main>
+    </div>
+  );
+}

frontend/src/components/layout/Navbar.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function Navbar(): JSX.Element {
+  return (
+    <nav style={{ padding: 12 }}>
+      <a href="/roms" style={{ marginRight: 12 }}>
+        ROMs
+      </a>
+      <a href="/games">Games</a>
+    </nav>
+  );
+}

frontend/src/components/layout/Sidebar.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Sidebar(): JSX.Element {
+  return (
+    <aside style={{ padding: 12 }}>
+      <div>Sidebar (placeholder)</div>
+    </aside>
+  );
+}

frontend/src/hooks/useGames.ts

@@ -0,0 +1,4 @@
+export function useGames() {
+  // placeholder stub for tests and future implementation
+  return { data: [], isLoading: false };
+}

frontend/src/lib/api.ts

@@ -0,0 +1,3 @@
+export const api = {
+  // placeholder for future HTTP client
+};

frontend/src/lib/queryClient.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient();

frontend/src/main.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from './lib/queryClient';
+import App from './App';
+import './styles.css';
+
+const rootEl = document.getElementById('root');
+
+if (rootEl) {
+  createRoot(rootEl).render(
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </React.StrictMode>
+  );
+}
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from './lib/queryClient';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </React.StrictMode>
+);

frontend/src/routes/games.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Games(): JSX.Element {
+  return (
+    <div>
+      <h2>Games</h2>
+    </div>
+  );
+}

frontend/src/routes/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Home(): JSX.Element {
+  return (
+    <div>
+      <h2>Home</h2>
+    </div>
+  );
+}

frontend/src/routes/roms.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Roms(): JSX.Element {
+  return (
+    <div>
+      <h2>ROMs</h2>
+    </div>
+  );
+}

frontend/src/setupTests.ts

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

frontend/src/styles.css

@@ -0,0 +1,8 @@
+/* Minimal global styles */
+html, body, #root {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+}