feat: enhance analytics and performance tracking with real data metrics

- Integrate real page view data from the database for accurate analytics.
- Implement cache-busting for fresh data retrieval in analytics dashboard.
- Calculate and display bounce rate, average session duration, and unique users.
- Refactor performance metrics to ensure only real data is considered.
- Improve user experience with toast notifications for success and error messages.
- Update project editor with undo/redo functionality and enhanced content management.

app/api/analytics/dashboard/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { projectService } from '@/lib/prisma';
+import { prisma, projectService } from '@/lib/prisma';
 import { analyticsCache } from '@/lib/redis';
 import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
 
@@ -30,10 +30,15 @@ export async function GET(request: NextRequest) {
       }
     }
 
-    // Check cache first
-    const cachedStats = await analyticsCache.getOverallStats();
-    if (cachedStats) {
-      return NextResponse.json(cachedStats);
+    // Check cache first (but allow bypass with cache-bust parameter)
+    const url = new URL(request.url);
+    const bypassCache = url.searchParams.get('nocache') === 'true';
+    
+    if (!bypassCache) {
+      const cachedStats = await analyticsCache.getOverallStats();
+      if (cachedStats) {
+        return NextResponse.json(cachedStats);
+      }
     }
 
     // Get analytics data
@@ -41,28 +46,84 @@ export async function GET(request: NextRequest) {
     const projects = projectsResult.projects || projectsResult;
     const performanceStats = await projectService.getPerformanceStats();
     
+    // Get real page view data from database
+    const allPageViews = await prisma.pageView.findMany({
+      where: {
+        timestamp: {
+          gte: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) // Last 30 days
+        }
+      }
+    });
+
+    // Calculate bounce rate (sessions with only 1 pageview)
+    const pageViewsByIP = allPageViews.reduce((acc, pv) => {
+      const ip = pv.ip || 'unknown';
+      if (!acc[ip]) acc[ip] = [];
+      acc[ip].push(pv);
+      return acc;
+    }, {} as Record<string, typeof allPageViews>);
+
+    const totalSessions = Object.keys(pageViewsByIP).length;
+    const bouncedSessions = Object.values(pageViewsByIP).filter(session => session.length === 1).length;
+    const bounceRate = totalSessions > 0 ? Math.round((bouncedSessions / totalSessions) * 100) : 0;
+
+    // Calculate average session duration (simplified - time between first and last pageview per IP)
+    const sessionDurations = Object.values(pageViewsByIP)
+      .map(session => {
+        if (session.length < 2) return 0;
+        const sorted = session.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+        return sorted[sorted.length - 1].timestamp.getTime() - sorted[0].timestamp.getTime();
+      })
+      .filter(d => d > 0);
+    const avgSessionDuration = sessionDurations.length > 0
+      ? Math.round(sessionDurations.reduce((a, b) => a + b, 0) / sessionDurations.length / 1000) // in seconds
+      : 0;
+
+    // Get total unique users (unique IPs)
+    const totalUsers = new Set(allPageViews.map(pv => pv.ip).filter(Boolean)).size;
+
+    // Calculate real views from PageView table
+    const viewsByProject = allPageViews.reduce((acc, pv) => {
+      if (pv.projectId) {
+        acc[pv.projectId] = (acc[pv.projectId] || 0) + 1;
+      }
+      return acc;
+    }, {} as Record<number, number>);
+
     // Calculate analytics metrics
     const analytics = {
       overview: {
         totalProjects: projects.length,
         publishedProjects: projects.filter(p => p.published).length,
         featuredProjects: projects.filter(p => p.featured).length,
-        totalViews: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.views as number || 0), 0),
-        totalLikes: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.likes as number || 0), 0),
-        totalShares: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.shares as number || 0), 0),
-        avgLighthouse: projects.length > 0 
-          ? Math.round(projects.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projects.length)
-          : 0
+        totalViews: allPageViews.length, // Real views from PageView table
+        totalLikes: 0, // Not implemented - no like buttons
+        totalShares: 0, // Not implemented - no share buttons
+        avgLighthouse: (() => {
+          // Only calculate if we have real performance data (not defaults)
+          const projectsWithPerf = projects.filter(p => {
+            const perf = (p.performance as Record<string, unknown>) || {};
+            const lighthouse = perf.lighthouse as number || 0;
+            return lighthouse > 0; // Only count projects with actual performance data
+          });
+          return projectsWithPerf.length > 0
+            ? Math.round(projectsWithPerf.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projectsWithPerf.length)
+            : 0;
+        })()
       },
       projects: projects.map(project => ({
         id: project.id,
         title: project.title,
         category: project.category,
         difficulty: project.difficulty,
-        views: (project.analytics as Record<string, unknown>)?.views as number || 0,
-        likes: (project.analytics as Record<string, unknown>)?.likes as number || 0,
-        shares: (project.analytics as Record<string, unknown>)?.shares as number || 0,
-        lighthouse: (project.performance as Record<string, unknown>)?.lighthouse as number || 0,
+        views: viewsByProject[project.id] || 0, // Only real views from PageView table
+        likes: 0, // Not implemented
+        shares: 0, // Not implemented
+        lighthouse: (() => {
+          const perf = (project.performance as Record<string, unknown>) || {};
+          const score = perf.lighthouse as number || 0;
+          return score > 0 ? score : 0; // Only return if we have real data
+        })(),
         published: project.published,
         featured: project.featured,
         createdAt: project.createdAt,
@@ -71,10 +132,25 @@ export async function GET(request: NextRequest) {
       categories: performanceStats.byCategory,
       difficulties: performanceStats.byDifficulty,
       performance: {
-        avgLighthouse: performanceStats.avgLighthouse,
-        totalViews: performanceStats.totalViews,
-        totalLikes: performanceStats.totalLikes,
-        totalShares: performanceStats.totalShares
+        avgLighthouse: (() => {
+          const projectsWithPerf = projects.filter(p => {
+            const perf = (p.performance as Record<string, unknown>) || {};
+            return (perf.lighthouse as number || 0) > 0;
+          });
+          return projectsWithPerf.length > 0
+            ? Math.round(projectsWithPerf.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projectsWithPerf.length)
+            : 0;
+        })(),
+        totalViews: allPageViews.length, // Real total views
+        totalLikes: 0,
+        totalShares: 0
+      },
+      metrics: {
+        bounceRate,
+        avgSessionDuration,
+        pagesPerSession: totalSessions > 0 ? (allPageViews.length / totalSessions).toFixed(1) : '0',
+        newUsers: totalUsers,
+        totalUsers
       }
     };
 

app/api/analytics/performance/route.ts

@@ -24,8 +24,72 @@ export async function GET(request: NextRequest) {
       take: 1000 // Last 1000 interactions
     });
 
+    // Get all projects for performance data
+    const projects = await prisma.project.findMany();
+    
+    // Calculate real performance metrics from projects
+    const projectsWithPerformance = projects.map(p => ({
+      id: p.id,
+      title: p.title,
+      lighthouse: ((p.performance as Record<string, unknown>)?.lighthouse as number) || 0,
+      loadTime: ((p.performance as Record<string, unknown>)?.loadTime as number) || 0,
+      fcp: ((p.performance as Record<string, unknown>)?.firstContentfulPaint as number) || 0,
+      lcp: ((p.performance as Record<string, unknown>)?.coreWebVitals as Record<string, unknown>)?.lcp as number || 0,
+      cls: ((p.performance as Record<string, unknown>)?.coreWebVitals as Record<string, unknown>)?.cls as number || 0
+    }));
+
+    const avgLighthouse = projectsWithPerformance.length > 0
+      ? Math.round(projectsWithPerformance.reduce((sum, p) => sum + p.lighthouse, 0) / projectsWithPerformance.length)
+      : 0;
+
+    // Calculate bounce rate from page views
+    const pageViewsByIP = pageViews.reduce((acc, pv) => {
+      const ip = pv.ip || 'unknown';
+      if (!acc[ip]) acc[ip] = [];
+      acc[ip].push(pv);
+      return acc;
+    }, {} as Record<string, typeof pageViews>);
+
+    const totalSessions = Object.keys(pageViewsByIP).length;
+    const bouncedSessions = Object.values(pageViewsByIP).filter(session => session.length === 1).length;
+    const bounceRate = totalSessions > 0 ? Math.round((bouncedSessions / totalSessions) * 100) : 0;
+
+    // Calculate average session duration
+    const sessionDurations = Object.values(pageViewsByIP)
+      .map(session => {
+        if (session.length < 2) return 0;
+        const sorted = session.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+        return sorted[sorted.length - 1].timestamp.getTime() - sorted[0].timestamp.getTime();
+      })
+      .filter(d => d > 0);
+    const avgSessionDuration = sessionDurations.length > 0
+      ? Math.round(sessionDurations.reduce((a, b) => a + b, 0) / sessionDurations.length / 1000) // in seconds
+      : 0;
+
+    // Calculate pages per session
+    const pagesPerSession = totalSessions > 0 ? (pageViews.length / totalSessions).toFixed(1) : '0';
+
     // Calculate performance metrics
     const performance = {
+      avgLighthouse: (() => {
+        const projectsWithPerf = projects.filter(p => {
+          const perf = (p.performance as Record<string, unknown>) || {};
+          return (perf.lighthouse as number || 0) > 0;
+        });
+        return projectsWithPerf.length > 0
+          ? Math.round(projectsWithPerf.reduce((sum, p) => {
+              const perf = (p.performance as Record<string, unknown>) || {};
+              return sum + (perf.lighthouse as number || 0);
+            }, 0) / projectsWithPerf.length)
+          : 0;
+      })(),
+      totalViews: pageViews.length,
+      metrics: {
+        bounceRate,
+        avgSessionDuration: avgSessionDuration,
+        pagesPerSession: parseFloat(pagesPerSession),
+        newUsers: new Set(pageViews.map(pv => pv.ip).filter(Boolean)).size
+      },
       pageViews: {
         total: pageViews.length,
         last24h: pageViews.filter(pv => {

app/api/analytics/reset/route.ts

@@ -33,86 +33,15 @@ export async function POST(request: NextRequest) {
 
     switch (type) {
       case 'analytics':
-        // Reset all project analytics
-        await prisma.project.updateMany({
-          data: {
-            analytics: {
-              views: 0,
-              likes: 0,
-              shares: 0,
-              comments: 0,
-              bookmarks: 0,
-              clickThroughs: 0,
-              bounceRate: 0,
-              avgTimeOnPage: 0,
-              uniqueVisitors: 0,
-              returningVisitors: 0,
-              conversionRate: 0,
-              socialShares: {
-                twitter: 0,
-                linkedin: 0,
-                facebook: 0,
-                github: 0
-              },
-              deviceStats: {
-                mobile: 0,
-                desktop: 0,
-                tablet: 0
-              },
-              locationStats: {},
-              referrerStats: {},
-              lastUpdated: new Date().toISOString()
-            }
-          }
-        });
-        break;
-
-      case 'pageviews':
-        // Clear PageView table
-        await prisma.pageView.deleteMany({});
-        break;
-
-      case 'interactions':
-        // Clear UserInteraction table
-        await prisma.userInteraction.deleteMany({});
-        break;
-
-      case 'performance':
-        // Reset performance metrics
-        await prisma.project.updateMany({
-          data: {
-            performance: {
-              lighthouse: 0,
-              loadTime: 0,
-              firstContentfulPaint: 0,
-              largestContentfulPaint: 0,
-              cumulativeLayoutShift: 0,
-              totalBlockingTime: 0,
-              speedIndex: 0,
-              accessibility: 0,
-              bestPractices: 0,
-              seo: 0,
-              performanceScore: 0,
-              mobileScore: 0,
-              desktopScore: 0,
-              coreWebVitals: {
-                lcp: 0,
-                fid: 0,
-                cls: 0
-              },
-              lastUpdated: new Date().toISOString()
-            }
-          }
-        });
-        break;
-
-      case 'all':
-        // Reset everything
-        await Promise.all([
-          // Reset analytics
-          prisma.project.updateMany({
+        // Reset all project analytics (view counts in project.analytics JSON)
+        const projects = await prisma.project.findMany();
+        for (const project of projects) {
+          const analytics = (project.analytics as Record<string, unknown>) || {};
+          await prisma.project.update({
+            where: { id: project.id },
             data: {
               analytics: {
+                ...analytics,
                 views: 0,
                 likes: 0,
                 shares: 0,
@@ -140,11 +69,30 @@ export async function POST(request: NextRequest) {
                 lastUpdated: new Date().toISOString()
               }
             }
-          }),
-          // Reset performance
-          prisma.project.updateMany({
+          });
+        }
+        break;
+
+      case 'pageviews':
+        // Clear PageView table
+        await prisma.pageView.deleteMany({});
+        break;
+
+      case 'interactions':
+        // Clear UserInteraction table
+        await prisma.userInteraction.deleteMany({});
+        break;
+
+      case 'performance':
+        // Reset performance metrics (preserve structure)
+        const projectsForPerf = await prisma.project.findMany();
+        for (const project of projectsForPerf) {
+          const perf = (project.performance as Record<string, unknown>) || {};
+          await prisma.project.update({
+            where: { id: project.id },
             data: {
               performance: {
+                ...perf,
                 lighthouse: 0,
                 loadTime: 0,
                 firstContentfulPaint: 0,
@@ -166,6 +114,73 @@ export async function POST(request: NextRequest) {
                 lastUpdated: new Date().toISOString()
               }
             }
+          });
+        }
+        break;
+
+      case 'all':
+        // Reset everything
+        const allProjects = await prisma.project.findMany();
+        await Promise.all([
+          // Reset analytics and performance for each project (preserve structure)
+          ...allProjects.map(project => {
+            const analytics = (project.analytics as Record<string, unknown>) || {};
+            const perf = (project.performance as Record<string, unknown>) || {};
+            return prisma.project.update({
+              where: { id: project.id },
+              data: {
+                analytics: {
+                  ...analytics,
+                  views: 0,
+                  likes: 0,
+                  shares: 0,
+                  comments: 0,
+                  bookmarks: 0,
+                  clickThroughs: 0,
+                  bounceRate: 0,
+                  avgTimeOnPage: 0,
+                  uniqueVisitors: 0,
+                  returningVisitors: 0,
+                  conversionRate: 0,
+                  socialShares: {
+                    twitter: 0,
+                    linkedin: 0,
+                    facebook: 0,
+                    github: 0
+                  },
+                  deviceStats: {
+                    mobile: 0,
+                    desktop: 0,
+                    tablet: 0
+                  },
+                  locationStats: {},
+                  referrerStats: {},
+                  lastUpdated: new Date().toISOString()
+                },
+                performance: {
+                  ...perf,
+                  lighthouse: 0,
+                  loadTime: 0,
+                  firstContentfulPaint: 0,
+                  largestContentfulPaint: 0,
+                  cumulativeLayoutShift: 0,
+                  totalBlockingTime: 0,
+                  speedIndex: 0,
+                  accessibility: 0,
+                  bestPractices: 0,
+                  seo: 0,
+                  performanceScore: 0,
+                  mobileScore: 0,
+                  desktopScore: 0,
+                  coreWebVitals: {
+                    lcp: 0,
+                    fid: 0,
+                    cls: 0
+                  },
+                  lastUpdated: new Date().toISOString()
+                }
+              }
+            });
           }),
           // Clear tracking tables
           prisma.pageView.deleteMany({}),

app/api/analytics/track/route.ts

@@ -0,0 +1,173 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { prisma } from '@/lib/prisma';
+import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
+
+export async function POST(request: NextRequest) {
+  try {
+    // Rate limiting
+    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+    if (!checkRateLimit(ip, 100, 60000)) { // 100 requests per minute for tracking
+      return new NextResponse(
+        JSON.stringify({ error: 'Rate limit exceeded' }), 
+        { 
+          status: 429, 
+          headers: { 
+            'Content-Type': 'application/json',
+            ...getRateLimitHeaders(ip, 100, 60000)
+          } 
+        }
+      );
+    }
+
+    const body = await request.json();
+    const { type, projectId, page, performance, session } = body;
+    const userAgent = request.headers.get('user-agent') || undefined;
+    const referrer = request.headers.get('referer') || undefined;
+
+    // Track page view
+    if (type === 'pageview' && page) {
+      const projectIdNum = projectId ? parseInt(projectId.toString()) : null;
+      
+      // Create page view record
+      await prisma.pageView.create({
+        data: {
+          projectId: projectIdNum,
+          page,
+          ip,
+          userAgent,
+          referrer
+        }
+      });
+
+      // Update project analytics if projectId exists
+      if (projectIdNum) {
+        const project = await prisma.project.findUnique({
+          where: { id: projectIdNum }
+        });
+
+        if (project) {
+          const analytics = (project.analytics as Record<string, unknown>) || {};
+          const currentViews = (analytics.views as number) || 0;
+          
+          await prisma.project.update({
+            where: { id: projectIdNum },
+            data: {
+              analytics: {
+                ...analytics,
+                views: currentViews + 1,
+                lastUpdated: new Date().toISOString()
+              }
+            }
+          });
+        }
+      }
+    }
+
+    // Track performance metrics
+    if (type === 'performance' && performance) {
+      // Try to get projectId from page path if not provided
+      let projectIdNum: number | null = null;
+      if (projectId) {
+        projectIdNum = parseInt(projectId.toString());
+      } else if (page) {
+        // Try to extract from page path like /projects/123 or /projects/slug
+        const match = page.match(/\/projects\/(\d+)/);
+        if (match) {
+          projectIdNum = parseInt(match[1]);
+        } else {
+          // Try to find by slug
+          const slugMatch = page.match(/\/projects\/([^\/]+)/);
+          if (slugMatch) {
+            const slug = slugMatch[1];
+            const project = await prisma.project.findFirst({
+              where: {
+                OR: [
+                  { id: parseInt(slug) || 0 },
+                  { title: { contains: slug, mode: 'insensitive' } }
+                ]
+              }
+            });
+            if (project) projectIdNum = project.id;
+          }
+        }
+      }
+
+      if (projectIdNum) {
+        const project = await prisma.project.findUnique({
+          where: { id: projectIdNum }
+        });
+
+        if (project) {
+          const perf = (project.performance as Record<string, unknown>) || {};
+          const analytics = (project.analytics as Record<string, unknown>) || {};
+          
+          // Calculate lighthouse score from web vitals
+          const lcp = performance.lcp || 0;
+          const fid = performance.fid || 0;
+          const cls = performance.cls || 0;
+          const fcp = performance.fcp || 0;
+          const ttfb = performance.ttfb || 0;
+          
+          // Only calculate lighthouse score if we have real web vitals data
+          // Check if we have at least LCP and FCP (most important metrics)
+          if (lcp > 0 || fcp > 0) {
+            // Simple lighthouse score calculation (0-100)
+            let lighthouseScore = 100;
+            if (lcp > 4000) lighthouseScore -= 25;
+            else if (lcp > 2500) lighthouseScore -= 15;
+            if (fid > 300) lighthouseScore -= 25;
+            else if (fid > 100) lighthouseScore -= 15;
+            if (cls > 0.25) lighthouseScore -= 25;
+            else if (cls > 0.1) lighthouseScore -= 15;
+            if (fcp > 3000) lighthouseScore -= 15;
+            if (ttfb > 800) lighthouseScore -= 10;
+            
+            lighthouseScore = Math.max(0, Math.min(100, lighthouseScore));
+
+            await prisma.project.update({
+              where: { id: projectIdNum },
+            data: {
+              performance: {
+                ...perf,
+                lighthouse: lighthouseScore,
+                loadTime: performance.loadTime || perf.loadTime || 0,
+                firstContentfulPaint: fcp || perf.firstContentfulPaint || 0,
+                largestContentfulPaint: lcp || perf.largestContentfulPaint || 0,
+                cumulativeLayoutShift: cls || perf.cumulativeLayoutShift || 0,
+                totalBlockingTime: performance.tbt || perf.totalBlockingTime || 0,
+                speedIndex: performance.si || perf.speedIndex || 0,
+                coreWebVitals: {
+                  lcp: lcp || (perf.coreWebVitals as Record<string, unknown>)?.lcp || 0,
+                  fid: fid || (perf.coreWebVitals as Record<string, unknown>)?.fid || 0,
+                  cls: cls || (perf.coreWebVitals as Record<string, unknown>)?.cls || 0
+                },
+                lastUpdated: new Date().toISOString()
+              },
+              analytics: {
+                ...analytics,
+                lastUpdated: new Date().toISOString()
+              }
+            }
+          });
+        }
+      }
+    }
+
+    // Track session data (for bounce rate calculation)
+    if (type === 'session' && session) {
+      // Store session data in a way that allows bounce rate calculation
+      // A bounce is a session with only one pageview
+      // We'll track this via PageView records and calculate bounce rate from them
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Analytics tracking error:', error);
+    }
+    return NextResponse.json(
+      { error: 'Failed to track analytics' },
+      { status: 500 }
+    );
+  }
+}

app/editor/page.tsx

@@ -29,6 +29,7 @@ import {
   Github,
   Tag,
 } from "lucide-react";
+import { useToast } from "@/components/Toast";
 
 interface Project {
   id: string;
@@ -50,6 +51,7 @@ function EditorPageContent() {
   const searchParams = useSearchParams();
   const projectId = searchParams.get("id");
   const contentRef = useRef<HTMLDivElement>(null);
+  const { showSuccess, showError } = useToast();
 
   const [, setProject] = useState<Project | null>(null);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
@@ -58,6 +60,10 @@ function EditorPageContent() {
   const [isCreating, setIsCreating] = useState(!projectId);
   const [showPreview, setShowPreview] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
+  const [history, setHistory] = useState<typeof formData[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [originalFormData, setOriginalFormData] = useState<typeof formData | null>(null);
+  const shouldUpdateContentRef = useRef(true);
 
   // Form state
   const [formData, setFormData] = useState({
@@ -84,8 +90,7 @@ function EditorPageContent() {
         );
 
         if (foundProject) {
-          setProject(foundProject);
-          setFormData({
+          const initialData = {
             title: foundProject.title || "",
             description: foundProject.description || "",
             content: foundProject.content || "",
@@ -96,7 +101,19 @@ function EditorPageContent() {
             github: foundProject.github || "",
             live: foundProject.live || "",
             image: foundProject.image || "",
-          });
+          };
+          setProject(foundProject);
+          setFormData(initialData);
+          setOriginalFormData(initialData);
+          setHistory([initialData]);
+          setHistoryIndex(0);
+          shouldUpdateContentRef.current = true;
+          // Initialize contentEditable after state update
+          setTimeout(() => {
+            if (contentRef.current && initialData.content) {
+              contentRef.current.textContent = initialData.content;
+            }
+          }, 0);
         }
       } else {
         if (process.env.NODE_ENV === "development") {
@@ -126,6 +143,30 @@ function EditorPageContent() {
             await loadProject(projectId);
           } else {
             setIsCreating(true);
+            // Initialize history for new project
+            const initialData = {
+              title: "",
+              description: "",
+              content: "",
+              category: "web",
+              tags: [],
+              featured: false,
+              published: false,
+              github: "",
+              live: "",
+              image: "",
+            };
+            setFormData(initialData);
+            setOriginalFormData(initialData);
+            setHistory([initialData]);
+            setHistoryIndex(0);
+            shouldUpdateContentRef.current = true;
+            // Initialize contentEditable after state update
+            setTimeout(() => {
+              if (contentRef.current) {
+                contentRef.current.textContent = "";
+              }
+            }, 0);
           }
         } else {
           setIsAuthenticated(false);
@@ -143,18 +184,20 @@ function EditorPageContent() {
     init();
   }, [projectId, loadProject]);
 
-  const handleSave = async () => {
+  const handleSave = useCallback(async () => {
     try {
       setIsSaving(true);
 
       // Validate required fields
       if (!formData.title.trim()) {
-        alert("Please enter a project title");
+        showError("Validation Error", "Please enter a project title");
+        setIsSaving(false);
         return;
       }
 
       if (!formData.description.trim()) {
-        alert("Please enter a project description");
+        showError("Validation Error", "Please enter a project description");
+        setIsSaving(false);
         return;
       }
 
@@ -205,40 +248,156 @@ function EditorPageContent() {
           image: savedProject.imageUrl || "",
         }));
 
-        // Show success and redirect
-        alert("Project saved successfully!");
-        setTimeout(() => {
-          window.location.href = "/manage";
-        }, 1000);
+        // Show success toast (smaller, smoother)
+        showSuccess("Saved", `"${savedProject.title}" saved`);
+        
+        // Update project ID if it was a new project
+        if (!projectId && savedProject.id) {
+          const newUrl = `/editor?id=${savedProject.id}`;
+          window.history.replaceState({}, '', newUrl);
+        }
       } else {
         const errorData = await response.json();
         if (process.env.NODE_ENV === "development") {
           console.error("Error saving project:", response.status, errorData);
         }
-        alert(`Error saving project: ${errorData.error || "Unknown error"}`);
+        showError("Save Failed", errorData.error || "Failed to save");
       }
     } catch (error) {
       if (process.env.NODE_ENV === "development") {
         console.error("Error saving project:", error);
       }
-      alert(
-        `Error saving project: ${error instanceof Error ? error.message : "Unknown error"}`,
+      showError(
+        "Save Failed",
+        error instanceof Error ? error.message : "Failed to save"
       );
     } finally {
       setIsSaving(false);
     }
-  };
+  }, [projectId, formData, showSuccess, showError]);
 
   const handleInputChange = (
     field: string,
     value: string | boolean | string[],
   ) => {
-    setFormData((prev) => ({
-      ...prev,
-      [field]: value,
-    }));
+    setFormData((prev) => {
+      const newData = {
+        ...prev,
+        [field]: value,
+      };
+      // Add to history for undo/redo
+      setHistory((hist) => {
+        const newHistory = hist.slice(0, historyIndex + 1);
+        newHistory.push(newData);
+        // Keep only last 50 history entries
+        const trimmedHistory = newHistory.slice(-50);
+        setHistoryIndex(trimmedHistory.length - 1);
+        return trimmedHistory;
+      });
+      return newData;
+    });
   };
 
+  const handleUndo = useCallback(() => {
+    setHistoryIndex((currentIndex) => {
+      if (currentIndex > 0) {
+        const newIndex = currentIndex - 1;
+        shouldUpdateContentRef.current = true;
+        setFormData(history[newIndex]);
+        return newIndex;
+      }
+      return currentIndex;
+    });
+  }, [history]);
+
+  const handleRedo = useCallback(() => {
+    setHistoryIndex((currentIndex) => {
+      if (currentIndex < history.length - 1) {
+        const newIndex = currentIndex + 1;
+        shouldUpdateContentRef.current = true;
+        setFormData(history[newIndex]);
+        return newIndex;
+      }
+      return currentIndex;
+    });
+  }, [history]);
+
+  const handleRevert = useCallback(() => {
+    if (originalFormData) {
+      if (confirm("Are you sure you want to revert all changes? This cannot be undone.")) {
+        shouldUpdateContentRef.current = true;
+        setFormData(originalFormData);
+        setHistory([originalFormData]);
+        setHistoryIndex(0);
+      }
+    } else if (projectId) {
+      // Reload from server
+      if (confirm("Are you sure you want to revert all changes? This will reload the project from the server.")) {
+        shouldUpdateContentRef.current = true;
+        loadProject(projectId);
+      }
+    }
+  }, [originalFormData, projectId, loadProject]);
+
+  // Sync contentEditable when formData.content changes externally (undo/redo/revert)
+  useEffect(() => {
+    if (contentRef.current && shouldUpdateContentRef.current) {
+      const currentContent = contentRef.current.textContent || "";
+      if (currentContent !== formData.content) {
+        contentRef.current.textContent = formData.content;
+      }
+      shouldUpdateContentRef.current = false;
+    }
+  }, [formData.content]);
+
+  // Initialize contentEditable when formData.content is set and editor is empty
+  useEffect(() => {
+    if (contentRef.current) {
+      const currentText = contentRef.current.textContent || "";
+      // Initialize if editor is empty and we have content, or if content changed externally
+      if ((!currentText && formData.content) || (shouldUpdateContentRef.current && currentText !== formData.content)) {
+        contentRef.current.textContent = formData.content;
+        shouldUpdateContentRef.current = false;
+      }
+    }
+  }, [formData.content]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ctrl+S or Cmd+S - Save
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        if (!isSaving) {
+          handleSave();
+        }
+      }
+      // Ctrl+Z or Cmd+Z - Undo
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault();
+        handleUndo();
+      }
+      // Ctrl+Shift+Z or Cmd+Shift+Z - Redo
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && e.shiftKey) {
+        e.preventDefault();
+        handleRedo();
+      }
+      // Ctrl+R or Cmd+R - Revert (but allow browser refresh if not in editor)
+      if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
+        const target = e.target as HTMLElement;
+        if (target.isContentEditable || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+          e.preventDefault();
+          handleRevert();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isSaving, handleSave, handleUndo, handleRedo, handleRevert]);
+
   const handleTagsChange = (tagsString: string) => {
     const tags = tagsString
       .split(",")
@@ -358,7 +517,7 @@ function EditorPageContent() {
             <motion.div
               animate={{ rotate: 360 }}
               transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-              className="w-12 h-12 border-3 border-blue-500 border-t-transparent rounded-full mx-auto mb-6"
+              className="w-12 h-12 border-3 border-stone-500 border-t-transparent rounded-full mx-auto mb-6"
             />
             <h2 className="text-xl font-semibold gradient-text mb-2">
               Loading Editor
@@ -390,7 +549,7 @@ function EditorPageContent() {
 
           <button
             onClick={() => (window.location.href = "/manage")}
-            className="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl hover:scale-105 transition-all font-medium"
+            className="w-full px-6 py-3 bg-stone-600 text-white rounded-xl hover:bg-stone-700 transition-all font-medium"
           >
             Go to Admin Login
           </button>
@@ -400,15 +559,15 @@ function EditorPageContent() {
   }
 
   return (
-    <div className="min-h-screen animated-bg">
+    <div className="min-h-screen animated-bg flex flex-col overflow-hidden">
       {/* Header */}
-      <div className="glass-card border-b border-white/10 sticky top-0 z-50">
+      <div className="glass-card border-b border-white/10 sticky top-0 z-50 flex-shrink-0">
         <div className="max-w-7xl mx-auto px-4 sm:px-6">
           <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between h-auto sm:h-16 py-4 sm:py-0 gap-4 sm:gap-0">
             <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
               <button
                 onClick={() => (window.location.href = "/manage")}
-                className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors"
+                className="inline-flex items-center space-x-2 text-stone-400 hover:text-stone-300 transition-colors"
               >
                 <ArrowLeft className="w-5 h-5" />
                 <span className="hidden sm:inline">Back to Dashboard</span>
@@ -427,8 +586,8 @@ function EditorPageContent() {
                 onClick={() => setShowPreview(!showPreview)}
                 className={`flex items-center space-x-2 px-4 py-2 rounded-lg font-medium transition-all duration-200 text-sm ${
                   showPreview
-                    ? "bg-blue-600 text-white shadow-lg"
-                    : "bg-gray-800/50 text-gray-300 hover:bg-gray-700/50 hover:text-white"
+                    ? "bg-stone-600 text-white shadow-lg"
+                    : "bg-gray-800/50 text-stone-300 hover:bg-gray-700/50 hover:text-stone-100"
                 }`}
               >
                 <Eye className="w-4 h-4" />
@@ -452,9 +611,10 @@ function EditorPageContent() {
         </div>
       </div>
 
-      {/* Editor Content */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
-        <div className="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
+      {/* Editor Content - Scrollable */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
+        <div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
           {/* Floating particles background */}
           <div className="particles">
             {[...Array(20)].map((_, i) => (
@@ -469,187 +629,12 @@ function EditorPageContent() {
               />
             ))}
           </div>
-          {/* Main Editor */}
-          <div className="xl:col-span-3 space-y-6">
-            {/* Project Title */}
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="glass-card p-6 rounded-2xl"
-            >
-              <input
-                type="text"
-                value={formData.title}
-                onChange={(e) => handleInputChange("title", e.target.value)}
-                className="w-full text-3xl font-bold form-input-enhanced focus:outline-none p-4 rounded-lg"
-                placeholder="Enter project title..."
-              />
-            </motion.div>
-
-            {/* Rich Text Toolbar */}
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.1 }}
-              className="glass-card p-4 rounded-2xl"
-            >
-              <div className="flex flex-wrap items-center gap-1 sm:gap-2">
-                <div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
-                  <button
-                    onClick={() => insertFormatting("bold")}
-                    className="p-2 rounded-lg text-gray-300"
-                    title="Bold"
-                  >
-                    <Bold className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => insertFormatting("italic")}
-                    className="p-2 rounded-lg text-gray-300"
-                    title="Italic"
-                  >
-                    <Italic className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => insertFormatting("code")}
-                    className="p-2 rounded-lg text-gray-300"
-                    title="Code"
-                  >
-                    <Code className="w-4 h-4" />
-                  </button>
-                </div>
-
-                <div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
-                  <button
-                    onClick={() => insertFormatting("h1")}
-                    className="p-2 rounded-lg text-gray-300"
-                    title="Heading 1"
-                  >
-                    <Hash className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => insertFormatting("h2")}
-                    className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-gray-300 hover:text-white hover:scale-105"
-                    title="Heading 2"
-                  >
-                    H2
-                  </button>
-                  <button
-                    onClick={() => insertFormatting("h3")}
-                    className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-gray-300 hover:text-white hover:scale-105"
-                    title="Heading 3"
-                  >
-                    H3
-                  </button>
-                </div>
-
-                <div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
-                  <button
-                    onClick={() => insertFormatting("list")}
-                    className="p-2 rounded-lg text-gray-300"
-                    title="Bullet List"
-                  >
-                    <List className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => insertFormatting("orderedList")}
-                    className="p-2 rounded-lg text-gray-300"
-                    title="Numbered List"
-                  >
-                    <ListOrdered className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => insertFormatting("quote")}
-                    className="p-2 rounded-lg text-gray-300"
-                    title="Quote"
-                  >
-                    <Quote className="w-4 h-4" />
-                  </button>
-                </div>
-
-                <div className="flex items-center space-x-1">
-                  <button
-                    onClick={() => insertFormatting("link")}
-                    className="p-2 rounded-lg text-gray-300"
-                    title="Link"
-                  >
-                    <Link className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => insertFormatting("image")}
-                    className="p-2 rounded-lg text-gray-300"
-                    title="Image"
-                  >
-                    {/* eslint-disable-next-line jsx-a11y/alt-text */}
-                    <Image className="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
-            </motion.div>
-
-            {/* Content Editor */}
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.2 }}
-              className="glass-card p-6 rounded-2xl"
-            >
-              <h3 className="text-lg font-semibold gradient-text mb-4">
-                Content
-              </h3>
-              <div
-                ref={contentRef}
-                contentEditable
-                className="editor-content-editable w-full min-h-[400px] p-6 form-input-enhanced rounded-lg focus:outline-none leading-relaxed"
-                style={{ whiteSpace: "pre-wrap" }}
-                onInput={(e) => {
-                  const target = e.target as HTMLDivElement;
-                  setIsTyping(true);
-                  setFormData((prev) => ({
-                    ...prev,
-                    content: target.textContent || "",
-                  }));
-                }}
-                onBlur={() => {
-                  setIsTyping(false);
-                }}
-                suppressContentEditableWarning={true}
-                data-placeholder="Start writing your project content..."
-              >
-                {!isTyping ? formData.content : undefined}
-              </div>
-              <p className="text-xs text-white/50 mt-2">
-                Supports Markdown formatting. Use the toolbar above or type
-                directly.
-              </p>
-            </motion.div>
-
-            {/* Description */}
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.3 }}
-              className="glass-card p-6 rounded-2xl"
-            >
-              <h3 className="text-lg font-semibold gradient-text mb-4">
-                Description
-              </h3>
-              <textarea
-                value={formData.description}
-                onChange={(e) =>
-                  handleInputChange("description", e.target.value)
-                }
-                rows={4}
-                className="w-full px-4 py-3 form-input-enhanced rounded-lg focus:outline-none resize-none"
-                placeholder="Brief description of your project..."
-              />
-            </motion.div>
-          </div>
-
-          {/* Sidebar */}
-          <div className="space-y-6">
+          
+          {/* Sidebar - Left (appears first in DOM for left positioning) */}
+          <div className="w-full lg:w-80 flex-shrink-0 space-y-6 order-1 lg:order-1">
             {/* Project Settings */}
             <motion.div
-              initial={{ opacity: 0, x: 20 }}
+              initial={{ opacity: 0, x: -20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ delay: 0.4 }}
               className="glass-card p-6 rounded-2xl"
@@ -660,7 +645,7 @@ function EditorPageContent() {
 
               <div className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium text-white/70 mb-2">
+                  <label className="block text-sm font-medium text-stone-300 mb-2">
                     Category
                   </label>
                   <div className="custom-select">
@@ -681,7 +666,7 @@ function EditorPageContent() {
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-white/70 mb-2">
+                  <label className="block text-sm font-medium text-stone-300 mb-2">
                     Tags
                   </label>
                   <input
@@ -697,7 +682,7 @@ function EditorPageContent() {
 
             {/* Links */}
             <motion.div
-              initial={{ opacity: 0, x: 20 }}
+              initial={{ opacity: 0, x: -20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ delay: 0.5 }}
               className="glass-card p-6 rounded-2xl"
@@ -708,7 +693,7 @@ function EditorPageContent() {
 
               <div className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium text-white/70 mb-2">
+                  <label className="block text-sm font-medium text-stone-300 mb-2">
                     GitHub URL
                   </label>
                   <input
@@ -723,7 +708,7 @@ function EditorPageContent() {
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-white/70 mb-2">
+                  <label className="block text-sm font-medium text-stone-300 mb-2">
                     Live URL
                   </label>
                   <input
@@ -739,7 +724,7 @@ function EditorPageContent() {
 
             {/* Publish */}
             <motion.div
-              initial={{ opacity: 0, x: 20 }}
+              initial={{ opacity: 0, x: -20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ delay: 0.6 }}
               className="glass-card p-6 rounded-2xl"
@@ -756,9 +741,9 @@ function EditorPageContent() {
                     onChange={(e) =>
                       handleInputChange("featured", e.target.checked)
                     }
-                    className="w-4 h-4 text-blue-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-blue-500 focus:ring-2"
+                    className="w-4 h-4 text-stone-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-stone-500 focus:ring-2"
                   />
-                  <span className="text-white">Featured Project</span>
+                  <span className="text-stone-200">Featured Project</span>
                 </label>
 
                 <label className="flex items-center space-x-3">
@@ -768,20 +753,20 @@ function EditorPageContent() {
                     onChange={(e) =>
                       handleInputChange("published", e.target.checked)
                     }
-                    className="w-4 h-4 text-blue-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-blue-500 focus:ring-2"
+                    className="w-4 h-4 text-stone-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-stone-500 focus:ring-2"
                   />
-                  <span className="text-white">Published</span>
+                  <span className="text-stone-200">Published</span>
                 </label>
               </div>
 
               <div className="mt-6 pt-4 border-t border-white/20">
-                <h4 className="text-sm font-medium text-white/70 mb-2">
+                <h4 className="text-sm font-medium text-stone-300 mb-2">
                   Preview
                 </h4>
-                <div className="text-xs text-white/50 space-y-1">
+                <div className="text-xs text-stone-400 space-y-1">
                   <p>Status: {formData.published ? "Published" : "Draft"}</p>
                   {formData.featured && (
-                    <p className="text-blue-400">⭐ Featured</p>
+                    <p className="text-stone-400">⭐ Featured</p>
                   )}
                   <p>Category: {formData.category}</p>
                   <p>Tags: {formData.tags.length} tags</p>
@@ -789,8 +774,227 @@ function EditorPageContent() {
               </div>
             </motion.div>
           </div>
+
+          {/* Main Editor - Right (appears second in DOM for right positioning) */}
+          <div className="flex-1 space-y-6 order-2 lg:order-2 min-w-0">
+            {/* Project Title */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="glass-card p-6 rounded-2xl"
+            >
+              <input
+                type="text"
+                value={formData.title}
+                onChange={(e) => handleInputChange("title", e.target.value)}
+                className="w-full text-3xl font-bold form-input-enhanced focus:outline-none p-4 rounded-lg"
+                placeholder="Enter project title..."
+              />
+            </motion.div>
+
+            {/* Description - Under Title */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 }}
+              className="glass-card p-6 rounded-2xl"
+            >
+              <h3 className="text-lg font-semibold gradient-text mb-4">
+                Description
+              </h3>
+              <textarea
+                value={formData.description}
+                onChange={(e) =>
+                  handleInputChange("description", e.target.value)
+                }
+                rows={4}
+                className="w-full px-4 py-3 form-input-enhanced rounded-lg focus:outline-none resize-none"
+                placeholder="Brief description of your project..."
+              />
+            </motion.div>
+
+            {/* Rich Text Toolbar */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2 }}
+              className="glass-card p-4 rounded-2xl"
+            >
+              <div className="flex flex-wrap items-center gap-1 sm:gap-2">
+                <div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
+                  <button
+                    onClick={() => insertFormatting("bold")}
+                    className="p-2 rounded-lg text-stone-300"
+                    title="Bold"
+                  >
+                    <Bold className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => insertFormatting("italic")}
+                    className="p-2 rounded-lg text-stone-300"
+                    title="Italic"
+                  >
+                    <Italic className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => insertFormatting("code")}
+                    className="p-2 rounded-lg text-stone-300"
+                    title="Code"
+                  >
+                    <Code className="w-4 h-4" />
+                  </button>
+                </div>
+
+                <div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
+                  <button
+                    onClick={() => insertFormatting("h1")}
+                    className="p-2 rounded-lg text-stone-300"
+                    title="Heading 1"
+                  >
+                    <Hash className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => insertFormatting("h2")}
+                    className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-stone-300 hover:text-stone-100"
+                    title="Heading 2"
+                  >
+                    H2
+                  </button>
+                  <button
+                    onClick={() => insertFormatting("h3")}
+                    className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-stone-300 hover:text-stone-100"
+                    title="Heading 3"
+                  >
+                    H3
+                  </button>
+                </div>
+
+                <div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
+                  <button
+                    onClick={() => insertFormatting("list")}
+                    className="p-2 rounded-lg text-stone-300"
+                    title="Bullet List"
+                  >
+                    <List className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => insertFormatting("orderedList")}
+                    className="p-2 rounded-lg text-stone-300"
+                    title="Numbered List"
+                  >
+                    <ListOrdered className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => insertFormatting("quote")}
+                    className="p-2 rounded-lg text-stone-300"
+                    title="Quote"
+                  >
+                    <Quote className="w-4 h-4" />
+                  </button>
+                </div>
+
+                <div className="flex items-center space-x-1">
+                  <button
+                    onClick={() => insertFormatting("link")}
+                    className="p-2 rounded-lg text-stone-300"
+                    title="Link"
+                  >
+                    <Link className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => insertFormatting("image")}
+                    className="p-2 rounded-lg text-stone-300"
+                    title="Image"
+                  >
+                    {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                    <Image className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+
+            {/* Content Editor */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 }}
+              className="glass-card p-6 rounded-2xl"
+            >
+              <h3 className="text-lg font-semibold gradient-text mb-4">
+                Content
+              </h3>
+              <div className="relative">
+                <div
+                  ref={contentRef}
+                  contentEditable
+                  className="editor-content-editable w-full min-h-[500px] p-6 form-input-enhanced rounded-lg focus:outline-none leading-relaxed"
+                  style={{ whiteSpace: "pre-wrap" }}
+                  onFocus={(e) => {
+                    // Ensure content is set when focusing if empty
+                    const target = e.target as HTMLDivElement;
+                    const currentText = target.textContent || "";
+                    if (!currentText && formData.content) {
+                      target.textContent = formData.content;
+                    } else if (currentText !== formData.content && shouldUpdateContentRef.current) {
+                      // Sync if content changed externally (undo/redo)
+                      target.textContent = formData.content;
+                    }
+                    shouldUpdateContentRef.current = false;
+                  }}
+                  onMouseDown={(e) => {
+                    // Prevent content from being cleared on click
+                    const target = e.target as HTMLDivElement;
+                    const currentText = target.textContent || "";
+                    if (!currentText && formData.content) {
+                      target.textContent = formData.content;
+                    }
+                    shouldUpdateContentRef.current = false;
+                  }}
+                  onClick={(e) => {
+                    // Ensure content persists on click
+                    const target = e.target as HTMLDivElement;
+                    if (!target.textContent && formData.content) {
+                      target.textContent = formData.content;
+                    }
+                  }}
+                  onInput={(e) => {
+                    const target = e.target as HTMLDivElement;
+                    setIsTyping(true);
+                    shouldUpdateContentRef.current = false;
+                    const newContent = target.textContent || "";
+                    setFormData((prev) => {
+                      const newData = {
+                        ...prev,
+                        content: newContent,
+                      };
+                      // Add to history for undo/redo
+                      setHistory((hist) => {
+                        const newHistory = hist.slice(0, historyIndex + 1);
+                        newHistory.push(newData);
+                        // Keep only last 50 history entries
+                        const trimmedHistory = newHistory.slice(-50);
+                        setHistoryIndex(trimmedHistory.length - 1);
+                        return trimmedHistory;
+                      });
+                      return newData;
+                    });
+                  }}
+                  onBlur={() => {
+                    setIsTyping(false);
+                  }}
+                  suppressContentEditableWarning={true}
+                  data-placeholder="Start writing your project content..."
+                />
+              </div>
+              <p className="text-xs text-stone-400 mt-2">
+                Supports Markdown formatting. Use the toolbar above or type
+                directly.
+              </p>
+            </motion.div>
+          </div>
         </div>
       </div>
+      </div>
 
       {/* Preview Modal */}
       <AnimatePresence>
@@ -806,7 +1010,7 @@ function EditorPageContent() {
               initial={{ scale: 0.9, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
               exit={{ scale: 0.9, opacity: 0 }}
-              className="glass-card rounded-2xl p-8 max-w-4xl w-full max-h-[90vh] overflow-y-auto"
+              className="glass-card rounded-2xl p-8 max-w-4xl w-full max-h-[90vh] overflow-y-auto scrollbar-hide"
               onClick={(e) => e.stopPropagation()}
             >
               <div className="flex items-center justify-between mb-6">
@@ -834,12 +1038,12 @@ function EditorPageContent() {
 
                   {/* Project Meta */}
                   <div className="flex flex-wrap justify-center gap-4 mb-6">
-                    <div className="flex items-center space-x-2 text-gray-300">
+                    <div className="flex items-center space-x-2 text-stone-300">
                       <Tag className="w-4 h-4" />
                       <span className="capitalize">{formData.category}</span>
                     </div>
                     {formData.featured && (
-                      <div className="flex items-center space-x-2 text-blue-400">
+                      <div className="flex items-center space-x-2 text-stone-400">
                         <span className="text-sm font-semibold">
                           ⭐ Featured
                         </span>
@@ -853,7 +1057,7 @@ function EditorPageContent() {
                       {formData.tags.map((tag, index) => (
                         <span
                           key={index}
-                          className="px-3 py-1 bg-gray-800/50 text-gray-300 text-sm rounded-full border border-gray-700"
+                          className="px-3 py-1 bg-gray-800/50 text-stone-300 text-sm rounded-full border border-gray-700"
                         >
                           {tag}
                         </span>
@@ -870,7 +1074,7 @@ function EditorPageContent() {
                           href={formData.github}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="flex items-center space-x-2 px-4 py-2 bg-gray-800/50 text-gray-300 rounded-lg"
+                          className="flex items-center space-x-2 px-4 py-2 bg-gray-800/50 text-stone-300 rounded-lg"
                         >
                           <Github className="w-4 h-4" />
                           <span>GitHub</span>
@@ -881,7 +1085,7 @@ function EditorPageContent() {
                           href={formData.live}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="flex items-center space-x-2 px-4 py-2 bg-blue-600/80 text-white rounded-lg"
+                          className="flex items-center space-x-2 px-4 py-2 bg-stone-600/80 text-white rounded-lg"
                         >
                           <ExternalLink className="w-4 h-4" />
                           <span>Live Demo</span>
@@ -898,7 +1102,7 @@ function EditorPageContent() {
                       Content
                     </h3>
                     <div className="prose prose-invert max-w-none">
-                      <div className="markdown text-gray-300 leading-relaxed">
+                      <div className="markdown text-stone-300 leading-relaxed">
                         <ReactMarkdown components={markdownComponents}>
                           {formData.content}
                         </ReactMarkdown>
@@ -921,7 +1125,7 @@ function EditorPageContent() {
                         {formData.published ? "Published" : "Draft"}
                       </span>
                       {formData.featured && (
-                        <span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm font-medium">
+                        <span className="px-3 py-1 bg-stone-500/20 text-stone-400 rounded-full text-sm font-medium">
                           Featured
                         </span>
                       )}

app/manage/page.tsx

@@ -322,10 +322,10 @@ const AdminPage = () => {
                 {authState.isLoading ? (
                   <div className="flex items-center justify-center space-x-2">
                     <Loader2 className="w-5 h-5 animate-spin" />
-                    <span>Authenticating...</span>
+                    <span className="text-stone-50">Authenticating...</span>
                   </div>
                 ) : (
-                  <span>Sign In</span>
+                  <span className="text-stone-50">Sign In</span>
                 )}
               </button>
             </form>

app/projects/[slug]/page.tsx

@@ -35,7 +35,28 @@ const ProjectDetail = () => {
         if (response.ok) {
           const data = await response.json();
           if (data.projects && data.projects.length > 0) {
-            setProject(data.projects[0]);
+            const loadedProject = data.projects[0];
+            setProject(loadedProject);
+            
+            // Track page view
+            try {
+              await fetch('/api/analytics/track', {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                  type: 'pageview',
+                  projectId: loadedProject.id.toString(),
+                  page: `/projects/${slug}`
+                })
+              });
+            } catch (trackError) {
+              // Silently fail tracking
+              if (process.env.NODE_ENV === 'development') {
+                console.error('Error tracking page view:', trackError);
+              }
+            }
           }
         }
       } catch (error) {