Job board
A starter guide to building your own no-code job board with Airtable, Webflow, and Whalesync
Building a job board is practically a rite of passage in the no-code community. Over the last few years, it's become one of the most popular projects because:
- 1.It's relatively straightforward to build with available no-code tools
- 2.You can quickly provide value by serving a unique niche
If you're reading this, we'll assume you've already decided you want to build a no-code job board and now you're thinking about the best way to make it happen.
This is an overview of how to build a job board specifically with Airtable and Webflow. There are tons of great guides out there already (links below), so we won't rehash what's already been said. Instead, use this article to get a birds-eye view of your upcoming project and as a jumping off point to all the resources you'll need.
Every resource mentioned below is something we've personally found helpful at Whalesync (a no-code data tool) or previously in building a job boards.
Just like in traditional software development, there's often many different ways you can accomplish a goal with no-code. Choosing the right tools for your build will largely depend on what matters to you. If your goal is to get a job board live ASAP, your best bet is likely an "all-in-one" tool like Job Board Fire.
If instead you want full control over the look and feel of your job board then you can't go wrong with Airtable and Webflow. They're really powerful pieces of software with relatively gentle learning curves. If you're still on the fence, take a look at this article which does a great job laying out the pros and cons of each stack.
Here's the birds-eye view:
- 1.Pick a niche
- 2.Create an Airtable Base
- 3.Populate it with jobs
- 4.Choose a Webflow template
- 5.Match your Webflow CMS to your Airtable Base
- 6.Sync jobs from Airtable → Webflow
- 7.Celebrate!
Before jumping in, we wanted to show off a few job boards that have been built with Airtable and Webflow. Hopefully you'll notice they all look very different. That's part of the beauty of this approach!
You're likely not going to want to compete with the Indeed's and LinkedIn's of the world on day one. Instead, choose a niche that you understand well and feel is currently underserved. For example, "crypto in SE Asia" or "junior-level product management".
Once you've settled on your niche, it's time to start building. First let's create the backend of your job board using Airtable as a database. This Airtable base will house all the information about each of the job postings you'll eventually list.
First, for housekeeping purposes, let's rename the table in your Airtable base something along the lines of "Job Postings". Once you've renamed your table, you'll need to add fields that give detail to each of your job posts. Which details are necessary for your site is up to you, but some of the more common fields include:
- Company
- Position
- Location
- Date Posted
In summary:
- 1.
- 2.Add a base
- 3.Rename the table
- 4.Add all the necessary fields
Now that you have your Airtable base set up, it's time to populate with job postings. Later we can automate this, but for now, decide which sources you want to rely on and start copying your data into Airtable.
For example, if you wanted to find entry-level PM jobs on LinkedIn each day, you could search with keywords like "associate product manager". Then you can copy and paste the relevant info into the Airtable base.
When you're done it should look something like this, but with more than three postings:
Now that your backend is set up, let's handle the frontend. Webflow lets you design beautiful websites without code. You can of course start from scratch, but a quick way to make a great looking site is to start with a template.
Webflow has tons of templates including a few that were specifically made for job boards. One of our favorites is Job Board X, but we've also added a list of others to the bottom of this article.
Duplicate one of these templates and start to customize. Plug in your logo, add/remove pages, adjust the color scheme, etc. If you need a primer on Webflow, check out their 101 Crash Course as part of Webflow University.
In step 2 we created an Airtable base with a table called "Job Postings". Now we're going to prepare an equivalent table in Webflow using their CMS.
If you're not familiar with the Webflow CMS they have a course on that as well, but essentially it's just a place to store data that you'll use to populate your site. A Webflow collection is equivalent to a table in Airtable.
Each of the above Webflow templates should come with CMS collections pre-created, but if you're not using a template you'll need to create a collection yourself. Similar to your Airtable table, call this collection "Job Postings".
The fields in your "Job Postings" collection (Webflow) will need to match the fields in your "Job Postings" table (Airtable) exactly. Take the time now to create a field in your collection for every field you have in Airtable. For example, if you have a single select field in Airtable called "Department" you will need to create an option field in Webflow (preferably also called "Department"). Double-check that every option matches exactly. If you write "customer support" in Airtable and "customer service" in Webflow that will cause problems.
You're almost there! At this point you've set up a database of job postings in Airtable and a beautiful frontend to display those jobs in Webflow. Now all that's left is syncing data from one to the other.
We're biased, but we think the best way to do this is with Whalesync! Whalesync makes it easy to instantly sync data across no-code tools, especially Airtable and Webflow.
In Whalesync simply map each of the fields in your Airtable to their corresponding field in Webflow and turn sync on. Now any time you add a job posting to Airtable it will automatically sync to Webflow.
If you're not using a syncing tool like Whalesync, you can also accomplish this with an automation tool like Zapier. That being said adding things like multi-reference fields might be a bit painful.
That's it! Not too bad right?
Although this is just an overview to paint the broad picture, the details are pretty straightforward. For those that are ready for that next step, I've included a list of resources and in-depth guides below from some of the best minds in no-code.
Last modified 8mo ago