scaling from 1 to millions of users

Author: dsshimel

attendabot/frontend/src/App.css

@@ -19,6 +19,10 @@ body {
   padding: var(--space-6);
 }
 
+.app.app-wide {
+  max-width: 1400px;
+}
+
 /* ========================================
    Header
    ======================================== */

attendabot/frontend/src/components/RootLayout.tsx

@@ -22,12 +22,13 @@ export function RootLayout() {
   }
 
   // Not logged in and not on login page → redirect to login
-  if (!loggedIn && location.pathname !== "/") {
+  // (simulations are public — no auth required)
+  if (!loggedIn && location.pathname !== "/" && !location.pathname.startsWith("/simulations")) {
     return <Navigate to="/" replace />;
   }
 
   // Logged in but role couldn't be determined (getMe() failed)
-  if (loggedIn && !role && location.pathname !== "/") {
+  if (loggedIn && !role && location.pathname !== "/" && !location.pathname.startsWith("/simulations")) {
     return (
       <div className="app">
         <header>

attendabot/frontend/src/components/SimulationsHub.tsx

@@ -11,6 +11,13 @@ const simulations = [
     description: "Interactive animations of common authentication systems",
     url: "/simulations/auth",
   },
+  {
+    id: "scaling",
+    title: "Scale From Zero to Millions",
+    description:
+      'Watch a web architecture evolve from a single server to global infrastructure. infrastructure. Based on "System Design Interview Volume 1" by Alex Xu.',
+    url: "/simulations/scaling",
+  },
 ];
 
 /** Renders a grid of available simulation cards. */
@@ -20,7 +27,13 @@ export function SimulationsHub() {
   return (
     <div className="panel" style={{ gridColumn: "span 2" }}>
       <h2>Simulations</h2>
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "var(--space-5)" }}>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+          gap: "var(--space-5)",
+        }}
+      >
         {simulations.map((sim) => (
           <div
             key={sim.id}
@@ -31,26 +44,27 @@ export function SimulationsHub() {
               boxShadow: "4px 4px 0 rgba(0, 0, 0, 0.15)",
             }}
           >
-            <h3 style={{
-              margin: "0 0 var(--space-3) 0",
-              fontSize: "var(--text-base)",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-            }}>
+            <h3
+              style={{
+                margin: "0 0 var(--space-3) 0",
+                fontSize: "var(--text-base)",
+                textTransform: "uppercase",
+                letterSpacing: "0.05em",
+              }}
+            >
               {sim.title}
             </h3>
-            <p style={{
-              color: "var(--color-slate)",
-              fontSize: "var(--text-base)",
-              margin: "0 0 var(--space-5) 0",
-              lineHeight: "1.6",
-            }}>
+            <p
+              style={{
+                color: "var(--color-slate)",
+                fontSize: "var(--text-base)",
+                margin: "0 0 var(--space-5) 0",
+                lineHeight: "1.6",
+              }}
+            >
               {sim.description}
             </p>
-            <button
-              className="primary-btn"
-              onClick={() => navigate(sim.url)}
-            >
+            <button className="primary-btn" onClick={() => navigate(sim.url)}>
               Open
             </button>
           </div>

attendabot/frontend/src/pages/SimulatorPage.tsx

@@ -6,6 +6,8 @@
 import { useParams, useNavigate } from "react-router";
 import SimulatorApp from "../simulations/SimulatorApp";
 import { flows } from "../simulations/flowData";
+import ScalingSimulatorApp from "../simulations/ScalingSimulatorApp";
+import { scalingFrames } from "../simulations/scalingData";
 
 /** Thin wrapper that maps URL params to SimulatorApp props. */
 export function SimulatorPage() {
@@ -26,6 +28,20 @@ export function SimulatorPage() {
     );
   }
 
+  if (kind === "scaling") {
+    const frameIndex = flowId ? scalingFrames.findIndex((f) => f.id === flowId) : 0;
+    const activeFrame = frameIndex >= 0 ? frameIndex : 0;
+
+    return (
+      <div className="app app-wide">
+        <ScalingSimulatorApp
+          activeFrame={activeFrame}
+          onFrameChange={(i) => navigate(`/simulations/scaling/${scalingFrames[i].id}`)}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="app">
       <p>Unknown simulation: {kind}</p>