FIX - backend review not loading

Author: MeMMa137

.dockerignore

@@ -0,0 +1,11 @@
+node_modules
+client/dist
+server/uploads
+.git
+.env
+.env.*
+!.env.example
+*.log
+.DS_Store
+docker-compose.yml
+backups

Dockerfile

@@ -0,0 +1,45 @@
+# Production image for Coolify / Docker deployments.
+# Build stage installs devDependencies (Vite); runtime stage omits them.
+
+FROM node:22-alpine AS build
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+COPY client/package.json ./client/
+COPY server/package.json ./server/
+
+RUN npm ci
+
+COPY client ./client
+COPY server ./server
+COPY fonts ./fonts
+COPY web_assets ./web_assets
+
+RUN npm run build
+
+FROM node:22-alpine AS runtime
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV HOST=0.0.0.0
+ENV PORT=3000
+
+COPY package.json package-lock.json ./
+COPY client/package.json ./client/
+COPY server/package.json ./server/
+
+RUN npm ci --omit=dev
+
+COPY server ./server
+COPY --from=build /app/client/dist ./client/dist
+
+RUN mkdir -p server/uploads
+
+EXPOSE 3000
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=40s --retries=3 \
+  CMD node -e "fetch('http://127.0.0.1:' + (process.env.PORT || 3000) + '/api/health').then((r) => process.exit(r.ok ? 0 : 1)).catch(() => process.exit(1))"
+
+CMD ["node", "server/index.js"]

client/src/components/AdminReviewPage.jsx

@@ -1,6 +1,7 @@
 import { useAuth } from "../auth/AuthContext.jsx";
 import { useEffect, useMemo, useState } from "react";
 import { JournalDescription } from "./JournalDescription.jsx";
+import { readJsonResponse } from "../utils/fetchJson.js";
 import { resolveStackAssetUrl } from "../utils/mediaUrls.js";
 import "./AdminReviewPage.css";
 
@@ -156,7 +157,7 @@ function AdminReviewIndex() {
       const response = await fetch(`/api/admin/review/projects?shipSort=${encodeURIComponent(shipSort)}`, {
         credentials: "include",
       });
-      const data = await response.json();
+      const data = await readJsonResponse(response);
       if (!response.ok) throw new Error(data.error || "Failed to load review projects.");
       setProjects(data.projects || []);
       setPendingProjects(data.pendingProjects || []);
@@ -298,7 +299,7 @@ function AdminReviewDetail({ projectId }) {
     setMessage("");
     try {
       const response = await fetch(`/api/admin/review/projects/${projectId}`, { credentials: "include" });
-      const data = await response.json();
+      const data = await readJsonResponse(response);
       if (!response.ok) throw new Error(data.error || "Failed to load project.");
       setProject(data.project);
       setJournalEntries(data.journalEntries || []);
@@ -321,7 +322,7 @@ function AdminReviewDetail({ projectId }) {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ fraudFlag: nextChecked }),
       });
-      const data = await response.json();
+      const data = await readJsonResponse(response);
       if (!response.ok) throw new Error(data.error || "Could not save fraud flag.");
       setProject((current) => ({
         ...current,
@@ -377,7 +378,7 @@ function AdminReviewDetail({ projectId }) {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(body),
       });
-      const data = await response.json();
+      const data = await readJsonResponse(response);
       if (!response.ok) throw new Error(data.error || "Failed to submit review.");
       setExceedModalOpen(false);
       setExceedAcknowledged(false);
@@ -425,7 +426,7 @@ function AdminReviewDetail({ projectId }) {
         method: "DELETE",
         credentials: "include",
       });
-      const data = await response.json().catch(() => ({}));
+      const data = await readJsonResponse(response);
       if (!response.ok) throw new Error(data.error || "Failed to delete project.");
       window.location.href = "/admin/review";
     } catch (err) {

client/src/utils/fetchJson.js

@@ -0,0 +1,14 @@
+export async function readJsonResponse(response) {
+  const body = await response.text();
+  if (!body) return {};
+
+  try {
+    return JSON.parse(body);
+  } catch {
+    const gotHtml = body.trimStart().startsWith("<!");
+    const hint = gotHtml
+      ? " The API returned HTML instead of JSON. Run `npm run dev:full` and make sure the Node server started (look for `Server http://...:3000` in the terminal). If you run a second copy of this repo, give it different PORT and VITE_DEV_PORT values so they do not fight over :3000 / :5173."
+      : "";
+    throw new Error(`Invalid server response (${response.status}).${hint}`);
+  }
+}

client/vite.config.js

@@ -1,31 +1,42 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 import path from "path";
+import { fileURLToPath } from "url";
 
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "@assets": path.resolve(__dirname, "../web_assets"),
-      "@fonts": path.resolve(__dirname, "../fonts"),
-    },
-  },
-  server: {
-    host: "127.0.0.1",
-    port: 5173,
-    proxy: {
-      "/api": {
-        target: "http://127.0.0.1:3000",
-        changeOrigin: true,
-      },
-      "/auth": {
-        target: "http://127.0.0.1:3000",
-        changeOrigin: true,
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, path.resolve(__dirname, ".."), "");
+  const apiPort = env.PORT || "3000";
+  const devPort = Number(env.VITE_DEV_PORT || 5173);
+  const apiTarget = `http://127.0.0.1:${apiPort}`;
+
+  return {
+    plugins: [react()],
+    resolve: {
+      alias: {
+        "@assets": path.resolve(__dirname, "../web_assets"),
+        "@fonts": path.resolve(__dirname, "../fonts"),
       },
-      "/uploads": {
-        target: "http://127.0.0.1:3000",
-        changeOrigin: true,
+    },
+    server: {
+      host: "127.0.0.1",
+      port: devPort,
+      strictPort: true,
+      proxy: {
+        "/api": {
+          target: apiTarget,
+          changeOrigin: true,
+        },
+        "/auth": {
+          target: apiTarget,
+          changeOrigin: true,
+        },
+        "/uploads": {
+          target: apiTarget,
+          changeOrigin: true,
+        },
       },
     },
-  },
+  };
 });

package.json

@@ -11,7 +11,7 @@
     "db:up": "docker compose up -d",
     "db:down": "docker compose down",
     "build": "npm run build --workspace=client",
-    "start": "npm run start --workspace=server"
+    "start": "NODE_ENV=production node server/index.js"
   },
   "devDependencies": {
     "concurrently": "^9.1.0"

server/index.js

@@ -904,6 +904,10 @@ if (isProd) {
   const dist = path.join(__dirname, "../client/dist");
   app.use(express.static(dist));
   app.get("*", (req, res) => {
+    if (req.path.startsWith("/api/")) {
+      notFoundInProduction(req, res);
+      return;
+    }
     res.sendFile(path.join(dist, "index.html"));
   });
 }
@@ -922,12 +926,22 @@ async function startServer() {
     }
   }
 
-  app.listen(PORT, HOST, () => {
+  const server = app.listen(PORT, HOST, () => {
     console.log(
       `Server http://${HOST}:${PORT} (${isProd ? "serving React build" : "API only - use Vite on :5173 for UI"})`
     );
   });
 
+  server.on("error", (error) => {
+    if (error?.code === "EADDRINUSE") {
+      console.error(
+        `[server] Port ${PORT} is already in use. Stop the other project using it, or set PORT in .env (and VITE_DEV_PORT + APP_ORIGIN for the Vite client).`
+      );
+      process.exit(1);
+    }
+    throw error;
+  });
+
   startPeriodicAirtableSync();
 }
 

server/projects.js

@@ -536,18 +536,17 @@ export async function listAdminReviewProjects({ shipSort = "oldest" } = {}) {
     ORDER BY projects.shipped_at ${direction} NULLS LAST, projects.updated_at ${direction}, projects.id ${direction}
   `;
 
-  const initial = await pool.query(reviewProjectsSql);
-  const userIds = [...new Set(initial.rows.map((row) => Number(row.user_id)).filter(Number.isFinite))];
-  await Promise.all(
+  const result = await pool.query(reviewProjectsSql);
+  const userIds = [...new Set(result.rows.map((row) => Number(row.user_id)).filter(Number.isFinite))];
+  // Refresh Hackatime in the background so the review queue is not blocked (or timed out) in production.
+  void Promise.all(
     userIds.map((userId) =>
       refreshProjectHackatimeHoursForUser(userId).catch((error) => {
         console.error("[review] hackatime refresh failed:", error?.message || error);
       })
     )
   );
 
-  const result = await pool.query(reviewProjectsSql);
-
   const projects = result.rows.map(toAdminReviewProject);
   const pendingProjects = projects.filter(isPendingReviewProject);
   return {