⚡️⚡️New open source solution for admin panel development

Given:

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.

Question:

How to automate this process?

Solution:

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.

The solutions we focused on here. We used them for inspiration.

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.

Examples

https://www.lightningdesignsystem.com/
https://developer.microsoft.com/en-us/fluentui#/controls
https://design.fusionfabric.cloud/foundations - their huge number of design systems

We found the most similar solution in the segment we need, and it was https://marmelab.com/react-admin/.

It has a huge functionality. But for us it is partly a problem, because onboarding takes a lot of time. Well, and a very mediocre appearance. Nevertheless, it was our main competitor.

For our first admin panel we took a set of ready-made components - https://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:

1. The admin panel was heavily tied to php. We wanted to be able to use it for projects in other languages.
2. To develop the frontend as well, we needed to raise the whole infrastructure: frontend of the admin panel, backend, database.
3. 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 code generator 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