Admin Dashboard Overview

The DeesseJS Admin Dashboard is a powerful, intuitive interface for managing your content, users, and application settings. Accessible at /admin/[...slug], it provides a centralized hub for all administrative operations.

Key Features

Content Management

• Collection Management: View, create, edit, and delete content across all your collections
• Media Library: Upload, organize, and manage images, videos, and files
• Bulk Operations: Perform actions on multiple items at once
• Draft System: Save work in progress and publish when ready

Plugin Marketplace

• Browse Plugins: Discover and install plugins from the official marketplace
• One-Click Installation: Install plugins directly from the dashboard
• Plugin Management: Enable, disable, configure, and remove plugins
• Plugin Reviews: See ratings and reviews from other users

User Management

• User Accounts: Manage user roles and permissions
• Authentication: Built-in auth system with secure login
• Team Collaboration: Multiple users with role-based access control

System Configuration

• Settings: Configure application-wide settings
• API Keys: Generate and manage API tokens
• Logs: View system logs and error reports

Accessing the Dashboard

The admin dashboard is accessible via the /admin/[...slug] route in your Next.js application.

# Development
http://localhost:3000/admin

# Production
https://yourdomain.com/admin

Dashboard Layout

Sidebar Navigation

The left sidebar provides quick access to all major sections:

• Collections: Quick access to all your content collections
• Media: File and media management
• Marketplace: Plugin marketplace
• Users: User management
• Settings: Application configuration

Main Content Area

The main area displays the content for the selected section, with:

• Data tables with sorting and filtering
• Inline editing capabilities
• Bulk action toolbar
• Pagination controls

Top Bar

The top bar contains:

• Search: Global search across all content
• User Menu: Profile settings and logout
• Notifications: System notifications and alerts
• View Site: Quick link to view your live site

Authentication & Authorization

Default Admin User

When you create a new DeesseJS project, you're prompted to create the first admin user:

npx create-deesse-app my-app

# During setup:
? Create first admin user
? Admin email: admin@example.com
? Admin password: ********
? Confirm password: ********

✓ Admin user created successfully

Role-Based Access Control

DeesseJS includes built-in roles:

• Admin: Full access to all features
• Editor: Can create and edit content, but cannot change settings
• Author: Can create and edit own content
• Viewer: Read-only access to content

Plugin Marketplace

The built-in plugin marketplace allows you to discover and install plugins without leaving the dashboard.

Accessing the Marketplace

Navigate to Marketplace in the sidebar or go to /admin/marketplace

Marketplace Features

• Categories: Browse plugins by category (SEO, Analytics, Integrations, etc.)
• Search: Search for plugins by name, keywords, or functionality
• Ratings: See community ratings and reviews
• Screenshots: View plugin screenshots and demos
• One-Click Install: Install plugins with a single click
• Version Info: See compatible versions and changelogs

Installing from Marketplace

1. Navigate to Marketplace in the sidebar
2. Browse or search for a plugin
3. Click Install Plugin
4. Configure plugin options if needed
5. Plugin is automatically installed and enabled

# Installation happens automatically via the dashboard
# Equivalent CLI command:
npx deessejs plugin add @deessejs/plugin-seo

Managing Installed Plugins

Navigate to Settings > Plugins to manage installed plugins:

• Enable/Disable: Toggle plugins on or off
• Configure: Access plugin configuration
• View Logs: See plugin activity logs
• Uninstall: Remove plugins from your project

Settings

The Settings page provides a centralized location for configuring all aspects of your DeesseJS application.

Accessing Settings

Navigate to Settings in the sidebar or go to /admin/settings

Settings Sections

General Settings

• Site Name: Your application name
• Site URL: Your application URL
• Site Description: Meta description for SEO
• Timezone: Set your application timezone
• Language: Default language for the dashboard

Appearance

• Theme: Light, dark, or system theme
• Brand Colors: Customize dashboard colors
• Logo: Upload your logo
• Favicon: Upload your favicon

Extensions Configuration

Configure installed extensions:

// Cache settings
{
  "cache": {
    "provider": "redis",
    "ttl": 3600,
    "prefix": "deesse:"
  }
}

// Logger settings
{
  "logger": {
    "level": "info",
    "destination": "file"
  }
}

Plugin Settings

Each plugin can have its own settings section:

// Example: SEO plugin settings
{
  "seo": {
    "defaultTitle": "My Site",
    "defaultDescription": "My awesome site",
    "ogImage": "/images/og-default.jpg",
    "twitterCard": "summary_large_image"
  }
}

API Keys

Generate and manage API keys for external integrations:

• Create Key: Generate new API keys
• Revoke Key: Disable compromised keys
• View Usage: See key usage statistics
• Key Types: Different keys for different purposes

Customization

Branding

Customize the dashboard appearance:

// deesse.config.ts
export const config = defineConfig({
  admin: {
    branding: {
      title: 'My App Admin',
      logo: '/logo.png',
      favicon: '/favicon.ico',
      theme: 'dark', // or 'light' or 'system'
    },
  },
})

Custom Pages

Plugins can add custom pages to the dashboard:

// A plugin adds an analytics page
export const analyticsPlugin = definePlugin({
  name: 'analytics-plugin',

  activate(options, { extensions }) {
    return {
      admin: {
        pages: [
          {
            id: 'analytics',
            title: 'Analytics',
            path: '/analytics',
            component: './pages/AnalyticsPage',
            icon: 'BarChart',
            permissions: ['analytics:view'],
          },
        ],
      },
    }
  },
})

The page automatically appears in the sidebar navigation.

Dashboard Widgets

Plugins can add widgets to the dashboard home:

export const statsPlugin = definePlugin({
  name: 'stats-plugin',

  activate(options, { extensions }) {
    return {
      admin: {
        widgets: [
          {
            id: 'stats',
            component: './widgets/StatsWidget',
            position: 'top',
            size: 'large',
          },
        ],
      },
    }
  },
})

Performance

The admin dashboard is optimized for performance:

• Server-Side Rendering: Fast initial load times
• Incremental Loading: Data loads as needed
• Caching: Intelligent caching of frequently accessed data
• Optimistic UI: Instant feedback on user actions

Security

Built-in Security Features

• CSRF Protection: Cross-site request forgery protection
• XSS Prevention: Input sanitization and output encoding
• Rate Limiting: Protection against brute force attacks
• Secure Headers: Security-focused HTTP headers
• Audit Logs: Track all administrative actions

Best Practices

1. Use HTTPS: Always serve the admin dashboard over HTTPS
2. Strong Passwords: Enforce strong password policies
3. Two-Factor Auth: Enable 2FA for enhanced security
4. Regular Updates: Keep DeesseJS updated with security patches
5. Backup: Regular database backups

Next Steps

• Learn about the Plugin Marketplace
• Explore Settings
• Understand Content Management