How to create admin panel in a minutes

Wed, 14 May 2025 20:48:42 +0000

I will show you how to easily create an extendable admin panel using the open-source (and free!) AdminForth framework. The setup process is incredibly simple and takes just a few minutes.

Requirements

All you need is Node.js version 20 or later installed.

Let's get started

Run:

npx adminforth create-app

This will launch a small utility that will ask you to name your project.
Then, it will prompt you for your database URL in the field "Please specify the database URL to use >".

You can use SQLite, Postgres, MySQL, MongoDB, or ClickHouse URLs.
For testing purposes, we recommend SQLite, as it doesn't require a daemon and works out of the box.

Once the app is created, you should see:

Next steps: prepare and run the app

Run the suggested commands:

cd adminforth-app
npm run makemigration -- --name init && npm run migrate:local
npm run dev

That's it! Open http://localhost:3500/ in your browser and you should see:

⚠️ In production, be sure to change the password for this user via the admin panel.

You will now see a list of admin users:

Try adding a user, and you can also test logging in with that user from an incognito window.
Feel free to play around — try filters, navigation, and more.

How to add a table to AdminForth Admin?

Now comes the most exciting part.
By now, Prisma has generated a migration for the initial adminuser table. But what if you want to manage additional tables from your existing database or add new ones? Let's do that.

Let's add a new table to our SQLite database. Open your project in VS Code / Cursor:

code .

Now, add the following code to your Prisma schema:

model car {
  id            String   @id
  title         String
  max_speed     Int
  preview       String?   
  price         Decimal
  currency      String
}

Create and apply the migration:

npm run makemigration -- --name add_car_model && npm run migrate:local

AdminForth is migration-agnostic — it never manages your database schema itself and can work with any database structure.
For quick-start and testing purposes, the app created via adminforth create-app bundles Prisma, which we used here for our SQLite schema.
However, you're free to use any migration tool for your database. All AdminForth needs to know is the table and field names for the next step.

Define the resource

Create a new resource file in the resources folder named car.ts:

import { AdminForthDataTypes, AdminForthResourceInput } from "adminforth";
import { randomUUID } from "crypto";


export default {
  table: "car",
  resourceId: "car",
  dataSource: "maindb",
  columns: [
    {
      name: "id",
      fillOnCreate: () => randomUUID(),  // generate a random UUID when creating a new record in admin
      showIn: {
        create: false,
        list: false,
      }
    },
    {
      name: "title",
      type: AdminForthDataTypes.STRING, // enforce STRING type (SQLite supports only TEXT, this ensures single-line input)
    },
    {
      name: "max_speed",
      inputSuffix: "km/h", // add a suffix in create/edit forms
    },
    {
      name: "preview",
    },
    {
      name: "price",
    },
    {
      name: "currency",
      enum: [  // define an enumeration — AdminForth will automatically create a dropdown
        {
          label: "Bitcoin",
          value: "BTC",
        },
        {
          label: "Tether",
          value: "USDT",
        },
      ]
    }
  ]
} as AdminForthResourceInput;

Now import this resource into index.ts:

import carsResource from "./resources/car.js";

And add it to the resources list so AdminForth will know about it:

  resources: [
    usersResource,
    carsResource, // added here
  ],

Finally, let's add a menu item so you can access the resource from the UI:

  menu: [
    { type: 'heading', label: 'SYSTEM' },
    {
      label: 'Users',
      icon: 'flowbite:user-solid',
      resourceId: 'adminuser'
    },
    // added this
    {
      label: 'Cars',
      icon: 'fa6-solid:car-side',
      resourceId: 'car'
    }
  ],

And you're done!

Play around by adding your favorite cars and try filtering them.
That's it for today! If you enjoyed this, feel free to leave a comment or reaction.
Let me know if you'd like me to create more posts about extending and scaling your admin panel, adding powerful features like audit logs, file uploads, Google login, password reset, CSV import/export, and much more.