How to Build an Airtable Front End (with Real Examples)

April 12, 2022
•
9
min read
By:
Lizzie Davis, Growth Marketer, Stacker

Building an Airtable front end can give you more options on how people access and interact with your Airtable data. 

With a front end, you can set which users can add, edit, or view your data. Plus, you can customize how you present your data, making it more intuitive and specific to your processes.

For example, by building a front end, you can create several useful tools out of only one Airtable database. Tools such as:

  • Client portals: With client portals, you can let external users (such as your customers or clients) see and edit data related to their projects without seeing everything else in your Airtable database.
  • Internal tools: This includes tools like workflow management apps and company intranets where you’ll want to set unique permissions based on your team’s internal structure.
  • CRMs: Where sales reps can more easily navigate through details of their accounts, focusing on the information they need.
  • Plus, several other tools where multiple parties are engaging with different parts of a database, such as online communities, resource directories, and more. 

But how do you build a front end for your Airtable data without investing significant time and money? And what are some of the more common types of front ends that you can build? To answer those questions, this post reviews three ways to build a front end for your Airtable data and looks at several real Airtable front end examples.

A quick note: Below, we cover different ways to build an Airtable front end, including using our tool Stacker. You can use Stacker to easily make popular front ends, like client portals, internal workflow apps, CRMs, and more. No development or design team is needed. Start your free 30-day trial today.

3 Ways to Build a Front End for Your Airtable Data

1. Using a dev and design team for a completely customized option: A lot of the time, companies will automatically think they need to design and develop their Airtable front end from scratch. And yes, there is a benefit to building your front end this way — you get the highest level of customization possible as you’re building every part of your own tool.

But this is also the most expensive and labor-intensive option. It will also cause you the most grief, as developing a tool from the ground up isn’t a simple task. To put it bluntly: This option isn’t practical for most teams. The good news is that most businesses don’t need to reinvent the wheel with their front end — instead, they simply want common solutions like a customizable project tracker tool, client portal, CRM, etc. If that’s you, designing and developing a custom platform is likely overkill. 

2. A WordPress website: You can integrate your Airtable with a WordPress site so that, unlike coding everything from scratch, you can use the WordPress backend to allow non-developers to adjust copy and content on pages to some extent. But even with a WordPress site, there’s still a good amount of technical management required. You’ll need someone who can manage the site (solving server issues, error codes, theme updates, faulty plugins, and more). Even though you’re not building something from scratch, some coding knowledge (CSS, HTML, JavaScript) is recommended. 

3. Stacker: We built Stacker to specifically help teams make an Airtable front end quickly, easily, and with zero coding required. You don’t need to worry about writing code, rebooting servers, dealing with outdated plugins, updating themes, or any of that. You simply sync your Airtable with Stacker and then customize how people can interact with your data by setting permissions and choosing whatever layout and interface works best for you.

Below, we’ll discuss each option in more detail, starting with our own platform, Stacker.

1. Use Stacker to Easily and Quickly Build a Front End for Your Airtable Data (Zero Coding Required)

With Stacker, you can build a custom Airtable front end for a variety of use cases very easily — such as making client/customer portals, CRMs, project trackers, and more — and with no coding required. This is because Stacker gives you highly specific and granular permissions so that you can have multiple parties accessing one Airtable database, and they’ll only see what you want them to see.

Simply put, we built Stacker to be the easiest and fastest way for anyone to build a custom Airtable front end. 

Let’s take a quick walk-through of how it works.

First, you sign up for a new account on Stacker, putting in your Airtable API key. From there, Stacker immediately starts syncing with your Airtable backend.  

Build an Airtable frontend with your existing data

With your data synched, you can build out your Airtable front end. Specifically, you can:‍

1. Customize how your Airtable data is presented. You can show specific rows or columns in clear graphical interfaces (choosing from several layouts), create filters, and more. 

2. Set user permissions. With Stacker, different types of users can see and edit data in different ways. For example, if you’re building a CRM, you can designate which sales reps can edit which customer accounts (and which parts of those accounts). Or if you’re building a client portal, you can make sure external users can only see details specific to their ticket or entry.

For an example of how much of a difference these features make, let’s compare a CRM front end built in Stacker with a CRM template used within Airtable. 

This is the Airtable CRM template:

A look at how Airtable organizes your data for your CRM

It’s completely functional and will work for some teams. But it’s also a lot of data to handle at one time — and you can’t set permissions to make it so only certain users can see and edit what’s relevant to them. 

Here’s that same data from above re-arranged in Stacker. 

How to build a better Airtable front-end with Stacker

In the Stacker example, accounts are grouped together, so your agents can quickly find an account (or even filter down by industry). Once they’ve found the account they need, they can click on it and see all of the account’s relevant details. 

Building a CRM in Stacker with your Airtable data (individual company profile)

This is what Mark Sorenson — CEO of the marketing agency Social High Rise — did with his social media team. Instead of giving his marketers access to his entire Airtable, he built a front end with Stacker.

Now, his team can:

  • Log into their CRM. They’ll see their accounts (and only their accounts) along with any related tasks they need to work on.
  • View their work. Employees can see the status of different accounts and any alerts that need their attention.
  • View relevant reports. Employees can quickly view social media reports (to get a look at key metrics) and past invoices to make sure their accounts are up to date.

Note that with Stacker, you don’t have to custom code any of these user interfaces — in fact, no coding is required at all. And you don’t even have to design every pixel or pick every font and color of these front ends. Stacker has default, professional-looking designs like the example above, and you can customize it and align it to your brand as needed. 

When you factor in cost and time — and what you want your front end to do for you — we think for most teams, the best option for building an Airtable front end is to use a no-code Airtable front end tool like Stacker.

If you want to learn more about building a CRM specifically, here is a video tutorial on building a custom CRM with Stacker:

‍

More Front End Examples You Can Build with Stacker

We covered how you can build your Airtable front end to be a CRM above. But that’s just one of Stacker’s many use cases.

Next, we look at two more popular types of front ends: Client/customer portals and internal tools.

Building Client Portals/Customer Portals

Build an Airtable front end to create a client portal

Another common use case for building an Airtable front end is when you want external users to see and access parts of your Airtable data (most commonly, their own profile, tickets, or information) but not see or access the rest. 

Note we’re saying “clients” and “customers,” but as the example below shows, this could be anything from actual clients of a design or marketing agency all the way to students in a university — anyone who is external to your team. 

Stacker can let you quickly create a client portal that lets your clients interact with data they need to see — and nothing else.

Here’s an example from Dr. Gary Bunn, a director at the office of candidate services at the University of Central Arkansas. 

Dr. Bunn uses Airtable to track and manage student applications for certain jobs. This means all the department’s applicant data is stored in Airtable. But he wanted a way for applicants to easily view the status of their application, read personalized info on the next steps of their application, and update their contact information if needed, without, of course, having access to the entire Airtable full of everyone’s applicant info.

Customize your Airtable user permissions in your frontend

So Dr. Bunn built an applicant portal using Stacker. Now, applicants can:

  1. Log into their profile.
  2. View the status of their application.
  3. Update any personal information on their profile.

The department’s applicants can do all of this, and Dr. Bunn can still house all of his data in Airtable because by setting permissions, he doesn’t have to worry about an applicant seeing what they’re not supposed to see.

Here’s a video tutorial on creating a client portal with Stacker as your front end, and Airtable as your backend:

‍

Building Internal Tools / Workflow Apps

Build internal tools and workflow apps with an Airtable front-end

Internal and workflow tools are similar to client and customer portals except that you’re letting specific people inside the organization see or edit only certain information in your Airtable database (typically their own projects or data).  

For example, one of our customers is Absolute Mathematics, a tutoring company. James Wright, the founder, uses Airtable to manage his entire business. But he needed a way for his tutors to see how their pupils were progressing through the program, without letting them see all of the data on Airtable. It was also important for James to represent how a student was progressing visually.

With Stacker, he built an internal workflow app that works like this:

  • Tutors can log in and view information on the students they work with.
  • Tutors can enter in new information, such as a recap or update with the students they’re working with.
  • If necessary, tutors can also edit past data they’ve entered.
Create a workflow for your team with Stacker

Above, we gave you a non-exhaustive list of front ends you can make with Stacker. But there are plenty more front ends you can build, including:

  • Team intranets
  • Project trackers
  • Online communities 
  • Resource directories 

Simply put: If you have data in your Airtable and you want to control how you share that data and how it’s laid out for your team or any external party, then you’re going to want to consider building a front end with Stacker.

If you’re ready to see how Stacker can take your Airtable and customize it for your needs (without you writing one line of code),  start your free 30-day trial. 

And if Stacker isn’t what you’re looking for, then keep reading to learn about the other two ways to build an Airtable front end.

2. Create a WordPress Site 

You can also build a WordPress website for your Airtable data. You can use countless plugins to set up things like forms and portals for your clients, and you can integrate your Airtable and WordPress site via the Airtable API. 

The plus side of this option is that a WordPress site is basically fully customizable, so you can control every pixel and every detail of your front end. But the big drawback here is similar to developing and designing your own front end from scratch: Maintenance and time. 

In the end, a WordPress site is still your own website, so you have to design and develop it yourself. Yes, WordPress helps with the design and editing of the website because it’s a CMS and you can edit text and other details without using a developer. But if you’re using a WordPress website as a front end to present and edit Airtable data, it’s very likely that a developer will have to: 

  1. Import Airtable data into WordPress via Airtable’s API and maintain the API.
  2. Customize how that data is presented (like any of the examples in the Stacker section above).
  3. Build out user permissions.

In addition, developers will likely be needed to help solve server issues, error codes, theme updates, plugins, and more.

But overall, consider WordPress an “in-between” option between a fully custom-coded solution and a no-code front end tool like Stacker: You’ll be able to edit some aspects of your Airtable front end without a developer (via WordPress’s backend CMS) but you’ll also very likely need a developer to set up a lot of the basics of integrating your WordPress site with your Airtable data (and maintaining that connection). 

3. Develop and Design a 100% Custom Front End 

Finally, having a development team build a custom front end of your Airtable data is the most customizable option on our list. If you have the resources to do it and really want a very custom front end, this is something to consider. This is basically like building your own app (whether we’re talking about a CRM, a client portal, another internal workflow tool, etc.) — but instead of a traditional database, your data lives in Airtable. 

As a result of this extreme customizability, this option will not be practical for most teams. 

For example: 

  • If you don’t have a current dev team, or someone on your team who can work with an outsourced dev team, then you’re going to struggle to get the project off the ground. 
  • Even if you have a development team, if they have a backlog of “higher priority tasks”, then progress may be slow.
  • If anything breaks down the line — or you change processes — you’ll need to rely on your dev team to fix it again (which could take some time, especially if they have a backlog of other projects to tend to).
  • If you experience personnel changes (some developers go, new ones come), it can be like starting from square one. 

Still, if you find your project too unique to be handled by a no-code app builder like Stacker or a custom website, your most viable option is building your front end from scratch.

Above we covered different ways to build an Airtable front end, including using our tool Stacker. You can use Stacker to easily make popular front ends, like client portals, internal workflow apps, CRMs, and more. No development or design team is needed. Start your free 30-day trial today.

Build your own app in minutes

No designers, no developers & no drama.
Get started