remcostoeten · remcostoeten · Feb 14, 2026 · Feb 14, 2026 · Feb 15, 2026 · Feb 15, 2026
diff --git a/.env.example b/.env.example
@@ -39,17 +39,17 @@ NEXT_PUBLIC_POSTHOG_KEY="" # Project API key from PostHog
 NEXT_PUBLIC_POSTHOG_HOST="" # PostHog host URL (e.g., https://app.posthog.com)
 
 # ============================================================
-# GitHub (for public profile data)
+# GitHub (for server-side API calls)
 # ============================================================
-NEXT_PUBLIC_GITHUB_TOKEN="" # Personal access token for GitHub API
+GITHUB_TOKEN="" # Personal access token for GitHub API (server only)
 
 # ============================================================
 # Spotify OAuth (optional)
 # ============================================================
 SPOTIFY_CLIENT_ID="" # Create OAuth app at https://developer.spotify.com/dashboard
 SPOTIFY_CLIENT_SECRET="" # Retrieved from Spotify app settings
 SPOTIFY_REFRESH_TOKEN="" # Needed for server-side syncing without user login
-SPOTIFY_REDIRECT_URI="http://127.0.0.1:3000/api/auth/spotify/callback"
+SPOTIFY_REDIRECT_URI="http://127.0.0.1:3000/api/spotify/callback"
 
 # ============================================================
 # IP info service
@@ -59,4 +59,4 @@ IP_INFO_TOKEN="" # Token from https://ipinfo.io
 # ============================================================
 # Vercel Cron
 # ============================================================
-CRON_SECRET="" # Secret key for cron jobs
+CRON_SECRET="" # Secret key for cron jobs
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,5 @@ setup-posthog.md
 
 .env.production
 env.production
+.lh-tmp/*
+
diff --git a/.lighthouse-desktop.json b/.lighthouse-desktop.json
diff --git a/.lighthouse-mobile.json b/.lighthouse-mobile.json
diff --git a/ADMIN_SECTION_REVIEW.md b/ADMIN_SECTION_REVIEW.md
@@ -0,0 +1,313 @@
+# Admin Section Comprehensive Review
+
+## Overview
+The admin section provides dashboard analytics, blog management, contact form tracking, and project management. Implementation is split between server-side authentication and client-side management tools.
+
+---
+
+## 1. UI/UX Analysis
+
+### Dashboard (/admin) - **Good**
+✅ **Strengths:**
+- Clear visual hierarchy with QuickStat cards showing key metrics
+- Tab-based navigation for organizing different sections (Overview, Blogs, Contact, Analytics)
+- Icons provide visual context for each metric
+- Trend indicators (+new) show real-time activity
+- Responsive grid layout (2 cols mobile → 4 cols desktop)
+
+⚠️ **Issues:**
+- Tab list uses `grid-cols-4` on mobile which may feel cramped with text labels
+- Icons hidden on mobile (`hidden md:block`) - could be problematic for mobile UX clarity
+- No loading states while metrics load
+- No error boundaries if data fetch fails
+- Text colors use `text-zinc-100/zinc-500` which is hardcoded instead of using theme semantics
+
+### Projects (/admin/projects) - **Moderate**
+✅ **Strengths:**
+- Two-panel layout: list on left, editor on right (good for desktop)
+- Visual status indicators (eye/eye-off icons for visibility)
+- "Featured" badges for special projects
+- Clear action buttons (up/down arrows for reordering)
+- Unsaved changes indicator in editor
+- Settings panel for configuring visibility count
+
+⚠️ **Issues:**
+- **Grid layout breaks on mobile**: `grid-cols-[1fr,400px]` won't work well on small screens
+- Editor panel uses `sticky top-6` which might overlap header on mobile
+- Grid-based table layout is not responsive - uses hardcoded column widths
+- No confirmation before deleting projects (only JS confirm dialog)
+- Button text is inconsistent in styling across sections
+
+---
+
+## 2. Accessibility Analysis
+
+### Dashboard - **Fair**
+✅ Good:
+- Semantic HTML structure with proper heading hierarchy
+- Icon labels with descriptive text
+- Tab component from `@radix-ui` (accessible)
+
+❌ Issues:
+- **Missing ARIA labels**: Tab triggers have no `aria-label` descriptions
+- **Color-only communication**: Green trend indicator relies on color alone (CVD issue)
+- **No skip links** for navigation
+- **Small touch targets**: Metric cards lack sufficient padding for mobile touch
+- **No focus indicators**: Tab navigation lacks visible focus states
+
+### Projects - **Poor**
+❌ Critical Issues:
+- **No keyboard navigation**: Project list is click-only, can't navigate with arrow keys
+- **Missing ARIA attributes**:
+  - No `role="table"` or `role="row"` definitions
+  - No `aria-selected` on selected project
+  - No `aria-label` on move buttons
+- **Icon-only buttons**: Move up/down buttons only show icons, no text labels
+- **Poorly labeled**: Project deletion uses native `confirm()` which isn't accessible
+- **Title attribute instead of aria-label**: Uses `title="Move up"` instead of proper `aria-label`
+- **No focus visible indicators** on any interactive elements
+- **Text input labels missing**: Form fields lack associated `<label>` elements
+
+### Admin Layout - **Good**
+✅ Proper accessibility:
+- Semantic header structure with `<h1>` for main title
+- Link navigation to home and refresh
+- Proper use of icons with text labels
+
+---
+
+## 3. Mobile Responsiveness Analysis
+
+### Dashboard - **Good**
+✅ Working features:
+- Responsive grid stats (2 cols → 4 cols)
+- Tabs switch to full-width grid on mobile (`grid-cols-4`)
+- Content padding adjusts with screen size
+
+⚠️ Issues:
+- **Stats grid spacing**: `gap-3` might be too tight on very small screens
+- **Tab labels need text**: Icons are hidden but text remains - could wrap awkwardly
+- **Card content might overflow**: Long metric values not tested on small screens
+
+### Projects - **Poor**
+❌ Critical issues:
+- **No mobile layout**: Grid layout `grid-cols-[1fr,400px]` stays fixed on mobile
+  - 400px editor panel takes up 50% of screen on mobile
+  - No way to close editor without selecting another project
+- **Table layout not responsive**: Header columns don't adapt to small screens
+- **Input fields too small**: Form inputs have no mobile-optimized padding
+- **Buttons too small**: Move buttons (1.5 px padding) are below WCAG touch target (44x44px)
+
+### Overall - **Needs Improvement**
+- No mobile navigation for admin sections
+- No responsive breadcrumbs or location indicators
+- Admin panel designed for desktop - mobile access is severely limited
+
+---
+
+## 4. Functionality Analysis
+
+### Authentication & Authorization - **Good**
+✅ Working well:
+- **Layout-level protection**: `checkAdminStatus()` in admin layout prevents unauthorized access
+- **Multiple auth implementations**:
+  - BetterAuth with email/role checks
+  - Cookie-based session validation
+  - Environment variable support for admin email
+- **Proper error handling**: Unauthorized users redirected to home
+- **Action-level guards**: Server mutations protected with `guardAdmin()` pattern
+
+⚠️ Issues:
+- **Multiple implementations**: Three different admin checks exist (auth.ts, auth-guard.ts, is-admin.ts)
+  - Inconsistent email configurations between them
+  - Potential security risk if one is outdated
+  - Code duplication and maintenance burden
+
+### Dashboard Analytics - **Good**
+✅ Features:
+- Real-time metrics: views, visitors, comments, messages
+- Trend indicators for new activity (last 24h for messages)
+- Post statistics with view counts
+- Contact form tracking (submissions, interactions, abandonments)
+- Recent comments display
+- Data organized by tabs and sections
+
+⚠️ Issues:
+- **No real-time updates**: Page requires full refresh for new data
+- **No filtering/sorting**: Blog list shows all posts, no pagination
+- **No date range selectors**: Metrics are hardcoded (total views, 24h for messages)
+- **Mock or real?**: Using real data from database (revalidatePath shows real cache)
+
+### Project Management - **Good**
+✅ Features:
+- Create/read/update/delete operations
+- Drag-to-reorder capability (up/down buttons)
+- Toggle visibility (hidden/visible)
+- Featured badge support
+- Settings management (show N projects)
+- Unsaved changes tracking
+- Labels/tags support
+
+⚠️ Issues:
+- **Full page reload on create**: `window.location.reload()` disrupts UX
+- **No optimistic updates**: All changes require server round-trip before UI updates
+- **Limited validation**: No client-side form validation before submission
+- **Confirmation dialogs**: Using native `confirm()` instead of accessible dialog
+- **Settings update unclear**: Settings panel functionality not visible in code
+
+### Real Purpose Assessment - **Production Ready**
+This is **real functionality**, not mocks:
+- Database operations use actual mutations
+- Cache revalidation indicates real data persistence
+- Auth checks against actual user sessions
+- Metrics aggregated from actual database queries
+
+---
+
+## 5. Detailed Recommendations
+
+### High Priority (Accessibility/Mobile)
+
+#### A. Mobile Layout Redesign (Projects Page)
+```typescript
+// Current:
+<div className="grid gap-6 lg:grid-cols-[1fr,400px]">
+
+// Should be:
+<div className="grid gap-6 md:grid-cols-[1fr,350px]">
+  {/* Mobile: editor becomes modal or drawer */}
+  {/* Desktop: side panel */}
+</div>
+```
+
+#### B. Keyboard Navigation (Project List)
+```typescript
+// Add keyboard navigation to project list
+<div role="table" aria-label="Projects table">
+  <div role="row" tabIndex={0} onKeyDown={handleKeyboardNav}>
+    {/* Row content */}
+  </div>
+</div>
+```
+
+#### C. Touch Targets (Move Buttons)
+```typescript
+// Current: 1.5 px padding (too small)
+// Should be: 2.5 px padding or larger button
+className="p-2.5 text-zinc-500 hover:text-zinc-300 disabled:opacity-30"
+```
+
+#### D. Form Labels
+```typescript
+// Current:
+<Field label="Title">
+  <input type="text" />
+</Field>
+
+// Should be:
+<label htmlFor="project-title">Title</label>
+<input id="project-title" type="text" />
+```
+
+### Medium Priority (UX Improvements)
+
+#### E. Consolidate Auth Logic
+- Create single source of truth for admin checks
+- Remove duplicate implementations in auth.ts, auth-guard.ts, is-admin.ts
+- Centralize admin email configuration
+
+#### F. Reduce Page Reloads
+- Use `useOptimisticUpdate` or React Query instead of `window.location.reload()`
+- Update local state immediately on successful mutation
+- Show toast notifications for feedback
+
+#### G. Add Pagination/Filtering (Dashboard)
+- Paginate blog list (shows all posts currently)
+- Add date range filter for metrics
+- Implement search for blog/contact data
+
+#### H. Mobile Navigation
+- Add responsive admin breadcrumbs
+- Close editor panel on mobile when selecting new project
+- Add back button or drawer navigation
+
+### Low Priority (Polish)
+
+#### I. Loading States
+- Skeleton loaders for metrics on dashboard
+- Loading spinners during async operations
+- Disabled state styling improvements
+
+#### J. Error Handling
+- Error boundaries for failed data loads
+- User-friendly error messages
+- Retry mechanisms for failed mutations
+
+#### K. Theme Consistency
+- Replace hardcoded `zinc-*` colors with semantic theme variables
+- Use `text-foreground/background` from design system
+- Apply button component for consistency
+
+---
+
+## 6. Summary Matrix
+
+| Aspect | Dashboard | Projects | Layout |
+|--------|-----------|----------|--------|
+| **UI/UX** | Good | Moderate | Good |
+| **Accessibility** | Fair | Poor | Good |
+| **Mobile** | Good | Poor | Good |
+| **Functionality** | Good | Good | Good |
+| **Code Quality** | Good | Good | Fair* |
+
+*Fair = Multiple auth implementations need consolidation
+
+---
+
+## 7. Action Items
+
+### Immediate (Next Sprint)
+- [ ] Add `export const dynamic = 'force-dynamic'` to admin layout ✅ DONE
+- [ ] Update next-mdx-remote to v6.0.0+ ✅ DONE
+- [ ] Fix project editor mobile layout (responsive grid)
+- [ ] Add ARIA labels to all buttons and form inputs
+- [ ] Increase button touch targets to 44x44px minimum
+
+### Short-term (2 Weeks)
+- [ ] Consolidate admin auth implementations
+- [ ] Implement optimistic updates for project mutations
+- [ ] Add keyboard navigation to project list
+- [ ] Replace native `confirm()` with accessible dialog
+- [ ] Add form validation before submission
+
+### Medium-term (1 Month)
+- [ ] Add pagination to blog/contact lists
+- [ ] Implement real-time metrics refresh
+- [ ] Mobile drawer UI for project editor
+- [ ] Loading skeleton states
+- [ ] Theme color consolidation
+
+---
+
+## Code References
+
+**Key Files:**
+- `/src/app/(admin)/admin/layout.tsx` - Admin section layout (auth check)
+- `/src/app/(admin)/admin/page.tsx` - Dashboard page
+- `/src/app/(admin)/admin/projects/page.tsx` - Projects page
+- `/src/components/projects/admin/projects-admin.tsx` - Projects manager
+- `/src/components/projects/admin/project-list.tsx` - Project list UI
+- `/src/components/projects/admin/project-editor.tsx` - Project editor form
+
+**Auth Files:**
+- `/src/actions/auth.ts` - Cookie-based auth check (active)
+- `/src/lib/auth-guard.ts` - Alternative auth check (active)
+- `/src/utils/is-admin.ts` - Server utility auth check (active)
+
+---
+
+## Conclusion
+
+The admin section is **functionally complete** and **production-ready** for desktop use. However, it has **significant accessibility and mobile responsiveness gaps** that should be addressed before promoting to the design system or scaling admin features.
+
+The **multiple authentication implementations** should be consolidated for maintainability. Core functionality is solid; improvements focus on user experience and standards compliance.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,3 +40,5 @@ setup-posthog.md

		.env.production
		env.production
		.lh-tmp/*