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 is where you’d do it! admin panel 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: GUI Clients Database Frontend admin libraries Backend admin frameworks 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: (PostgreSQL), (MySQL) Postico Sequel Pro Paid: DataGrip mongoDB: Free: Robo 3T Paid: Studio 3T 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 good for firefighting. 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 housekeeping. 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 bad for monitoring. Extending them beyond the standard CRUD use case is impossible, and involves building ETL pipelines to get the data out. Database clients are impossible to extend. 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 — , , , you name it. Bootstrap React Angular 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 . The truth is more mundane — you don’t need a progress bar, you need a graph. NASA mission control might 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. 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 housekeeping. You can set them up to display metrics for your business, easily visualized in charts. Frontend templates are great for monitoring. 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 are okay for firefighting. . 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 templates can be difficult to maintain and extend 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 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 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 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. starts slowing down Ruby on Rails — 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 , are more easily customizable, but Rails Admin follows the framework’s mantra of . Rails Admin Active Admin “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 , you’ll need to write custom code to integrate it. Google Maps Address Autocomplete box 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 — — and looks nice. Laravel Nova Vue.js 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! 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 firefighting. 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 housekeeping. Like frontend libraries, you can set them up to display your business metrics in any format you want. Backend admin libraries are good for monitoring. Extending them beyond the standard CRUD use case involves writing significant code, sometimes in a language you’re not familiar with. Backend admin libraries are difficult to extend. 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 call fetch set the 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. isFetching 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 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. native integrations 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 housekeeping. 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 great for monitoring. 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 good for firefighting. 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. Retool is easy to extend. 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!

Fetch

Google

Slack

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Admin Panel Roundup

Too Long; Didn't Read

Companies Mentioned

Taimur

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Admin Panel Roundup

Too Long; Didn't Read

Companies Mentioned

Taimur

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES