AdminX

The VS Code of Admin Panels
A configuration-based, extensible admin panel framework with a plugin architecture.

Features • Quick Start • Architecture • Extensions • Documentation • Contributing

---

The Problem

Every company needs an admin panel to visualize and operate on data. While tools like Metabase, Apache Superset, and Power BI exist for data analytics, there's no equivalent for admin panels - a truly extensible, enterprise-ready solution that:

• Keeps your data in YOUR database (data sovereignty)
• Allows swapping vendors without code changes (vendor agnostic)
• Provides a rich extension marketplace like VS Code
• Is configuration-based, not code-heavy

AdminX solves this.

Features

• Extension Marketplace - Install extensions like VS Code. Auth, analytics, payments, logging - everything is just one click away.

• Data Sovereignty - Your data stays in your database. No third-party storage, no vendor lock-in. Point AdminX at Postgres, MySQL, or your Prisma schema.

• Vendor Agnostic - Switch providers without code changes. Mixpanel to Amplitude? PostHog to Google Analytics? Just swap the extension.

• TypeScript First - Type-safe APIs, autocomplete everywhere, catch errors before runtime.

• Blazing Fast - Built on Vite for the frontend with instant HMR, lazy loading, and optimized bundles.

• Configuration-Based - Define your admin panel through configuration, not boilerplate code.

Quick Start

# Clone the repository
git clone https://github.com/BetaVersion-IO/AdminX.git
cd AdminX

# Install dependencies
pnpm install

# Start the development server
pnpm dev

Architecture

AdminX is built as a Turborepo monorepo with the following structure:

AdminX/
├── AdminX/                 # Core admin panel application
│   ├── apps/
│   │   ├── web/           # React + Vite frontend
│   │   └── api/           # NestJS backend
│   ├── packages/
│   │   ├── core/          # Core functionality
│   │   ├── ui/            # Shared UI components
│   │   ├── config/        # Configuration schemas
│   │   └── extensions/    # Extension system
│   └── turbo.json
│
└── website/               # Marketing website (Next.js)
    ├── src/
    │   ├── app/           # Next.js app router
    │   └── components/    # Landing page components
    └── package.json

Tech Stack

Layer	Technology
Frontend	React 19 + Vite + TypeScript
Backend	NestJS + TypeScript
Styling	Tailwind CSS
Database	Postgres, MySQL (via Prisma)
Monorepo	Turborepo
Package Manager	pnpm

Extensions

AdminX follows a VS Code-like extension model. Extensions are self-contained modules that plug into the core system.

Available Extension Categories

Category	Examples
Authentication	OTP, SSO, RBAC, OAuth providers
Analytics	Mixpanel, PostHog, Amplitude, Google Analytics
Payments	Stripe, LemonSqueezy, Razorpay
Logging	Winston, Pino, custom loggers
Database	Additional database adapters
UI Themes	Dark mode, custom themes

Creating an Extension

import { defineExtension } from "adminx";

export const payments = defineExtension({
  name: "stripe-payments",
  provider: "stripe",
  region: "eu-west-1",
  features: ["billing", "refunds", "webhooks"],
});

Extension Marketplace (Coming Soon)

• Free and paid extensions
• Community-contributed extensions
• Enterprise extensions with premium support

Configuration

AdminX is entirely configuration-driven:

// adminx.config.ts
import { defineConfig } from "adminx";

export default defineConfig({
  database: {
    provider: "postgresql",
    url: process.env.DATABASE_URL,
  },
  extensions: [
    "@adminx/auth-rbac",
    "@adminx/analytics-mixpanel",
    "@adminx/payments-stripe",
  ],
  theme: {
    mode: "dark",
    primaryColor: "#2C6DFF",
  },
});

Documentation

Detailed documentation is available in the docs/ folder:

• Getting Started
• Architecture
• Extensions
• Configuration
• API Reference

Workflow

1. Connect your database - Point AdminX at Postgres, MySQL, or your Prisma schema. No data leaves your infra.

2. Install extensions - Pick auth, analytics, payments, logging - drop them in like VS Code extensions.

3. Ship the UI - Use ready-made building blocks and theming tokens to ship a polished admin in hours.

Website Development

This directory contains the marketing website for AdminX, built with Next.js 16.

# Navigate to website directory
cd website

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Build for production
pnpm build

Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Security

For security concerns, please see our Security Policy.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with care by BetaVersion.IO