feat: integrate API calls for forum, bug, and event pages; replace mock data with dynamic data fetching

nest-front/src/pages/public/AccountPage.tsx

@@ -1,17 +1,29 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
-import { MOCK_THREADS, MOCK_BUGS } from '../../data/mockData';
+import { bugsApi, forumApi, usersApi } from '../../utils/api';
 import { formatDate } from '../../utils/format';
 import { Link } from 'react-router-dom';
+import type { BugReport, ForumThread } from '../../types';
 
 type Tab = 'profile' | 'threads' | 'bugs' | 'password';
 
 export default function AccountPage() {
   const { user, updateUsername } = useAuth();
   const [activeTab, setActiveTab] = useState<Tab>('profile');
+  const [userThreads, setUserThreads] = useState<ForumThread[]>([]);
+  const [userBugs, setUserBugs] = useState<BugReport[]>([]);
 
-  const userThreads = MOCK_THREADS.filter((t) => t.authorId === user?.id);
+  useEffect(() => {
-  const userBugs = MOCK_BUGS.filter((b) => b.submittedById === user?.id);
+    if (!user) return;
+
+    forumApi.getThreads({ limit: 200 })
+      .then((res) => setUserThreads(res.data.filter((t) => t.authorId === user.id)))
+      .catch(() => setUserThreads([]));
+
+    bugsApi.getBugs({ limit: 200 })
+      .then((res) => setUserBugs(res.data.filter((b) => b.submittedById === user.id)))
+      .catch(() => setUserBugs([]));
+  }, [user]);
 
   const tabs: { id: Tab; label: string }[] = [
     { id: 'profile',  label: 'Profile' },
@@ -121,19 +133,23 @@ export default function AccountPage() {
 
 // ── Profile Tab ────────────────────────────────────────────────────────────────
 
-function ProfileTab({ user, updateUsername }: { user: NonNullable<ReturnType<typeof useAuth>['user']>; updateUsername: (u: string) => void }) {
+function ProfileTab({ user, updateUsername }: { user: NonNullable<ReturnType<typeof useAuth>['user']>; updateUsername: (u: string) => Promise<{ success: boolean; error?: string }> }) {
   const [editing, setEditing] = useState(false);
   const [username, setUsername] = useState(user.username);
   const [error, setError] = useState('');
   const [saved, setSaved] = useState(false);
 
-  const handleSave = useCallback(() => {
+  const handleSave = useCallback(async () => {
     if (!username.trim()) { setError('Username cannot be empty.'); return; }
     if (username.length < 3) { setError('Must be at least 3 characters.'); return; }
-    updateUsername(username.trim());
+    const result = await updateUsername(username.trim());
-    setEditing(false);
+    if (result.success) {
-    setSaved(true);
+      setEditing(false);
-    setTimeout(() => setSaved(false), 3000);
+      setSaved(true);
+      setTimeout(() => setSaved(false), 3000);
+    } else {
+      setError(result.error ?? 'Failed to update username.');
+    }
   }, [username, updateUsername]);
 
   return (
@@ -210,10 +226,15 @@ function ChangePasswordForm() {
     if (Object.keys(next).length > 0) return;
 
     setLoading(true);
-    await new Promise((r) => setTimeout(r, 400));
+    try {
-    setLoading(false);
+      await usersApi.changePassword(form.current, form.next);
-    setForm({ current: '', next: '', confirm: '' });
+      setForm({ current: '', next: '', confirm: '' });
-    setErrors({ success: 'Password changed successfully.' });
+      setErrors({ success: 'Password changed successfully.' });
+    } catch (err) {
+      setErrors({ current: err instanceof Error ? err.message : 'Failed to change password.' });
+    } finally {
+      setLoading(false);
+    }
   }, [form]);
 
   return (

nest-front/src/pages/public/BugDetailPage.tsx

@@ -1,6 +1,6 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useEffect, useMemo } from 'react';
 import { Link, Navigate, useParams } from 'react-router-dom';
-import { MOCK_BUGS, MOCK_BUG_COMMENTS } from '../../data/mockData';
+import { bugsApi, ApiError } from '../../utils/api';
 import { useAuth } from '../../contexts/AuthContext';
 import { formatDate, formatDateTime } from '../../utils/format';
 import type { BugComment, BugReport, BugSeverity, BugStatus } from '../../types';
@@ -57,21 +57,36 @@ export default function BugDetailPage() {
   const { id } = useParams<{ id: string }>();
   const { user, isAuthenticated } = useAuth();
 
-  // Local state — mirrors the global bug list in memory
+  const [bug, setBug] = useState<BugReport | null>(null);
-  const [bugs, setBugs] = useState<BugReport[]>(MOCK_BUGS);
+  const [comments, setComments] = useState<BugComment[]>([]);
-  const [comments, setComments] = useState<BugComment[]>(MOCK_BUG_COMMENTS);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
+
   const [newComment, setNewComment] = useState('');
   const [commentError, setCommentError] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
-  const bug = useMemo(() => bugs.find((b) => b.id === id), [bugs, id]);
+  useEffect(() => {
+    if (!id) return;
+    let cancelled = false;
+    setLoading(true);
 
-  const bugComments = useMemo(
+    bugsApi.getBug(id)
-    () => comments.filter((c) => c.bugReportId === id).sort((a, b) => a.createdAt.localeCompare(b.createdAt)),
+      .then((data) => {
-    [comments, id]
+        if (cancelled) return;
-  );
+        const { comments: bugComments, ...bugData } = data;
+        setBug(bugData);
+        setComments(bugComments.sort((a, b) => a.createdAt.localeCompare(b.createdAt)));
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        if (err instanceof ApiError && err.status === 404) setNotFound(true);
+      })
+      .finally(() => { if (!cancelled) setLoading(false); });
+
+    return () => { cancelled = true; };
+  }, [id]);
 
-  // "I have this too" logic
   const alreadyVoted = useMemo(
     () => !!user && !!bug && bug.meTooBugs.includes(user.id),
     [user, bug]
@@ -81,38 +96,44 @@ export default function BugDetailPage() {
     [user, bug]
   );
 
-  const handleMeToo = useCallback(() => {
+  const handleMeToo = useCallback(async () => {
     if (!user || !bug || alreadyVoted || isOwnReport) return;
-    setBugs((prev) =>
+    try {
-      prev.map((b) =>
+      await bugsApi.toggleMeToo(bug.id);
-        b.id === bug.id ? { ...b, meTooBugs: [...b.meTooBugs, user.id] } : b
+      setBug((prev) => prev ? { ...prev, meTooBugs: [...prev.meTooBugs, user.id] } : prev);
-      )
+    } catch {
-    );
+      // silently ignore
+    }
   }, [user, bug, alreadyVoted, isOwnReport]);
 
   const handleComment = useCallback(async () => {
-    if (!user) return;
+    if (!user || !bug) return;
     if (!newComment.trim()) { setCommentError('Comment cannot be empty.'); return; }
     if (newComment.trim().length < 5) { setCommentError('Comment must be at least 5 characters.'); return; }
 
     setCommentError('');
     setSubmitting(true);
-    await new Promise((r) => setTimeout(r, 250));
 
-    const comment: BugComment = {
+    try {
-      id: `bc${Date.now()}`,
+      const comment = await bugsApi.addComment(bug.id, newComment.trim());
-      bugReportId: id!,
+      setComments((prev) => [...prev, comment]);
-      authorId: user.id,
+      setNewComment('');
-      authorName: user.username,
+    } catch (err) {
-      content: newComment.trim(),
+      setCommentError(err instanceof Error ? err.message : 'Failed to post comment.');
-      createdAt: new Date().toISOString(),
+    } finally {
-    };
+      setSubmitting(false);
-    setComments((prev) => [...prev, comment]);
+    }
-    setNewComment('');
+  }, [user, bug, newComment]);
-    setSubmitting(false);
-  }, [user, newComment, id]);
 
-  if (!bug) {
+  if (loading) {
+    return (
+      <div style={{ maxWidth: '860px', margin: '0 auto', padding: '3rem 1.5rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
+        Loading...
+      </div>
+    );
+  }
+
+  if (notFound || !bug) {
     return <Navigate to="/bugs" replace />;
   }
 
@@ -129,7 +150,6 @@ export default function BugDetailPage() {
 
       {/* Header */}
       <div className="crt-box" style={{ padding: '1.75rem', marginBottom: '1rem' }}>
-        {/* Badges */}
         <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap', alignItems: 'center', marginBottom: '0.75rem' }}>
           <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.72rem' }}>
             {bug.uniqueCode}
@@ -138,7 +158,6 @@ export default function BugDetailPage() {
           <SeverityBadge severity={bug.severity} />
         </div>
 
-        {/* Title */}
         <h1
           style={{
             fontFamily: 'var(--font-heading)',
@@ -227,13 +246,11 @@ export default function BugDetailPage() {
             borderRadius: '6px',
           }}
         >
-          {/* Count */}
           <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-green)', fontSize: '0.82rem' }}>
             <span style={{ fontSize: '1.1rem' }}>{metooCount}</span>{' '}
             {metooCount === 1 ? 'user has' : 'users have'} this issue
           </div>
 
-          {/* Button logic */}
           {!isAuthenticated ? (
             <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.78rem' }}>
               <Link to="/login">Login</Link> to confirm you have this issue
@@ -285,22 +302,20 @@ export default function BugDetailPage() {
             Discussion
           </span>
           <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.65rem', border: '1px solid var(--color-border)', padding: '0.05rem 0.4rem' }}>
-            {bugComments.length}
+            {comments.length}
           </span>
         </div>
 
-        {/* Comment list */}
+        {comments.length === 0 ? (
-        {bugComments.length === 0 ? (
           <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.8rem', padding: '1rem 0' }}>
             No comments yet. Be the first to comment.
           </div>
         ) : (
-          bugComments.map((comment) => (
+          comments.map((comment) => (
             <CommentItem key={comment.id} comment={comment} />
           ))
         )}
 
-        {/* Add comment */}
         <div style={{ marginTop: '1.25rem' }}>
           {isAuthenticated ? (
             <div className="crt-box" style={{ padding: '1.25rem' }}>

nest-front/src/pages/public/BugReportPage.tsx

@@ -1,6 +1,6 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { MOCK_BUGS } from '../../data/mockData';
+import { bugsApi } from '../../utils/api';
 import { useAuth } from '../../contexts/AuthContext';
 import { timeAgo } from '../../utils/format';
 import type { BugReport, BugSeverity, BugStatus, BugReportFormData } from '../../types';
@@ -66,7 +66,6 @@ function BugCard({ bug, highlight }: BugCardProps) {
             </span>
             <StatusBadge status={bug.status} />
             <SeverityBadge severity={bug.severity} />
-            {/* MeToo count */}
             <span
               style={{
                 fontFamily: 'var(--font-mono)',
@@ -118,7 +117,7 @@ function BugCard({ bug, highlight }: BugCardProps) {
 const GAME_VERSIONS = ['0.9.3-alpha', '0.9.2-alpha', '0.9.1-alpha'];
 const SEVERITIES: BugSeverity[] = ['low', 'medium', 'high', 'critical'];
 
-function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => void }) {
+function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => Promise<void> }) {
   const [form, setForm] = useState<BugReportFormData>({
     title: '',
     description: '',
@@ -128,6 +127,8 @@ function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => vo
   });
   const [errors, setErrors] = useState<Partial<Record<keyof BugReportFormData, string>>>({});
   const [submitted, setSubmitted] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState('');
 
   const set = useCallback(<K extends keyof BugReportFormData>(key: K, value: BugReportFormData[K]) => {
     setForm((prev) => ({ ...prev, [key]: value }));
@@ -148,9 +149,16 @@ function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => vo
   const handleSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
     if (!validate()) return;
-    await new Promise((r) => setTimeout(r, 400));
+    setSubmitting(true);
-    onSubmit(form);
+    setSubmitError('');
-    setSubmitted(true);
+    try {
+      await onSubmit(form);
+      setSubmitted(true);
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : 'Failed to submit report.');
+    } finally {
+      setSubmitting(false);
+    }
   }, [form, onSubmit]);
 
   const labelStyle: React.CSSProperties = {
@@ -186,6 +194,12 @@ function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => vo
           &#9654; Submit a Bug Report
         </div>
 
+        {submitError && (
+          <div style={{ color: 'var(--color-red)', fontFamily: 'var(--font-mono)', fontSize: '0.75rem', marginBottom: '1rem' }}>
+            [ERROR] {submitError}
+          </div>
+        )}
+
         <div style={{ marginBottom: '0.85rem' }}>
           <label style={labelStyle}>Title *</label>
           <input
@@ -250,8 +264,8 @@ function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => vo
           />
         </div>
 
-        <button type="submit" className="btn-terminal">
+        <button type="submit" className="btn-terminal" disabled={submitting} style={{ opacity: submitting ? 0.6 : 1 }}>
-          &#9654; Submit Report
+          {submitting ? 'Submitting...' : '&#9654; Submit Report'}
         </button>
       </div>
     </form>
@@ -262,44 +276,37 @@ function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => vo
 
 export default function BugReportPage() {
   const { user, isAuthenticated } = useAuth();
-  const [bugs, setBugs] = useState(MOCK_BUGS);
+  const [bugs, setBugs] = useState<BugReport[]>([]);
+  const [loading, setLoading] = useState(true);
   const [statusFilter, setStatusFilter] = useState<BugStatus | 'all'>('all');
   const [severityFilter, setSeverityFilter] = useState<BugSeverity | 'all'>('all');
   const [showForm, setShowForm] = useState(false);
 
-  // Separate: user's own bugs and all others, both filtered
+  const fetchBugs = useCallback(() => {
+    setLoading(true);
+    bugsApi.getBugs({ status: statusFilter, severity: severityFilter, limit: 100 })
+      .then((res) => setBugs(res.data))
+      .catch(() => setBugs([]))
+      .finally(() => setLoading(false));
+  }, [statusFilter, severityFilter]);
+
+  useEffect(() => { fetchBugs(); }, [fetchBugs]);
+
   const { myBugs, otherBugs } = useMemo(() => {
-    const passes = (b: BugReport) => {
-      if (statusFilter !== 'all' && b.status !== statusFilter) return false;
-      if (severityFilter !== 'all' && b.severity !== severityFilter) return false;
-      return true;
-    };
     const my: BugReport[] = [];
     const other: BugReport[] = [];
     bugs.forEach((b) => {
-      if (!passes(b)) return;
       if (user && b.submittedById === user.id) my.push(b);
       else other.push(b);
     });
     return { myBugs: my, otherBugs: other };
-  }, [bugs, statusFilter, severityFilter, user]);
+  }, [bugs, user]);
 
-  const handleNewReport = useCallback((data: BugReportFormData) => {
+  const handleNewReport = useCallback(async (data: BugReportFormData) => {
-    const newBug: BugReport = {
+    const newBug = await bugsApi.createBug(data);
-      id: `bug${Date.now()}`,
-      uniqueCode: `HH-${String(bugs.length + 1).padStart(4, '0')}`,
-      ...data,
-      status: 'open',
-      submittedById: user?.id ?? 'unknown',
-      submittedByName: user?.username ?? 'You',
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
-      notes: [],
-      meTooBugs: [],
-    };
     setBugs((prev) => [newBug, ...prev]);
     setShowForm(false);
-  }, [bugs.length, user]);
+  }, []);
 
   const openCount = bugs.filter((b) => b.status === 'open').length;
   const inProgressCount = bugs.filter((b) => b.status === 'in_progress').length;
@@ -373,68 +380,78 @@ export default function BugReportPage() {
         </select>
       </div>
 
-      {/* "Your Reports" section — only for logged-in users with their own bugs */}
+      {loading && (
-      {isAuthenticated && myBugs.length > 0 && (
+        <div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
-        <section style={{ marginBottom: '2rem' }}>
+          Loading reports...
-          <div
+        </div>
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '0.75rem',
-              marginBottom: '0.75rem',
-              paddingBottom: '0.4rem',
-              borderBottom: '2px solid var(--color-yellow)',
-            }}
-          >
-            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-yellow)', fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
-              &#9654; Your Reports
-            </span>
-            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-yellow)', fontSize: '0.65rem', background: 'rgba(255,255,0,0.1)', border: '1px solid var(--color-yellow)', padding: '0.05rem 0.4rem' }}>
-              {myBugs.length}
-            </span>
-          </div>
-          {myBugs.map((bug) => (
-            <BugCard key={bug.id} bug={bug} highlight />
-          ))}
-        </section>
       )}
 
-      {/* All other reports */}
+      {!loading && (
-      <section>
+        <>
-        {isAuthenticated && myBugs.length > 0 && (
+          {/* "Your Reports" section */}
-          <div
+          {isAuthenticated && myBugs.length > 0 && (
-            style={{
+            <section style={{ marginBottom: '2rem' }}>
-              display: 'flex',
+              <div
-              alignItems: 'center',
+                style={{
-              gap: '0.75rem',
+                  display: 'flex',
-              marginBottom: '0.75rem',
+                  alignItems: 'center',
-              paddingBottom: '0.4rem',
+                  gap: '0.75rem',
-              borderBottom: '2px solid var(--color-border)',
+                  marginBottom: '0.75rem',
-            }}
+                  paddingBottom: '0.4rem',
-          >
+                  borderBottom: '2px solid var(--color-yellow)',
-            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
+                }}
-              All Reports
+              >
-            </span>
+                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-yellow)', fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
-            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.65rem', border: '1px solid var(--color-border)', padding: '0.05rem 0.4rem' }}>
+                  &#9654; Your Reports
-              {otherBugs.length}
+                </span>
-            </span>
+                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-yellow)', fontSize: '0.65rem', background: 'rgba(255,255,0,0.1)', border: '1px solid var(--color-yellow)', padding: '0.05rem 0.4rem' }}>
-          </div>
+                  {myBugs.length}
-        )}
+                </span>
+              </div>
+              {myBugs.map((bug) => (
+                <BugCard key={bug.id} bug={bug} highlight />
+              ))}
+            </section>
+          )}
 
-        {otherBugs.length === 0 && myBugs.length === 0 ? (
+          {/* All other reports */}
-          <div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
+          <section>
-            No bug reports match the selected filters.
+            {isAuthenticated && myBugs.length > 0 && (
-          </div>
+              <div
-        ) : otherBugs.length === 0 && isAuthenticated ? (
+                style={{
-          <div className="crt-box" style={{ padding: '1.5rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.8rem' }}>
+                  display: 'flex',
-            No other reports match the selected filters.
+                  alignItems: 'center',
-          </div>
+                  gap: '0.75rem',
-        ) : (
+                  marginBottom: '0.75rem',
-          otherBugs.map((bug) => (
+                  paddingBottom: '0.4rem',
-            <BugCard key={bug.id} bug={bug} />
+                  borderBottom: '2px solid var(--color-border)',
-          ))
+                }}
-        )}
+              >
-      </section>
+                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
+                  All Reports
+                </span>
+                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.65rem', border: '1px solid var(--color-border)', padding: '0.05rem 0.4rem' }}>
+                  {otherBugs.length}
+                </span>
+              </div>
+            )}
+
+            {otherBugs.length === 0 && myBugs.length === 0 ? (
+              <div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
+                No bug reports match the selected filters.
+              </div>
+            ) : otherBugs.length === 0 && isAuthenticated ? (
+              <div className="crt-box" style={{ padding: '1.5rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.8rem' }}>
+                No other reports match the selected filters.
+              </div>
+            ) : (
+              otherBugs.map((bug) => (
+                <BugCard key={bug.id} bug={bug} />
+              ))
+            )}
+          </section>
+        </>
+      )}
     </div>
   );
 }

nest-front/src/pages/public/EventsPage.tsx

@@ -1,5 +1,5 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
-import { MOCK_EVENTS, MOCK_POLLS } from '../../data/mockData';
+import { eventsApi } from '../../utils/api';
 import { useAuth } from '../../contexts/AuthContext';
 import { formatDateTime } from '../../utils/format';
 import type { EventPost, EventType, Poll, UserRole } from '../../types';
@@ -54,7 +54,7 @@ function PollCard({ poll, onVote }: { poll: Poll; onVote: (pollId: string, optio
       <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
         {poll.options.map((option) => {
           const percentage = totalVotes > 0 ? Math.round((option.votes / totalVotes) * 100) : 0;
-          const userVoted = option.votedUserIds.includes(user?.id || '');
+          const userVoted = option.votedUserIds.includes(user?.id ?? '');
 
           return (
             <div
@@ -158,12 +158,10 @@ function PollCard({ poll, onVote }: { poll: Poll; onVote: (pollId: string, optio
 
 function EventCard({
   event,
-  poll,
   onVote,
 }: {
   event: EventPost;
-  poll?: Poll;
+  onVote: (eventId: string, pollId: string, optionId: string) => void;
-  onVote: (pollId: string, optionId: string) => void;
 }) {
   return (
     <div
@@ -240,7 +238,12 @@ function EventCard({
       </div>
 
       {/* Poll if exists */}
-      {poll && <PollCard poll={poll} onVote={onVote} />}
+      {event.poll && (
+        <PollCard
+          poll={event.poll}
+          onVote={(pollId, optionId) => onVote(event.id, pollId, optionId)}
+        />
+      )}
     </div>
   );
 }
@@ -249,48 +252,28 @@ function EventCard({
 
 export default function EventsPage() {
   const { user } = useAuth();
-  // Filter to show only public events
+  const [events, setEvents] = useState<EventPost[]>([]);
-  const publicEvents = MOCK_EVENTS.filter((event) => event.isPublic);
+  const [loading, setLoading] = useState(true);
-  const [events] = useState<EventPost[]>(publicEvents);
+
-  const [polls, setPolls] = useState<Poll[]>(MOCK_POLLS);
+  useEffect(() => {
+    eventsApi.getEvents(true)
+      .then((res) => setEvents(res.data))
+      .catch(() => setEvents([]))
+      .finally(() => setLoading(false));
+  }, []);
 
   const handleVote = useCallback(
-    (pollId: string, optionId: string) => {
+    async (eventId: string, _pollId: string, optionId: string) => {
       if (!user) return;
 
-      setPolls((prevPolls) =>
+      try {
-        prevPolls.map((poll) => {
+        const updatedEvent = await eventsApi.vote(eventId, [optionId]);
-          if (poll.id !== pollId) return poll;
+        setEvents((prev) =>
-
+          prev.map((e) => (e.id === updatedEvent.id ? updatedEvent : e))
-          const hasVotedForOption = poll.options.some((opt) =>
+        );
-            opt.votedUserIds.includes(user.id)
+      } catch {
-          );
+        // silently ignore
-
+      }
-          return {
-            ...poll,
-            options: poll.options.map((opt) => {
-              if (opt.id === optionId) {
-                // Add vote to this option
-                return {
-                  ...opt,
-                  votes: opt.votedUserIds.includes(user.id) ? opt.votes : opt.votes + 1,
-                  votedUserIds: opt.votedUserIds.includes(user.id)
-                    ? opt.votedUserIds
-                    : [...opt.votedUserIds, user.id],
-                };
-              } else if (!poll.allowMultipleVotes && hasVotedForOption) {
-                // Remove vote from other options if single vote
-                return {
-                  ...opt,
-                  votes: opt.votedUserIds.includes(user.id) ? opt.votes - 1 : opt.votes,
-                  votedUserIds: opt.votedUserIds.filter((id) => id !== user.id),
-                };
-              }
-              return opt;
-            }),
-          };
-        })
-      );
     },
     [user]
   );
@@ -334,7 +317,7 @@ export default function EventsPage() {
 
         {/* Events Grid */}
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
-          {events.length === 0 ? (
+          {loading ? (
             <div
               style={{
                 background: 'var(--color-surface)',
@@ -343,21 +326,27 @@ export default function EventsPage() {
                 textAlign: 'center',
               }}
             >
-              <div
+              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
-                style={{
+                Loading events...
-                  fontFamily: 'var(--font-mono)',
+              </div>
-                  color: 'var(--color-text-muted)',
+            </div>
-                  fontSize: '0.85rem',
+          ) : events.length === 0 ? (
-                }}
+            <div
-              >
+              style={{
+                background: 'var(--color-surface)',
+                border: '1px solid var(--color-border)',
+                padding: '3rem 2rem',
+                textAlign: 'center',
+              }}
+            >
+              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
                 No events available at the moment. Check back soon!
               </div>
             </div>
           ) : (
-            events.map((event) => {
+            events.map((event) => (
-              const poll = event.pollId ? polls.find((p) => p.id === event.pollId) : undefined;
+              <EventCard key={event.id} event={event} onVote={handleVote} />
-              return <EventCard key={event.id} event={event} poll={poll} onVote={handleVote} />;
+            ))
-            })
           )}
         </div>
       </div>

nest-front/src/pages/public/ForumPage.tsx

@@ -1,6 +1,6 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { MOCK_CATEGORIES, MOCK_THREADS } from '../../data/mockData';
+import { forumApi } from '../../utils/api';
 import { timeAgo } from '../../utils/format';
 import type { ForumCategory, ForumThread } from '../../types';
 
@@ -128,15 +128,43 @@ function CategoryCard({ category, threads }: { category: ForumCategory; threads:
 
 export default function ForumPage() {
   const [search, setSearch] = useState('');
+  const [categories, setCategories] = useState<ForumCategory[]>([]);
+  const [threads, setThreads] = useState<ForumThread[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+
+    Promise.all([
+      forumApi.getCategories(),
+      forumApi.getThreads({ limit: 200 }),
+    ])
+      .then(([cats, threadRes]) => {
+        if (cancelled) return;
+        setCategories(cats);
+        setThreads(threadRes.data);
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setError('Failed to load forum. Please try again.');
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => { cancelled = true; };
+  }, []);
 
   const filteredCategories = useMemo(() => {
-    if (!search.trim()) return MOCK_CATEGORIES;
+    if (!search.trim()) return categories;
     const q = search.toLowerCase();
-    return MOCK_CATEGORIES.filter((cat) =>
+    return categories.filter((cat) =>
       cat.name.toLowerCase().includes(q) ||
-      MOCK_THREADS.some((t) => t.categoryId === cat.id && t.title.toLowerCase().includes(q))
+      threads.some((t) => t.categoryId === cat.id && t.title.toLowerCase().includes(q))
     );
-  }, [search]);
+  }, [search, categories, threads]);
 
   return (
     <div style={{ maxWidth: '960px', margin: '0 auto', padding: '4rem 1.5rem' }}>
@@ -173,15 +201,29 @@ export default function ForumPage() {
         </div>
       </div>
 
-      {/* Categories */}
+      {loading && (
-      {filteredCategories.length === 0 ? (
         <div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
-          No results found for "{search}"
+          Loading forum...
         </div>
-      ) : (
+      )}
-        filteredCategories.map((cat) => (
+
-          <CategoryCard key={cat.id} category={cat} threads={MOCK_THREADS} />
+      {error && !loading && (
-        ))
+        <div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-red)', fontFamily: 'var(--font-mono)' }}>
+          {error}
+        </div>
+      )}
+
+      {/* Categories */}
+      {!loading && !error && (
+        filteredCategories.length === 0 ? (
+          <div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
+            No results found for "{search}"
+          </div>
+        ) : (
+          filteredCategories.map((cat) => (
+            <CategoryCard key={cat.id} category={cat} threads={threads} />
+          ))
+        )
       )}
     </div>
   );

nest-front/src/pages/public/StudioPage.tsx

@@ -1,6 +1,16 @@
-import { TEAM_MEMBERS } from '../../data/mockData';
+import { useEffect, useState } from 'react';
+import { teamApi } from '../../utils/api';
+import type { TeamMember } from '../../types';
 
 export default function StudioPage() {
+  const [members, setMembers] = useState<TeamMember[]>([]);
+
+  useEffect(() => {
+    teamApi.getMembers()
+      .then(setMembers)
+      .catch(() => { /* show empty state */ });
+  }, []);
+
   return (
     <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '4rem 1.5rem' }}>
       {/* Header */}
@@ -127,7 +137,7 @@ export default function StudioPage() {
             gap: '1.25rem',
           }}
         >
-          {TEAM_MEMBERS.map((member) => (
+          {members.map((member) => (
             <div key={member.id} className="crt-box" style={{ padding: '1.5rem' }}>
               <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
                 {/* Avatar */}

nest-front/src/pages/public/ThreadPage.tsx

@@ -1,23 +1,48 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { Link, useParams, Navigate } from 'react-router-dom';
-import { MOCK_THREADS, MOCK_REPLIES } from '../../data/mockData';
+import { forumApi, ApiError } from '../../utils/api';
 import { useAuth } from '../../contexts/AuthContext';
 import { formatDateTime, timeAgo } from '../../utils/format';
+import type { ForumThread, ForumReply } from '../../types';
 
 export default function ThreadPage() {
   const { id } = useParams<{ id: string }>();
   const { user, isAuthenticated } = useAuth();
 
-  const thread = MOCK_THREADS.find((t) => t.id === id);
+  const [thread, setThread] = useState<ForumThread | null>(null);
+  const [replies, setReplies] = useState<ForumReply[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
 
-  // Local state for new reply (stored in memory, not persisted)
-  const [replies, setReplies] = useState(
-    MOCK_REPLIES.filter((r) => r.threadId === id)
-  );
   const [newReply, setNewReply] = useState('');
   const [replyError, setReplyError] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
+  useEffect(() => {
+    if (!id) return;
+    let cancelled = false;
+    setLoading(true);
+
+    forumApi.getThread(id)
+      .then((data) => {
+        if (cancelled) return;
+        const { replies: threadReplies, ...threadData } = data;
+        setThread(threadData);
+        setReplies(threadReplies);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        if (err instanceof ApiError && err.status === 404) {
+          setNotFound(true);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => { cancelled = true; };
+  }, [id]);
+
   const handleReply = useCallback(async () => {
     if (!newReply.trim()) {
       setReplyError('Reply cannot be empty.');
@@ -30,23 +55,26 @@ export default function ThreadPage() {
     setReplyError('');
     setSubmitting(true);
 
-    await new Promise((r) => setTimeout(r, 300));
+    try {
+      const reply = await forumApi.createReply(id!, newReply.trim());
+      setReplies((prev) => [...prev, reply]);
+      setNewReply('');
+    } catch (err) {
+      setReplyError(err instanceof Error ? err.message : 'Failed to post reply.');
+    } finally {
+      setSubmitting(false);
+    }
+  }, [newReply, id]);
 
-    const reply = {
+  if (loading) {
-      id: `r${Date.now()}`,
+    return (
-      content: newReply.trim(),
+      <div style={{ maxWidth: '860px', margin: '0 auto', padding: '4rem 1.5rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
-      authorId: user!.id,
+        Loading thread...
-      authorName: user!.username,
+      </div>
-      threadId: id!,
+    );
-      createdAt: new Date().toISOString(),
+  }
-    };
 
-    setReplies((prev) => [...prev, reply]);
+  if (notFound || !thread) {
-    setNewReply('');
-    setSubmitting(false);
-  }, [newReply, user, id]);
-
-  if (!thread) {
     return <Navigate to="/forum" replace />;
   }
 
@@ -203,7 +231,7 @@ export default function ThreadPage() {
           <button
             className="btn-terminal"
             onClick={handleReply}
-            disabled={submitting}
+            disabled={submitting || !user}
             style={{ opacity: submitting ? 0.6 : 1 }}
           >
             {submitting ? 'Posting...' : '> Post Reply'}