Merge pull request #273 from Abfa41/feat/interview-progress-sync

feat(progress): implement server-backed interview progress system with migration layer (fixes #70, #73)

Author: Sachinchaurasiya360

client/src/lib/auth.store.ts

@@ -31,6 +31,9 @@ export const useAuthStore = create<AuthState>((set) => {
 
     logout: () => {
       localStorage.removeItem("user");
+      localStorage.removeItem("interview-progress-migrated");
+      localStorage.removeItem("interview-progress");
+
       set({ user: null, isAuthenticated: false });
       _queryClient?.clear();
       // Clear httpOnly cookie server-side (fire-and-forget)

client/src/module/student/interview-prep/InterviewLessonsPage.tsx

@@ -10,7 +10,27 @@ import { courseSchema, breadcrumbSchema } from "../../../lib/structured-data";
 import { useAuthStore } from "../../../lib/auth.store";
 import { LoginGate } from "../../../components/LoginGate";
 import { CircularProgress } from "../../../components/ui/CircularProgress";
-import { useInterviewProgress } from "./interviewProgress";
+import api from "../../../lib/axios"
+
+const STORAGE_KEY = "interview-progress";
+
+function getLocalProgress(): InterviewProgress {
+  try {
+    const raw = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
+
+    if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
+      return {};
+    }
+
+    return raw as InterviewProgress;
+  } catch {
+    return {};
+  }
+}
+
+function saveLocalProgress(progress: InterviewProgress) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(progress));
+}
 
 const LEVEL_STYLE: Record<string, string> = {
   Beginner:     "text-green-700 dark:text-green-400 border-green-300 dark:border-green-900/60",
@@ -29,7 +49,56 @@ function MetaChip({ children, className = "" }: { children: React.ReactNode; cla
 export default function InterviewLessonsPage() {
   const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
   const [showGate, setShowGate] = useState(false);
-  const { progress, isLoading } = useInterviewProgress();
+  const [progress, setProgress] = useState<InterviewProgress>({});
+
+  useEffect(() => {
+  if (!isAuthenticated) {
+    setProgress(getLocalProgress());
+    return;
+  }
+
+  const loadProgress = async () => {
+    try {
+      const localProgress = getLocalProgress();
+
+      const response = await api.get("/interview-progress");
+
+      const serverData = response.data;
+
+      const merged: InterviewProgress = {
+        ...localProgress,
+      };
+
+      serverData.completedIds.forEach((id: string) => {
+        merged[id] = { completed: true };
+      });
+
+      setProgress(merged);
+
+      saveLocalProgress(merged);
+
+      const migrated = localStorage.getItem("interview-progress-migrated");
+
+      if (!migrated && Object.keys(localProgress).length > 0) {
+        for (const [questionId, value] of Object.entries(localProgress)) {
+          if (value.completed) {
+            await api.patch(`/interview-progress`, {
+             questionId: questionId, action: "complete"
+            });
+          }
+        }
+
+        localStorage.setItem("interview-progress-migrated", "true");
+      }
+    } catch (error) {
+      console.error("Failed to load interview progress", error);
+
+      setProgress(getLocalProgress());
+    }
+  };
+
+  loadProgress();
+}, [isAuthenticated]);
 
   const sectionStats = useMemo(() => {
     return sections.map((section) => {

client/src/module/student/interview-prep/InterviewQuestionPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useState, useCallback, useMemo, useEffect } from "react";
 import { useParams, Link, useNavigate, Navigate } from "react-router";
 import { motion } from "framer-motion";
 import {
@@ -13,12 +13,44 @@ import {
   MessageSquare,
 } from "lucide-react";
 import { sections, questions } from "./data";
-import type { InterviewProgress, CodeExample } from "./data/types";
+import type { CodeExample } from "./data/types";
 import { SEO } from "../../../components/SEO";
 import { canonicalUrl } from "../../../lib/seo.utils";
 import { useAuthStore } from "../../../lib/auth.store";
 import { reportMilestone } from "../../../lib/milestone.utils";
-import { useInterviewProgress } from "./interviewProgress";
+
+async function getServerProgress() {
+  const res = await fetch("/api/interview-progress", {
+    method: "GET",
+    credentials: "include",
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch progress");
+  }
+
+  return res.json();
+}
+
+async function updateServerProgress(
+  questionId: string,
+  action: "complete" | "uncomplete" | "visit"
+) {
+  const res = await fetch(`/api/interview-progress`, {
+    method: "PATCH",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ questionId, action }),
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to update progress");
+  }
+
+  return res.json();
+}
 
 const DIFF_STYLE: Record<string, string> = {
   Beginner:     "text-green-700 dark:text-green-400 border-green-300 dark:border-green-900/60",
@@ -115,7 +147,8 @@ export default function InterviewQuestionPage() {
   const navigate = useNavigate();
   const basePath = "/learn/interview";
   const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
-  const { progress, toggleComplete, recordVisit } = useInterviewProgress();
+
+  const [completed, setCompleted] = useState(false);
 
   const section = sections.find((s) => s.id === sectionSlug);
   const sectionQuestions = useMemo(
@@ -124,27 +157,93 @@ export default function InterviewQuestionPage() {
   );
 
   const question = sectionQuestions.find((q) => q.id === questionId);
-  const completed = !!(questionId && progress[questionId]?.completed);
-  const currentIndex = question ? sectionQuestions.findIndex((q) => q.id === question.id) : -1;
-  const prevQuestion = currentIndex > 0 ? sectionQuestions[currentIndex - 1] : null;
-  const nextQuestion = currentIndex < sectionQuestions.length - 1 ? sectionQuestions[currentIndex + 1] : null;
-
-  const handleToggleComplete = useCallback(() => {
-    if (!questionId) return;
-    void toggleComplete(questionId)
-      .then((newVal) => {
-        if (newVal && isAuthenticated && sectionSlug) {
-          const nextProgress: InterviewProgress = { ...progress, [questionId]: { completed: true } };
-          const allDone = sectionQuestions.every((q) => nextProgress[q.id]?.completed);
-          if (allDone) reportMilestone("INTERVIEW_SECTION_COMPLETE", sectionSlug);
-        }
-      })
-      .catch(() => {});
-  }, [questionId, toggleComplete, isAuthenticated, sectionSlug, sectionQuestions, progress]);
+
+  const currentIndex = question
+    ? sectionQuestions.findIndex((q) => q.id === question.id)
+    : -1;
+
+  const prevQuestion =
+    currentIndex > 0
+      ? sectionQuestions[currentIndex - 1]
+      : null;
+
+  const nextQuestion =
+    currentIndex < sectionQuestions.length - 1
+      ? sectionQuestions[currentIndex + 1]
+      : null;
 
   useEffect(() => {
-    if (questionId) recordVisit(questionId);
-  }, [questionId, recordVisit]);
+    if (!isAuthenticated || !questionId) return;
+
+    const loadProgress = async () => {
+      try {
+        const progress = await getServerProgress();
+
+        setCompleted(
+          progress.completedIds?.includes(questionId) ?? false
+        );
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    loadProgress();
+  }, [isAuthenticated, questionId]);
+
+  useEffect(() => {
+    if (!isAuthenticated || !questionId) return;
+
+    const timeout = setTimeout(() => {
+      updateServerProgress(questionId, "visit")
+        .catch(console.error);
+    }, 500);
+
+    return () => clearTimeout(timeout);
+  }, [isAuthenticated, questionId]);
+
+  const handleToggleComplete = useCallback(async () => {
+    if (!questionId || !isAuthenticated) return;
+
+    try {
+      const action =
+        completed ? "uncomplete" : "complete";
+
+      const updatedProgress =
+        await updateServerProgress(
+          questionId,
+          action
+        );
+
+      const isNowCompleted =
+        updatedProgress.completedIds.includes(questionId);
+
+      setCompleted(isNowCompleted);
+
+      if (
+        isNowCompleted &&
+        sectionSlug
+      ) {
+        const allDone = sectionQuestions.every((q) =>
+          updatedProgress.completedIds.includes(q.id)
+        );
+
+        if (allDone) {
+          reportMilestone(
+            "INTERVIEW_SECTION_COMPLETE",
+            sectionSlug
+          );
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }, [
+    questionId,
+    completed,
+    isAuthenticated,
+    sectionSlug,
+    sectionQuestions,
+  ]);
 
   if (section && !section.freeTier && !isAuthenticated) {
     return <Navigate to={basePath} replace />;

client/src/module/student/interview-prep/InterviewSectionPage.tsx

@@ -1,12 +1,12 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useParams, Link, Navigate } from "react-router";
 import { motion } from "framer-motion";
 import { CheckCircle2, ArrowUpRight } from "lucide-react";
 import { sections, questions } from "./data";
 import { SEO } from "../../../components/SEO";
 import { canonicalUrl } from "../../../lib/seo.utils";
 import { useAuthStore } from "../../../lib/auth.store";
-import { useInterviewProgress } from "./interviewProgress";
+import api from "../../../lib/axios";
 
 const DIFF_STYLE: Record<string, string> = {
   Beginner:     "text-green-700 dark:text-green-400 border-green-300 dark:border-green-900/60",
@@ -34,7 +34,25 @@ export default function InterviewSectionPage() {
   const { sectionSlug } = useParams();
   const basePath = "/learn/interview";
   const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
-  const { progress, isLoading } = useInterviewProgress();
+
+  const [completedIds, setCompletedIds] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (!isAuthenticated) return;
+
+    const loadProgress = async () => {
+      try {
+        const res = await api.get("/interview-progress");
+
+        setCompletedIds(res.data.completedIds || []);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    loadProgress();
+  }, [isAuthenticated]);
+
   const section = sections.find((s) => s.id === sectionSlug);
 
   const sectionQuestions = useMemo(
@@ -60,7 +78,7 @@ export default function InterviewSectionPage() {
     );
   }
 
-  const completedCount = sectionQuestions.filter((q) => progress[q.id]?.completed).length;
+  const completedCount = sectionQuestions.filter((q) => completedIds.includes(q.id)).length;
   const pct = sectionQuestions.length > 0 ? Math.round((completedCount / sectionQuestions.length) * 100) : 0;
 
   return (
@@ -170,7 +188,7 @@ export default function InterviewSectionPage() {
         ) : (
           <div className="flex flex-col gap-2">
             {sectionQuestions.map((question, i) => {
-              const isCompleted = progress[question.id]?.completed;
+              const isCompleted = completedIds.includes(question.id);
               return (
                 <motion.div
                   key={question.id}

client/vite.config.ts

@@ -82,19 +82,25 @@ export default defineConfig({
       loader: { '.keep': 'text' },
     },
   },
-  server: {
-    headers: {
-      'Cross-Origin-Opener-Policy': 'same-origin-allow-popups',
-      'Cross-Origin-Embedder-Policy': 'unsafe-none',
+server: {
+  headers: {
+    'Cross-Origin-Opener-Policy': 'same-origin-allow-popups',
+    'Cross-Origin-Embedder-Policy': 'unsafe-none',
+  },
+  proxy: {
+    // Proxy sitemap.xml to backend so it works in development
+    '/sitemap.xml': {
+      target: 'http://localhost:3000',
+      changeOrigin: true,
     },
-    proxy: {
-      // Proxy sitemap.xml to backend so it works in development
-      '/sitemap.xml': {
-        target: dockerInternalApiOrigin,
-        changeOrigin: true,
-      },
+    // Proxy API requests to backend in development. 
+    '/api': {
+      target: 'http://localhost:3000',
+      changeOrigin: true,
+      secure: false,
     },
   },
+},
   build: {
     chunkSizeWarningLimit: 600,
     rollupOptions: {

server/src/database/prisma/schema/ai.prisma

@@ -118,6 +118,7 @@ model jobAgentConversation {
 
   @@index([userId, isActive])
 }
+
 model generatedResume {
   id           Int      @id @default(autoincrement())
   userId       Int