From 903cee27b9a06c6700a769bdc07184b1f430e3d5 Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Mon, 26 Jan 2026 21:51:22 +1100
Subject: [PATCH] Add frontend App.tsx with welcome page

---
 frontend/src/App.tsx | 83 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 frontend/src/App.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 0000000..d628be3
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,83 @@
+import { useState } from 'react'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
+      <div className="max-w-4xl mx-auto p-8">
+        <div className="text-center">
+          <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
+            🏠 Family Hub
+          </h1>
+          <p className="text-xl text-gray-300 mb-8">
+            Home Management System
+          </p>
+          
+          <div className="bg-gray-800 rounded-lg p-8 shadow-xl mb-8">
+            <h2 className="text-2xl font-semibold mb-4">Welcome!</h2>
+            <p className="text-gray-400 mb-6">
+              Family Hub is starting up. The backend API should be available at{' '}
+              <a 
+                href="http://localhost:8000/docs" 
+                className="text-blue-400 hover:text-blue-300 underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                http://localhost:8000/docs
+              </a>
+            </p>
+            
+            <div className="mb-6">
+              <button
+                onClick={() => setCount((count) => count + 1)}
+                className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors"
+              >
+                Count is {count}
+              </button>
+            </div>
+
+            <div className="text-left space-y-4 text-sm text-gray-400">
+              <div>
+                <h3 className="text-white font-semibold mb-2">✅ Phase 1 Complete:</h3>
+                <ul className="list-disc list-inside space-y-1 ml-4">
+                  <li>Backend API with authentication</li>
+                  <li>Database models for users, chores, meals</li>
+                  <li>React frontend foundation</li>
+                  <li>Docker setup</li>
+                </ul>
+              </div>
+              
+              <div>
+                <h3 className="text-white font-semibold mb-2">🚧 Coming Next (Phase 2):</h3>
+                <ul className="list-disc list-inside space-y-1 ml-4">
+                  <li>Chore management system</li>
+                  <li>User login interface</li>
+                  <li>Dashboard with today's tasks</li>
+                  <li>Assignment and completion tracking</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+            <div className="bg-gray-800 p-4 rounded-lg">
+              <h3 className="font-semibold mb-2">📅 Calendar</h3>
+              <p className="text-gray-400">Phase 3</p>
+            </div>
+            <div className="bg-gray-800 p-4 rounded-lg">
+              <h3 className="font-semibold mb-2">🍽️ Meals</h3>
+              <p className="text-gray-400">Phase 4</p>
+            </div>
+            <div className="bg-gray-800 p-4 rounded-lg">
+              <h3 className="font-semibold mb-2">🏡 Home Assistant</h3>
+              <p className="text-gray-400">Phase 6</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default App