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: Keep your app running smoothly with tasks that involve human input
- Firefighting: Manually fix unintended problems that occur in your app
- Monitoring: Track your app’s metrics
There are a few off-the-shelf options for building admin interfaces:
- Database GUI clients
- Frontend admin libraries
- Backend admin frameworks
- Third-party admin tools
They’re all good at different things and in different contexts. Let’s take a look at how you can decide between them:
Database graphic user interface (GUI) clients are spreadsheet interfaces on top of your database that let you perform CRUD operations easily. They aren’t really “admin interfaces,” but they do the job if all you want is raw database access.'
Free: Postico (PostgreSQL), Sequel Pro (MySQL)
Paid: TablePlus
Database clients are good for firefighting — They give you complete control over your data. If you’re scaling this client out to your team, however, 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 tables accidentally, etc.
Database clients are bad for housekeeping — Database client UIs aren’t optimized for data entry, so doing data entry regularly will be unpleasant. There’s also no easy 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 queries manually and visualize the results elsewhere.
Database clients are impossible to extend — Extending database clients beyond the standard CRUD use case is almost impossible, natively, 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
We've covered the best GUIs for a few sources in more detail: PostgreSQL, GraphQL, and MongoDB.
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 they don’t include 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 trendy template that comes with three icon sets.
Frontend templates, unlike database GUI clients, aren’t good for firefighting, but again, unlike database GUI clients, they’re good at other tasks, like housekeeping.
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 aren’t good 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 set up and connect to — 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 reduces 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.
One more thing to mention: as React has started to blur the lines of frontend data flow, admin panel frameworks like react-admin have emerged to help build more fully-featured admin panels. React-admin isn't quite a template –– it goes way beyond pure HTML/CSS and helps with connecting data, optimizing rendering, etc. But it also isn’t quite a backend framework.
If you want to learn more, we wrote a walkthrough for building a basic admin panel with react-admin: Building an admin console in react-admin.
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.
Backend admin libraries come with a lot of pros, but like database GUI clients, they’re hard to extend. They are, however, good for firefighting, housekeeping, and monitoring.
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 an unfamiliar language.
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.
Build vs. buy is the core dilemma facing all software projects, but the question is especially important for internal tool development.
Navigating the trade-off between flexibility and cost is hard. It’s made harder because the cost of software projects is difficult to pin down. Costs include:
- Engineering resource required to build the software
- Engineering resource required to maintain the software
- Risk of something going wrong (e.g., bugs) with the software
The ideal admin panel solution would be flexible enough to fit your use case and require minimal engineering time to build and maintain. Here comes the pitch…
Retool has all the benefits of using a frontend 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 engineers need flexibility to customize admin panels by writing code. 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
fetchcall - set the
isFetchingboolean 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 and 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 say it should 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 new user accounts:
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 data sources and query APIs via SQL.
Every month, Retool gets better. We’re constantly adding features and integrations that reduce the amount of work it takes to build internal tools.
Retool is great for housekeeping — Retool frontend components make basic CRUD operations easy to do. For more complicated workflows, you can combine 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 up queries to extract your metrics in real-time, and you can feed 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 a customer’s ID before sending out their card), you can build it in Retool in minutes, as opposed to days.
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.
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.
Reader
