The story of how we created Admiral

We are an outsourcing company and often start new projects. We don't work with ready-made CMS, everything is from scratch. Every time we have to create a control panel. In 90% of cases it's the same type of tables and forms, in the other 10% there are complex tasks that need to be implemented in the control panel.

How to automate this process?

Looking for an existing admin panel creation solution that will meet our requirements:

• quickly generated CRUD
• beautiful interface
• can be styled for each project
• custom interfaces can be created
• it doesn't matter what the backend is based on (from here it turned out to be a REST application, we narrowed it down to React as a framework).

We started trying different solutions, three times we tried to create something of our own. Each time we failed because we realized that we were wrong somewhere.

We explored existing admin panel solutions to take the best from them and see how we would be different. To do this, we asked our audience what they use.

We've had time to poke at various off-the-shelf solutions that we've been advised. They're good, but:

• They are created specifically for some frameworks / languages like laravel, node.js
• They can only generate CRUDs with a rigidly defined structure, where you can't implement or customize anything of your own.
• They can't be styled.

• Backpack. Not a very pretty solution in our opinion. And the promo page has nice screenshots, not the demo "well such".

• RCHID. Not particularly functional, but neatly done

• Nova. They have a beautiful, but rigidly set structure, you can not create custom interfaces, stylize them. Just do CRUD and that's it. And it's paid
Analog to Nova, with essentially the same problems.

• AdminJS. Nice promo, and the demo is way behind

•Pocketbase. Similarly, it's an entity builder with an interface and API

• Directus. This is a backend builder.

• Filamentphp. It is purely for php, you can't customize styles, you can't create your own interfaces. It is possible to create only tables and forms by template, and we remember that we want flexibility, independence from the language and the ability to create their own interfaces and customize them

• Flatlogic. This is also more of a backend builder.

• Refine

• Marmelab is probably the best solution that is currently on the market, they have been developing for a long time, they are our favorite. To the disadvantages we considered the following points: quite an old project, and somewhere the technology is already outdated, unsympathetic interface, old UI libraries. Huge documentation, it’s simply to create CRUD but hard to work without immersion.

There were also independent, big, cool solutions, like Strapi. But this is about something else. It's not just about the administration panel, it's about the whole ecosystem, so we didn't dwell on them.

We also studied a lot of UI libraries, which represent just a simple UI, but all the logic for generating CRUD and authorization in the admin panel you have to write yourself.

After all this there is only one conclusion: we need to do it ourselves.

For our first admin panel we took a set of ready-made components - tabler.io. The admin panel itself was a mixture of css, js, jquery and html, broken down into blade components. For example, there were ready-made layouts, form pages, etc. This is what a typical page with a form to edit an entity looked like

But, of course, it was possible to make more custom pages.

Over time we started to use the SPA approach for our sites more and more often, and we wanted to implement the same approach in the admin panel, because it was inconvenient to work with blade templates. Especially when the task went beyond the ready-made components. We paid attention to laravel nova. We liked their approach, and we began to adapt it to our projects.

To start with, we used the same tabler, but we used components that were written in React. It worked pretty well, but still didn't have enough components at that time.

We started looking for an alternative and we found it – ant.design. Taking its components, we started to create the admin panel of our dreams. Gradually more and more components appeared, our backend was pumping.

Here's how it looks like now:

Creating typical CRUDs has become much more convenient and faster. Thanks to the responsive front end, it became easier to create custom pages.

But...this approach wasn't perfect either. And here's why:

• The admin panel was heavily tied to php. We wanted to be able to use it for projects in other languages.
• To develop the frontend as well, we needed to raise the whole infrastructure: frontend of the admin panel, backend, database.
• Difficulty of developing custom pages, as it required very tight work of backend and frontend developers. The structure of json, which came from the backend, was extremely complex, there were problems with its modification.

The solution to all these problems and the next step was the separation of the admin area into a completely separate application. Now the admin panel is the same SPA-application, which works on REST api, with a clear contract.

Now the admin panel is not tied to language, on the backend - we used both php and golang. A simple typical CRUD is still as easy to create, backend developers handle this. Custom pages are created by the frontend, for this he does not need to raise the backend. Thanks to a simple api, it is easy to mock and add new requirements.

As a result, the work is based on the following principle: the frontend does its task, sets the requirements to the api, and the backend developer only has to implement it. So far, this approach has proven to be extremely flexible. And to simplify routine tasks, we use codegenerator teams.

We started development in April 2022. At first, the backlog was formed from tasks that were solved on one commercial project. At the time of the test release in June 2023, the labor for the project called Admiral amounted to 700 hours. To date, we have already rolled out this solution on approx.

Initially we had only one developer doing a commercial project and working full-time on this solution. At this point, almost all fronts in our company are counter-balancing into the project. We're trying to make sure everyone has a great ownership of the project. But we'll see how it goes, what the funding will be. Maybe in the future we will dedicate a team to this project only.

By the way, you can find what we've done here.

We wanted a fast, beautiful and custom solution. And we got it. To prove our words, we decided to show how you can create CRUD in 5 minutes. Read the instructions here.

Also, we shared small tricks on how to create a menu in the control panel that will be generated depending on the user's role. This is quite a popular use case. So, read here.

Moreover, using Editor JS as an example, we showed how to connect an editor to a project created in Admiral easily and quickly. This is a block editor with universal JSON output, the parsing of which is easy to customize to your taste. Visit our article here.

To date, Admiral has over 4,000 downloads and has already crossed the 100 star mark. We get cool feedback from developers who use our solution. Clients, in whose projects we have used Admiral, are also happy with the results. Several people have recently started to counter-buy our solution. All this together proves that we are on the right track. So don't pass Admiral by! Use it and share feedback.