Learn to Code via Tutorials on Repl.it!

← Back to all posts
Airtable + Replit = Super Delicious 🧁
emgold (15)

In this tutorial, you'll learn how to build an app using Python, Airtable, and Sync Inc.

This setup is perfect for teams that want to quickly build an application or proof of concept that could then grow into a scalable, production app.

You can jump to the final result of this tutorial by forking this Repl →

Setup Airtable

For this project, we are going to use the Product Catalog Template available from Airtable. Click "Use template" to import it into your Airtable account.

This template includes a base with 7 tables:

  • Furniture
  • Vendors
  • Clients
  • Client orders
  • Order line items
  • Designers
  • Vendor contacts

For the purposes of this tutorial, we will focus on Furniture, the table that contains the products that you want to show in your app.

As you can see, you can quickly search, add, edit, or delete items in Airtable without writing any code. This allows you to iterate on your data model very quickly as you figure out what data you need for your product catalog.

Unfortunately, Airtable has some limitations. First, it doesn’t provide granular permissions for resources in your base, so you’d have to use the Airtable API to handle this.Second, Airtable limits you to 5 requests per second, making its API less than ideal for production workloads.

In the following sections, you'll overcome these limitations by connecting your Airtable base to Sync Inc to build a Python application.

Setup Sync Inc

With your Airtable base ready, connect Airtable to Sync Inc to get a PostgreSQL database synced with Airtable data.

First, create a new Sync Inc account.

Paste your Airtable API key in the Add key section. Click the Where do I find this? link if you need help finding your API key in your Airtable account.

Next, select the Product Catalog base you just added to your Airtable workspace. By default, all tables are synced.

Click Start syncing. This will immediately connect to your Airtable and start syncing the base. A small base like the template project we’re using should take less than 30 seconds to sync.

Once done, you are presented with the credentials for your database as shown below:

You are now ready to build a scalable product catalog application on top of your Airtable base without running into Airtable’s built-in rate limits.

Setup Repl.it

With your database ready, you can create the Python web application that will display your products to users.

First, sign up for Repl.it if you don’t already have an account.

Create a new Repl by clicking on the blue + New repl on the top left of your dashboard.

Choose Multi-page Flask Template in the template selector to start with a pre-built template that includes sample code. Name the new Repl ProductCatalog:

Repl.it will take you to their browser-based development environment where you can start editing code.

The Python Backend

With your Repl set up, you can add your database connection information to the Python application.

First, set up the dependencies for your application.

This application will use SQLAlchemy (flask_sqlalchemy) to connect to the database, so you must add it and pg8000 to the requirements.txt file. This ensures the necessary drivers are installed to connect to your Sync Inc PostgreSQL databases. You also need the Python Requests library to call the Airtable API to delete a product.

Now, add environment variables (a.k.a Secrets in Replit jargon) to store your Sync Inc and Airtable API credentials. To do so, select the Secrets tab on the right bar. Create a new secret. For the key enter db_url and for the value enter the connection string that Sync Inc provided earlier. Then click the Add new secret button:

You can easily retrieve the string for your Sync Inc database by opening the Sync Inc Console and clicking the Connect button on your Product Catalogue resource).

Repeat these steps to add secrets for your airtable_api_key (which you retrieved earlier) and your airtable_base_id (which you can find in the Airtable API docs by selecting your base).

You’re now ready to add your application code. Replace the code in the template main.py with the following:

This first set of code instantiates the Flask app and configures SQLAlchemy to connect to your Sync Inc database (hence the os.environ['db_url']).

Next, you need a model class. Each attribute on the model corresponds to a field in your Airtable base, and you’ll use this to query the Postgres database in each endpoint of your application.

Add the following to your main.py file:

Flask uses routes to separate various pages on your site. In this case, add three routes to your main.py file.

One to display all the products:

Another to display a single product:

And a third to delete a single product. For this endpoint, you will call the Sync Inc Airtable Proxy API, which in turn calls the Airtable web service. Sync Inc is read-only, so any alteration to the data must be done through the Airtable API using Sync Inc as a proxy.

Finally, add the following line to the end of your main.py file to run the webserver on localhost:8080:

Now that your Python application can connect to the Sync Inc database and Airtable API, you can move on to the presentation portion of your app.

The HTML Frontend

For the frontend, you'll use jinja2 as a simple template language for inserting python objects and loops into the HTML. For styling, we'll take a shortcut by using Bootstrap5.

The home page of your application will display a list of products in a table and include a link to view each in more detail on the single product page.
Replace the example code in your index.html file with the following:

The other page you need to create is the single product page. Create a new HTML file called product.html and add the following:

This view shows more product details and includes a Delete button that will execute the removal of the product from your Airtable base and Sync Inc database. In your final release, you will probably want to hide the Delete button for unauthenticated users, but this project is meant to demonstrate building a simple prototype.

Deploying Your Application

Your web application is ready. Press the Run button to deploy it:

With one click, you deploy you application. How cool is that!

And if you are fast, you'll see that when you click the delete button - the product is immediately removed from Airtable and the Sync Inc database:

Conclusion

In this tutorial, you’ve seen that in just a few minutes, you can create and deploy a working product catalog. Using Airtable as a structured data source and Sync Inc to expose your data through a scalable PostgreSQL database, you can now write raw SQL or use an ORM to retrieve products. By deploying a Python Flask application on Repl.it, you can rapidly work on this application with your team without having to do a lot of environmental configuration.

Comments
hotnewtop
RayhanADev (2698)

I love how high quality this tutorial is, thank you for posting dude!

RoBlockHead (552)

Amazing tutorial! This is exactly the type of post we like to see on the tutorials board!

Jacobs326 (0)

Thanks for the update and quick reply. Bumped into your thread. Thanks for creating it.

alvinaadolf (0)

[ redacted by moderators for advertising ]

JBloves27 (1902)

Woah, super nice, but just pointing out, it's Replit.com, not Repl.it ;)

ShiftyBoo (35)

@JBloves27 Well, It's both, but going to repl.it redirects you to replit.com.