A universal admin panel for Node.js apps just got version 2.0

One year ago, at SoftwareBrothers , we started developing AdminBro — a universal admin panel for Node.js apps.

Our goal was to build a tool which will allow javascript developers around the world to add advanced, beautiful and full-featured admin panels to their apps in a few minutes.

Thus, we hoped that this tool would dramatically increase the adoption of Node.js, especially in the startup world.

Since then AdminBro has become quite popular and today we are happy to announce the release of long-awaited version two-point-O which looks like this:

What you can find in version 2.0

Design System — build your custom features with ease now

Now the entire User Interface of the admin panel and the components behind it follow the Atomic Design principles .

Long story short, you can now reuse all of the AdminBro UI components, which have been divided into 2 major groups: Atoms (like Badge , Button , Icon etc.) and Molecules (like DatePicker , DropZone , Pagination etc.).

The core of the Design System is the Theme object . With the help of styled-components and styled-system you can now build complicated components with a responsive layout easily

Let me give you a couple of examples:

<Button>Click me</Button><Button size="icon" variant="primary" rounded>
    <Icon icon="Save" />
</Button>

gives

<Box boxShadow="card" padding="xl">
    <H4>Card Title</H4>
    <Text>This is text below the title</Text>
</Box>

gives

All of the components can be found in our documentation . Make sure to check them out.

React Hooks and Smart Components

Design System components are not the only frontend update we made. Now you can reuse our Smart Components and React Hooks and build your entire application layer fast.

So let’s say you would like to build a custom form which creates new users in the system.

Now you can use useRecord hook with BasePropertyComponent to do that.

BasePropertyComponent will render all your fields like username, email etc. (whatever you want) where useRecord will send the data to the AdminBro backend and save/update the record. In case of any validation errors, they will be printed by BasePropertyComponent.

And everything without writing a single line of code on the backend.

Take a look at the example on the Documentation to see how that might work.

I18n

Since more non-English speaking people are using AdminBro, we added I18n support.

With the help of TranslateFunctions (accessible on both frontend and the backend), you can now translate an entire app to your language.

I18n also gives you the ability to change any arbitrary text in the UI.

Take a look at the documentation of the Locale file here and our default English translations

Firebase support

Along the way, we launched a separate plugin which allows you to run AdminBro instances on Firebase Cloud Functions . We hope that this will make AdminBro ideal choice for startups when costs and time of delivery are crucial.

Some other stuff

Since we rewrote the entire frontend — we added some tiny tweaks to the UI. Take a look at the example application to see how it looks right now.

What’s next

We also cleaned the Issue page on AdminBro GitHub repository and added some amazing new features. If you like the idea of AdminBro — an automated admin interface for Node.js apps — try it in your project and don’t forget to start the repo .