GuardLayer - AI-Powered Moderation Platform

A modern, modular, and secure content moderation platform built with React, featuring intelligent AI detection combined with human moderator oversight.

✨ Features

• AI-Powered Detection: ML models detect violations across text, images, and user behavior
• Human-in-the-Loop: Moderators review AI decisions with full context and can override when needed
• Comprehensive Coverage: Handle hate speech, spam, harassment, dangerous content, CSAM detection
• Real-Time Monitoring: Live case queues and instant notifications
• Complete Audit Trail: Every decision logged with full context for compliance
• Role-Based Access Control: Admin, Moderator, Viewer roles with appropriate permissions
• Secure by Default: Input sanitization, CSRF protection, encrypted API client
• Enterprise Security: RBAC, audit logging, API-ready authentication

🏗️ Architecture

The application is built with a modern modular architecture:

src/
├── components/      # Reusable UI components
├── pages/          # Page-level components (Landing, Dashboard)
├── contexts/       # React Context API for global state
├── hooks/          # Custom React hooks
├── utils/          # Security, validation, and utility functions
├── services/       # API client and service layer
├── constants/      # Navigation tree, roles, and constants
└── mock/           # Mock data for development

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

The app will be available at http://localhost:3000

Default Test Account

Any user can access the dashboard. The app is pre-configured with a test moderator account:

• Name: Anya K.
• Role: MODERATOR
• Permissions: All moderation actions except policy/threshold editing

📋 Project Structure

Pages

• Landing (src/pages/Landing.jsx) - Premium marketing landing page
• Dashboard (src/pages/Dashboard.jsx) - Main moderation interface

Key Components

Common Components (src/components/common/)

• Icon - SVG icon system with 30+ icons
• Badge - Status/category badges with variants
• Button - CTA buttons with multiple styles
• Card - Card wrapper component
• Toast - Toast notification system
• SectionHeader - Section titles with counts
• ConfidenceBar - Animated progress indicators
• StatCard - Metric display cards

Dashboard Components (src/components/dashboard/)

• Queue components for text, media, and age-sensitive content
• Moderation management (flagged users, automated actions)
• Analytics (system metrics, moderator performance)
• Transparency (audit logs, decision comparison)
• Policy management and threshold configuration

State Management

AuthContext

Manages user authentication and role-based permissions:

{
  user: { id, name, email, role, avatar },
  isAuthenticated: boolean,
  hasPermission: (permission) => boolean,
  canPerformAction: (action) => boolean,
  login: (credentials) => void,
  logout: () => void
}

ToastContext

Manages toast notifications:

{
  addToast: (message, type, duration) => string,
  removeToast: (id) => void,
}

DashboardContext

Manages dashboard UI state:

{
  activePage: string,
  expandedGroups: string[],
  expandedSections: string[],
  filters: object,
  toggleGroup: (group) => void,
  toggleSection: (section) => void,
}

Custom Hooks

• useAuth() - Access authentication context
• useToast() - Show notifications (success, error, warning, info)
• useDashboard() - Access dashboard state
• useLocalStorage(key, defaultValue) - Persistent component state

Security

Input Validation & Sanitization (src/utils/security.js)

• DOMPurify integration for XSS prevention
• Input length limiting
• HTML content sanitization
• Case ID and username validation

Role-Based Access Control (src/utils/permissions.js)

// Check if user can perform action
canPerformAction(userRole, 'ban:user')

// Get all actions for a role
getActionsForRole('MODERATOR')

// Check role hierarchy
isAdmin(role)
outranks(userRole, targetRole)

API Client (src/utils/api.js)

• Automatic token injection
• CSRF token support
• Request timeout handling
• 401 error handling for re-authentication
• Built-in error messages

Constants

Navigation Structure (src/constants/navTree.js)

Defines sidebar navigation hierarchy with icons and page IDs

Mock Data (src/mock/data.js)

Development data for:

• Text queue cases
• Media queue items
• Age-sensitive content
• Flagged users
• Automated actions
• Dismissed reports
• Audit logs
• Performance metrics

🔐 Security Features

✅ Input Validation

• Validate case IDs, usernames, emails
• Reject special characters
• Length limiting and trimming

✅ Content Sanitization

• DOMPurify integration
• HTML escaping
• Safe DOM rendering

✅ Authentication & Authorization

• Role-based access control (3 roles)
• Conditional component rendering
• Protected routes

✅ API Security

• JWT token injection ready
• CSRF token support
• Secure fetch wrapper
• Automatic error handling

✅ Audit Logging

• Complete action audit trail
• Moderator tracking
• Timestamp logging

🎨 Styling

Built with Tailwind CSS for utility-first styling:

• Dark theme with custom color palette
• Responsive design (mobile-first)
• Smooth animations with Framer Motion
• Premium, professional appearance

📦 Dependencies

Core dependencies:

• React 18.3.0 - UI library
• React Router 6.20.0 - Client-side routing
• Framer Motion 10.16.0 - Animation library
• Tailwind CSS 3.3.0 - Utility-first CSS
• DOMPurify 3.0.0 - XSS prevention
• Prop Types 15.8.1 - Runtime type checking

Dev dependencies:

• Vite 5.0.0 - Build tool
• @vitejs/plugin-react - React support for Vite

🔄 Routing

/                 → Landing page (public)
/dashboard        → Main moderation dashboard (protected)
/dashboard/...    → Various moderation pages

🚀 Backend Integration (Next Steps)

To connect to a real backend:

1. Update API Client (src/utils/api.js)

   • Change API_BASE to your backend URL
   • Implement token refresh logic

2. Replace Mock Data

   • Update data fetching in components
   • Call API endpoints instead of mock data

3. Implement Authentication

   • Connect login endpoint
   • Store JWT in secure cookie
   • Handle token refresh

4. Enable WebSockets

   • Real-time case updates
   • Live notifications
   • Chat/comment feeds

📊 Key Features Overview

Text Queue

• Review flagged text content
• See AI confidence scores and severity ratings
• Expand rows to view full content and moderator actions
• Lock rows to prevent accidental clicks

Media Queue

• Review flagged images
• See CSAM risk assessments
• Quick approve/remove/escalate actions

User Moderation

• Review flagged user accounts
• See report counts and violation patterns
• Quick ban actions

Audit Logs

• Complete history of all moderation actions
• Filter by action type, moderator, date
• Compliance and review purposes

Analytics

• System metrics and violation distribution
• Moderator performance tracking
• Trend analysis

Policy Management

• Define and manage moderation policies
• Set confidence/severity thresholds
• Escalation rules

🎯 Performance

• Fast Development: Vite's instant HMR
• Optimized Production Build: Tree-shaking, minification
• Code Splitting: Lazy-loaded routes
• Animation Performance: GPU-accelerated with Framer Motion
• Responsive: Mobile-first, optimized for all devices

🧪 Development Tips

Adding a New Page Component

1. Create component in appropriate folder
2. Add to navTree.js if it's a navigation item
3. Map to page in Dashboard pageMap
4. Use hooks for state management

Adding Security Rules

1. Update src/utils/permissions.js with new action
2. Add permission check to actionPermissions object
3. Use canPerformAction() in components

Adding UI Components

1. Create in src/components/common/
2. Add PropTypes for type checking
3. Use as building blocks in page components

📝 License

Proprietary - GuardLayer Platform

🤝 Support

For issues, feature requests, or questions, contact: support@guardlayer.com