feat: Introduce the Crucible sprints feature with database migrations, admin dashboards, and participant interfaces.

Author: rishabhvyas17

client/src/App.jsx

@@ -14,11 +14,19 @@ import CodeOfConduct from './pages/CodeOfConduct';
 // Admin imports
 import AdminLogin from './pages/admin/AdminLogin';
 import Dashboard from './pages/admin/Dashboard';
+import AdminEventDashboard from './pages/admin/AdminEventDashboard';
 import ProtectedRoute from './components/ProtectedRoute';
 
+// Crucible imports
+import CrucibleAuth from './pages/crucible/CrucibleAuth';
+import ParticipantProtectedRoute from './components/ParticipantProtectedRoute';
+import EventDetailPage from './pages/crucible/EventDetailPage';
+import ParticipantDashboard from './pages/crucible/ParticipantDashboard';
+
 export default function App() {
   const location = useLocation();
   const isAdminRoute = location.pathname.startsWith('/admin');
+  const isCrucibleRoute = location.pathname.startsWith('/crucible');
 
   // Admin routes render without the main site layout
   if (isAdminRoute) {
@@ -33,6 +41,29 @@ export default function App() {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/admin/crucible/events/:slug"
+          element={
+            <ProtectedRoute>
+              <AdminEventDashboard />
+            </ProtectedRoute>
+          }
+        />
+      </Routes>
+    );
+  }
+
+  // Crucible routes render without header/footer (their own layout)
+  if (isCrucibleRoute) {
+    return (
+      <Routes>
+        <Route path="/crucible/auth" element={<CrucibleAuth />} />
+        <Route path="/crucible/:slug" element={<EventDetailPage />} />
+        <Route path="/crucible/dashboard" element={
+          <ParticipantProtectedRoute>
+            <ParticipantDashboard />
+          </ParticipantProtectedRoute>
+        } />
       </Routes>
     );
   }

client/src/components/ParticipantProtectedRoute.jsx

@@ -0,0 +1,31 @@
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { Loader2, Flame } from 'lucide-react';
+
+export default function ParticipantProtectedRoute({ children }) {
+    const { user, loading } = useAuth();
+    const location = useLocation();
+
+    // Show loading spinner while checking auth
+    if (loading) {
+        return (
+            <div className="min-h-screen bg-[#050505] flex items-center justify-center">
+                <div className="text-center">
+                    <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500/20 to-orange-600/20 flex items-center justify-center">
+                        <Flame className="w-6 h-6 text-orange-500 animate-pulse" />
+                    </div>
+                    <Loader2 className="w-6 h-6 text-orange-500 animate-spin mx-auto mb-3" />
+                    <p className="text-white/50 text-sm font-mono">Loading dashboard...</p>
+                </div>
+            </div>
+        );
+    }
+
+    // Redirect to crucible auth if not authenticated
+    if (!user) {
+        const redirectUrl = `/crucible/auth?redirect=${encodeURIComponent(location.pathname)}`;
+        return <Navigate to={redirectUrl} replace />;
+    }
+
+    return children;
+}

client/src/components/admin/AdminLayout.jsx

@@ -38,6 +38,16 @@ const navItems = [
         icon: Package,
         description: 'Portfolio'
     },
+    {
+        id: 'crucible',
+        label: 'Crucible Sprints',
+        icon: Flame,
+        description: 'Event Management',
+        children: [
+            { id: 'crucible-events', label: 'Events', icon: LayoutDashboard },
+            { id: 'crucible-participants', label: 'Participants', icon: Users },
+        ]
+    },
     {
         id: 'settings',
         label: 'Settings',
@@ -101,8 +111,8 @@ export default function AdminLayout({ children, activeView, onViewChange }) {
                             <button
                                 onClick={() => handleNavClick(item.id, !!item.children)}
                                 className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group ${isActive
-                                        ? 'bg-orange-500/10 text-orange-500'
-                                        : 'text-white/50 hover:text-white hover:bg-white/5'
+                                    ? 'bg-orange-500/10 text-orange-500'
+                                    : 'text-white/50 hover:text-white hover:bg-white/5'
                                     }`}
                             >
                                 <Icon className="w-5 h-5 flex-shrink-0" />
@@ -131,8 +141,8 @@ export default function AdminLayout({ children, activeView, onViewChange }) {
                                                 key={child.id}
                                                 onClick={() => { onViewChange(child.id); setIsMobileMenuOpen(false); }}
                                                 className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-sm ${activeView === child.id
-                                                        ? 'bg-orange-500/10 text-orange-500'
-                                                        : 'text-white/40 hover:text-white hover:bg-white/5'
+                                                    ? 'bg-orange-500/10 text-orange-500'
+                                                    : 'text-white/40 hover:text-white hover:bg-white/5'
                                                     }`}
                                             >
                                                 <ChildIcon className="w-4 h-4" />