Admin Panel Roundup

Note: this was originally published on the Retool blog.

Let’s say you need to moderate content on your platform, delete somebody’s account, or find out which of your users are most active. An admin panel is where you’d do it!

They’re good for a few things:

• Housekeeping — keeping your app running smoothly with tasks involving human input.
• Fire fighting — manually fixing unintended problems that occur in your app.
• Monitoring — tracking your app’s metrics.

There are a few off the shelf options for building admin interfaces:

1. Database GUI Clients
2. Frontend admin libraries
3. Backend admin frameworks
4. 3rd-party admin tools

They’re all good at specific things. Let’s see how you can decide between them.

Database GUI Clients

Database clients are just spreadsheet-like interfaces on top of your database that let you perform CRUD operations easily. They aren’t really an “admin panel”, but they do the job if all you want is raw database access. Here are our recommendations:

SQL:

• Free: Postico (PostgreSQL), Sequel Pro (MySQL)
• Paid: DataGrip

mongoDB:

• Free: Robo 3T
• Paid: Studio 3T

Database clients are good for firefighting. They give you complete control over your data, so you can do whatever it takes to fix problems. This is a double-edged sword though — you might accidentally break something in the process. And if you’re scaling this out to your team, you probably don’t want everybody to have raw SQL access to your database. They could insert data that bypasses your app’s validations, delete rows accidentally, etc.

Database clients are bad for housekeeping. Their UIs aren’t optimized for data entry, so doing it regularly will be unpleasant. There’s also no way to automate common workflows — you won’t be able to, say, approve a new comment on your blog in one click.

Database clients are bad for monitoring. At a stretch, you might be able to save queries that output your key metrics, but you’ll have to run these manually and visualize the results elsewhere.

Database clients are impossible to extend. Extending them beyond the standard CRUD use case is impossible, and involves building ETL pipelines to get the data out.

A database client makes a good admin panel if

• Your project will be used infrequently
• You don’t need to monitor your project’s usage and metrics
• Your project will only be used by people who are technical

Frontend Admin Templates

There are lots of templates and libraries out there that provide frontend components and layouts that you can use to build admin panels. You can find templates for whichever frontend framework you use — Bootstrap, React, Angular, you name it.

You’ll have to write code to connect the frontend to your databases and APIs, but you’ll get a decent UX out-of-the-box without much CSS and JS fiddling.

There’s one big trap to watch out for with frontend templates — visuals.

When you’re choosing a library, the options will seem endless. Each will look better than the last. Progress bars, graphs, widgets — they’ll promise to turn your admin panel into NASA mission control. The truth is more mundane — you don’t need a progress bar, you might need a graph.

It’s important to optimize for utility over visuals. Your frontend admin template should work with the technologies you already use (even if it’s not the hottest JS framework), and should be easy to maintain and extend as your app evolves. Choose the boring template that does the job over the trending template that comes with 3 icon sets.

Frontend templates are great for housekeeping. They provide a good UX for data entry and editing (including data validation), and you can hook them up to trigger custom workflows.

Frontend templates are great for monitoring. You can set them up to display metrics for your business, easily visualized in charts.

Frontend templates are okay for firefighting. You can set them up to give you a lot of control in editing data, but they won’t be as flexible as a database client and you may face novel problems that require manually digging into the database to solve.

Frontend templates can be difficult to maintain and extend. Because these libraries only give you the components, you have to write custom code to put them together and connect them to your backend. Custom code has an up-front cost to write, and a continual cost to maintain.

Frontend libraries are a good option that reduce the amount of work it takes to build your own admin panel. They’re great once they’re set up, but it does take some work to get started and maintain.

Backend Admin Libraries

Popular backend frameworks have libraries that make it easy to build admin panels for your app. In some cases, they work like magic — they can generate an entire admin panel without any extra code. In other cases, you might have to write some backend code or combine them with a frontend library.

All libraries have a trade-off between automation and customizability. We recommend a bias towards automation — the less code you write, the smaller the surface area for errors.

Django — Django Admin

Django Admin is a no-brainer if you have a Django backend. It automatically generates an admin site for your app, letting you perform CRUD operations for your database models. It comes with user authentication and permissions out of the box, as well as an audit log of “recent actions” — useful if you have multiple admin users.

Django Admin is really extensible — you can customize it to do pretty much anything with code. The default UI it generates won’t be as “sexy” as some of the frontend admin libraries, but it’s usable and refreshingly simple.

Django Admin is much like a database GUI client, though, in the sense that it only supports CRUD out of the box. It comes with all the validations you have in your Django app, but no more. The main advantage is that you can write custom code to add validations. But once you start writing custom code, you’re basically building most of your admin panel from scratch again.

Django Admin starts slowing down when you have hundreds of thousands of objects with complex relations — the default implementation often generates inefficient SQL queries — but it’s otherwise highly praised and is one of Django’s most-loved features.

Ruby on Rails — Rails Admin

Rails Admin is Rails’ answer to Django Admin. It automatically generates an admin panel for your Rails app, saving you a lot of time. Other popular packages, notably Active Admin, are more easily customizable, but Rails Admin follows the framework’s mantra of “convention over configuration”.

Rails Admin has all the features you’d expect in an admin panel. It has a decent browser UI for basic CRUD operations (including form validation), components to filter and search your data, and user authentication and permissions. It also stores a full history of changes, on top of which you can get rollback functionality using separate gems.

Like Django Admin, Rails Admin starts you off in a good place, but is difficult to customize, since you’re forced to write custom code. For example, if you want to add a few buttons on your admin panel to call an API request, that’s 200 lines of code. Or if you want to login to RailsAdmin with Okta, you’ve got to write an integration yourself. And if you want to put in a Google Maps Address Autocomplete box, you’ll need to write custom code to integrate it.

Laravel — Nova

Laravel Nova is the framework’s official admin panel. Like Django Admin and Rails Admin, it takes little work to automatically generate a basic admin panel with Laravel Nova. Unlike the other backend admin panel options, Nova runs on a modern frontend — Vue.js — and looks nice.

As well as standard features offered by the other backend admin panels, metrics are a first-class citizen in Laravel Nova, with pre-built frontend widgets and query helpers to generate them. Its other notable features are “actions”, which let you you run PHP tasks on groups of resources, and “lenses”, which let you you easily slice your data into custom views.

Laravel Nova’s main downside is customization — you’ll have to write custom components to do even simple tasks, like adding multiple buttons above a table. And if you don’t know Vue.js… you’ll have to learn it!

Backend admin libraries are good for firefighting. They give you slightly less control than a database client, but often have safeguards that stop you from breaking things accidentally.

Backend admin libraries are good for housekeeping. The default data entry UX might not be as nice as frontend libraries, but you can always add these bells and whistles if they’re important.

Backend admin libraries are good for monitoring. Like frontend libraries, you can set them up to display your business metrics in any format you want.

Backend admin libraries are difficult to extend. Extending them beyond the standard CRUD use case involves writing significant code, sometimes in a language you’re not familiar with.

If you’re using a popular backend like Django, Rails, or Laravel, we recommend trying a compatible admin library, at least to begin with. After using it for a while, you’ll have a much clearer idea of what your admin workflow actually looks like. This will put you in a good position to decide whether you need something more custom.

3rd-party Admin Tools

Build vs buy.

This is the core dilemma facing all software projects, but internal tools especially so.

Navigating the tradeoff between flexibility and cost is hard. It’s made harder because the cost of software projects is difficult to pin down. It includes:

• Engineering resource required to build the software
• Engineering resource required to maintain the software
• Risk of something going wrong (bugs) with the software

The ideal admin panel solution would be flexible enough to fit your use-case, while requiring minimal engineering time to build and maintain.

Retool

Retool has all the benefits of using a front-end admin library, but is much faster to build with and much easier to maintain. It has a (growing) set of standard components — tables, text inputs, charts, etc. — that you can drag-and-drop to build your ideal admin UI.

The idea is that there are things that engineers write a lot of code for. For example, when you’re implementing a button that calls an API request in React + Redux, you’ll need to:

• write the actual API request with a fetch call
• set the isFetching boolean inside your Redux store in order to prevent the button from being pressed twice while the request is in flight. While you’re doing this, you probably also want to disable the button + add a loading indicator for it.
• populate the Redux store when the data is returned
• handle the error state and show a toast when the API request was successful

With Retool, though, you can just drag on a button, and tell it to fire your API call. You write the API call in a point and click interface, and Retool handles everything else for you (the debounce, the loading indicator, populating the variables, handling error states, etc.).

You can hook these components up to your own database and API to do anything from basic CRUD to complex workflows. Here’s a 3-minute demo of an admin-panel that you can build in Retool to approve payment withdrawals:

Retool integrates with your data wherever it’s stored. It connects to any database (SQL or NoSQL) or API (REST or GraphQL), and has native integrations that make it trivial to connect to 3rd-party tools like Google Sheets, Firebase, Slack, and more. You can join data from multiple datasources, and query APIs via SQL.

Retool is great for housekeeping. Its frontend components make basic CRUD operations easy to do, and for more complicated workflows, you can combine these components into custom interfaces. You can hook them up to database queries or API endpoints that do whatever housekeeping tasks you have.

Retool is great for monitoring. You can set queries up to extract your metrics in real-time, and you can feed your them into pre-built chart components for visualization.

Retool is good for firefighting. Building a new tool only takes a few minutes. It’s not as fast as a database client (where you modify the database directly), but it’s far more secure since you can build custom UIs for fighting specific fires, and dole out access to those who need it.

Retool is easy to extend. Because building tools in Retool is so easy (a typical one takes just a few minutes), it’s easy to build new tools on top of Retool. So if you need a tool specifically for managing a sign-up workflow (e.g. you’re a bank and need to approve their ID before sending our their card), you can build it in Retool in minutes, as opposed to days.

Conclusion

If your app is a small side project, just for personal use, or just for a handful of competent users, a good database GUI client is your best bet. It’ll take no time to set up, and will let you do anything you want.

If you’re already using a major backend framework (Django, Rails, or Laravel), you should try a compatible admin plugin (Django Admin, Rails Admin, or Laravel Nova). It’ll be quick to set up, and there’s a good chance it’ll solve your problems.

If you’re building something more than just a side project, and you have multiple custom tools you’re looking to build, you should try Retool. It’s as quick to get started as a backend admin plugin, flexible enough to fit all manner of use-cases, and easy to modify as your needs change and grow. Try it for free!

Only once you’ve exhausted all the options above should you use a frontend admin template. You’ll end up writing a lot of custom code, even to get simple CRUD functionality working. Make sure that the extra flexibility you get is worth the cost!