Distinguish dev port from prod

backend/Cargo.toml

@@ -31,6 +31,7 @@ dissimilar = "1.0"
 rust-embed = "8.2"
 mime_guess = "2.0"
 directories = "6.0.0"
+open = "5.3.2"
 
 [build-dependencies]
 ts-rs = { version = "9.0", features = ["uuid-impl", "chrono-impl"] }

backend/src/main.rs

@@ -138,9 +138,17 @@ async fn main() -> anyhow::Result<()> {
         .layer(Extension(app_state))
         .layer(CorsLayer::permissive());
 
-    let listener = tokio::net::TcpListener::bind("0.0.0.0:3001").await?;
+    let port: u16 = if cfg!(debug_assertions) { 3001 } else { 0 }; // 0 = random port
 
-    tracing::info!("Server running on http://0.0.0.0:3001");
+    let listener = tokio::net::TcpListener::bind(format!("0.0.0.0:{port}")).await?;
+    let actual_port = listener.local_addr()?.port(); // get → 53427 (example)
+
+    tracing::info!("Server running on http://0.0.0.0:{actual_port}");
+
+    if !cfg!(debug_assertions) {
+        tracing::info!("Opening browser...");
+        open::that(format!("http://127.0.0.1:{actual_port}"))?;
+    }
 
     axum::serve(listener, app).await?;
 

frontend/src/App.tsx

@@ -1,14 +1,12 @@
-import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom'
-import { Navbar } from '@/components/layout/navbar'
-import { Projects } from '@/pages/projects'
-import { ProjectTasks } from '@/pages/project-tasks'
-import { TaskDetailsPage } from '@/pages/task-details'
-import { TaskAttemptComparePage } from '@/pages/task-attempt-compare'
-
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { Navbar } from "@/components/layout/navbar";
+import { Projects } from "@/pages/projects";
+import { ProjectTasks } from "@/pages/project-tasks";
+import { TaskDetailsPage } from "@/pages/task-details";
+import { TaskAttemptComparePage } from "@/pages/task-attempt-compare";
 
 function AppContent() {
-  const location = useLocation()
-  const showNavbar = true
+  const showNavbar = true;
 
   return (
     <div className="min-h-screen bg-background">
@@ -19,13 +17,18 @@ function AppContent() {
           <Route path="/projects" element={<Projects />} />
           <Route path="/projects/:projectId" element={<Projects />} />
           <Route path="/projects/:projectId/tasks" element={<ProjectTasks />} />
-          <Route path="/projects/:projectId/tasks/:taskId" element={<TaskDetailsPage />} />
-          <Route path="/projects/:projectId/tasks/:taskId/attempts/:attemptId/compare" element={<TaskAttemptComparePage />} />
-
+          <Route
+            path="/projects/:projectId/tasks/:taskId"
+            element={<TaskDetailsPage />}
+          />
+          <Route
+            path="/projects/:projectId/tasks/:taskId/attempts/:attemptId/compare"
+            element={<TaskAttemptComparePage />}
+          />
         </Routes>
       </div>
     </div>
-  )
+  );
 }
 
 function App() {
@@ -33,7 +36,7 @@ function App() {
     <BrowserRouter>
       <AppContent />
     </BrowserRouter>
-  )
+  );
 }
 
-export default App
+export default App;