setup features

2026-01-29 00:24:10 -05:00
parent 787c97a52f
commit 4a6e2c307c
34 changed files with 2891 additions and 71 deletions
@@ -1,9 +1,71 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router-dom';
+import { AuthProvider, useAuth } from './AuthContext';
+import Login from './pages/Login';
+import Register from './pages/Register';
+import ChallengeList from './pages/ChallengeList';
+import ChallengeDetail from './pages/ChallengeDetail';
+import Profile from './pages/Profile';
+import Friends from './pages/Friends';
+import Leaderboard from './pages/Leaderboard';
+import './App.css';

-const App = () => <div style={{fontFamily: 'sans-serif', padding: 24}}>
-  <h1>What's The Point</h1>
-  <p>Welcome! The app is running.</p>
-</div>;
+function ProtectedRoute({ children }) {
+  const { user, loading } = useAuth();
+  
+  if (loading) {
+    return <div className="loading">Loading...</div>;
+  }
+  
+  return user ? children : <Navigate to="/login" />;
+}
+
+function Header() {
+  const { user, logout } = useAuth();
+  
+  if (!user) return null;
+  
+  return (
+    <header className="header">
+      <div className="container">
+        <nav className="nav">
+          <div style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}>
+            <h2 style={{ margin: 0 }}>WTP</h2>
+            <ul className="nav-links">
+              <li><Link to="/challenges">Challenges</Link></li>
+              <li><Link to="/leaderboard">Leaderboard</Link></li>
+              <li><Link to="/friends">Friends</Link></li>
+              <li><Link to="/profile">Profile</Link></li>
+            </ul>
+          </div>
+          <button onClick={logout} className="btn btn-secondary btn-sm">
+            Logout
+          </button>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+function App() {
+  return (
+    <BrowserRouter>
+      <AuthProvider>
+        <Header />
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/challenges" element={<ProtectedRoute><ChallengeList /></ProtectedRoute>} />
+          <Route path="/challenges/:id" element={<ProtectedRoute><ChallengeDetail /></ProtectedRoute>} />
+          <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
+          <Route path="/friends" element={<ProtectedRoute><Friends /></ProtectedRoute>} />
+          <Route path="/leaderboard" element={<ProtectedRoute><Leaderboard /></ProtectedRoute>} />
+          <Route path="/" element={<Navigate to="/challenges" />} />
+        </Routes>
+      </AuthProvider>
+    </BrowserRouter>
+  );
+}

 ReactDOM.createRoot(document.getElementById('root')).render(<App />);