Initial setup of frontend and backend

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,10 @@
+export function Dashboard() {
+  return (
+    <div className="p-8">
+      <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
+      <p className="text-gray-600 dark:text-gray-400">
+        Run dashboard will be implemented here.
+      </p>
+    </div>
+  )
+}

frontend/src/pages/Encounters.tsx

@@ -0,0 +1,10 @@
+export function Encounters() {
+  return (
+    <div className="p-8">
+      <h1 className="text-3xl font-bold mb-6">Encounters</h1>
+      <p className="text-gray-600 dark:text-gray-400">
+        Encounter tracking will be implemented here.
+      </p>
+    </div>
+  )
+}

frontend/src/pages/GameSelect.tsx

@@ -0,0 +1,10 @@
+export function GameSelect() {
+  return (
+    <div className="p-8">
+      <h1 className="text-3xl font-bold mb-6">Select a Game</h1>
+      <p className="text-gray-600 dark:text-gray-400">
+        Game selection will be implemented here.
+      </p>
+    </div>
+  )
+}

frontend/src/pages/Home.tsx

@@ -0,0 +1,10 @@
+export function Home() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen p-8">
+      <h1 className="text-4xl font-bold mb-4">Nuzlocke Tracker</h1>
+      <p className="text-lg text-gray-600 dark:text-gray-400">
+        Track your Nuzlocke runs with ease
+      </p>
+    </div>
+  )
+}

frontend/src/pages/Rules.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { RulesConfiguration } from '../components'
+import type { NuzlockeRules } from '../types'
+import { DEFAULT_RULES } from '../types'
+
+export function Rules() {
+  const [rules, setRules] = useState<NuzlockeRules>(DEFAULT_RULES)
+  const [saved, setSaved] = useState(false)
+
+  const handleSave = () => {
+    // TODO: Persist to backend API
+    setSaved(true)
+    setTimeout(() => setSaved(false), 2000)
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto p-8">
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
+          Nuzlocke Rules
+        </h1>
+        <p className="mt-2 text-gray-600 dark:text-gray-400">
+          Configure the rules for your Nuzlocke run. Hover over the info icon
+          for explanations.
+        </p>
+      </div>
+
+      <RulesConfiguration rules={rules} onChange={setRules} />
+
+      <div className="mt-6 flex items-center gap-4">
+        <button
+          type="button"
+          onClick={handleSave}
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        >
+          Save Rules
+        </button>
+        {saved && (
+          <span className="text-green-600 dark:text-green-400">
+            Rules saved!
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/pages/index.ts

@@ -0,0 +1,5 @@
+export { Home } from './Home'
+export { GameSelect } from './GameSelect'
+export { Dashboard } from './Dashboard'
+export { Encounters } from './Encounters'
+export { Rules } from './Rules'