How to create admin panel in a minutes

Question

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:

Login using adminforth as both username and password.

⚠️ 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.

I’m looking forward to your reactions!

Comments

Super helpful walkthrough — really appreciate the clear steps and code examples! Just curious, how well does AdminForth handle larger datasets or complex relationships between tables? Would love to hear your thoughts or see a follow-up on that!

---

Thanks, for larger datasets - no issue while you have indexes in tables. AdminForth does very simple and straightforward SELECT OFFSET LIMIT ORDER for rendering lists and filters so if you ensure that the indexes exist for such queries, it will be ultrafast (as any database).

complex relationships

Nice question, now it has foreighnKey setting in column which allows to implement references from one model to another. This already fits with many-to-one and one-to-one. M2M - not yet directly, but with intermediate resource it will work

---

Great post! Followed the steps with SQLite and added the car table — everything worked like a charm. Really appreciate how extendable AdminForth is. Would love to see more on features like password reset and audit logs!