Welcome to Admin-Bro: Efficient Admin Panel Development

Admin-Bro is an open-source, auto-generated admin panel suitable for a variety of applications, including Express, React, and more. It allows you to manage your application’s data effectively while ensuring an easy-to-use interface for administrators.

Setting Up Admin-Bro

To integrate Admin-Bro with your application, you need to install the necessary packages and set up a few configurations. Below is an example of a quick setup with Express:

  const AdminBro = require('admin-bro');
  const AdminBroExpress = require('@admin-bro/express');
  const express = require('express');
  const app = express();
  
  const adminBro = new AdminBro({
    databases: [],
    rootPath: '/admin',
  });

  const router = AdminBroExpress.buildRouter(adminBro);
  app.use(adminBro.options.rootPath, router);

  app.listen(3000, () => console.log('Server started on port 3000'));

Admin-Bro API Examples

Adding Resources

Add resources to enable CRUD operations on any part of your data.

  const User = require('./models/user');
  
  const adminBro = new AdminBro({
    resources: [
      { resource: User, options: { /* customizations */ } },
    ],
    rootPath: '/admin',
  });

Customizing Resources

Customize how resources are presented and interacted with in the admin panel.

  {
    resource: User,
    options: {
      properties: {
        encryptedPassword: { isVisible: false },
        login: { isTitle: true },
      },
      actions: {
        new: { isAccessible: false },
      },
    },
  }

Using Bundled Components

You can use pre-built or custom components for different actions within your admin panel.

  const { ComponentLoader } = AdminBro;
  
  const componentLoader = new ComponentLoader();
  componentLoader.add('Dashboard', './path-to-component');
  
  const adminBro = new AdminBro({
    componentLoader,
  });

Full Example: Admin Panel for an E-commerce App

Below is a complete example demonstrating a fully-functional admin panel for an e-commerce app:

  const AdminBro = require('admin-bro');
  const AdminBroExpress = require('@admin-bro/express');
  const express = require('express');
  const app = express();

  const User = require('./models/user');
  const Product = require('./models/product');
  
  const adminBro = new AdminBro({
    resources: [
      { resource: User, options: { /* customizations */ } },
      { resource: Product, options: { /* customizations */ } },
    ],
    rootPath: '/admin',
  });

  const router = AdminBroExpress.buildRouter(adminBro);
  app.use(adminBro.options.rootPath, router);

  app.listen(3000, () => console.log('Server started on port 3000'));

Admin-Bro simplifies the creation of powerful and customizable admin panels, making it an excellent choice for a variety of applications. Start implementing it in your projects today!

Hash: 54585e158ad3cffe5b07706c09c199a631a030c0daf8bce2c9124cc35abfbedf