This video details the creation of a "running directory" website, a local business directory for Canadian running races and clubs. The speaker built the site in 48 hours using no-code tools and shares a step-by-step guide for viewers to replicate the process.
Website Building with Webflow and Relume Components: The speaker used Webflow, leveraging Relume Components to accelerate design and create a simple website with four pages: homepage, listings (races and clubs), and contact. Webflow's CMS is utilized for managing content.
Database Setup with Airtable and Data Syncing with Whalesync: Airtable serves as the database, structured with tables for races, clubs, locations, and more. Whalesync automates data synchronization between Airtable and Webflow, enabling bidirectional updates. A key tip is to use matching field names for seamless mapping between platforms. Whalesync's filter feature allows selective data synchronization, preventing unintended live updates.
Data Population and Enrichment: High-quality data is prioritized. A custom web clipper imports data from Instagram accounts into Airtable. Workflows within Airtable enrich this data, extracting relevant information for search and filtering.
Search and Filtering with Finsweet CMS Filter: The Finsweet CMS filter provides search and filtering functionality on the website, improving the user experience. The speaker explains how to install the script and tag relevant elements for seamless filtering.
Cost and Monetization: Running the site costs roughly $100 per month, covering Webflow, Whalesync, and Airtable. Monetization strategies include adding service categories (e.g., physios, coaches) and offering event marketing services.
Here's the full transcript you requested:
[{"start_ms":"120","end_ms":"4400","text":"So, in today's video I'm going to show you \nhow I created the running directory which","start_time_text":"0:00"},{"start_ms":"4400","end_ms":"10559","text":"is a local business directory that allows \npeople in Canada to find running races and","start_time_text":"0:04"},{"start_ms":"10560","end_ms":"11680","text":"run clubs.","start_time_text":"0:10"},{"start_ms":"11680","end_ms":"16240","text":"I created the entire site in 48 hours and \nin today's video I'm going to be breaking","start_time_text":"0:11"},{"start_ms":"16240","end_ms":"21680","text":"down exactly how I did it so that you can \ncreate your own local directory using no-code","start_time_text":"0:16"},{"start_ms":"21680","end_ms":"22240","text":"tools.","start_time_text":"0:21"},{"start_ms":"22240","end_ms":"23480","text":"Friends, what's going on?","start_time_text":"0:22"},{"start_ms":"23480","end_ms":"24640","text":"Welcome back to the channel.","start_time_text":"0:23"},{"start_ms":"24640","end_ms":"29480","text":"So, in today's video I want to share with you \na brand new project that I literally launched","start_time_text":"0:24"},{"start_ms":"29480","end_ms":"33520","text":"about five minutes ago and it's \ncalled the running directory.","start_time_text":"0:29"},{"start_ms":"33520","end_ms":"41080","text":"Now, the running directory is a local business \ndirectory or, you know, database that allows","start_time_text":"0:33"},{"start_ms":"41080","end_ms":"44760","text":"people who are into running to find local races.","start_time_text":"0:41"},{"start_ms":"44760","end_ms":"48359","text":"Now, the idea behind it is pretty \nsimple and straightforward.","start_time_text":"0:44"},{"start_ms":"48360","end_ms":"52720","text":"You can simply use our search and filtering \nto basically find different races that are","start_time_text":"0:48"},{"start_ms":"52720","end_ms":"58600","text":"going on right now and also if you want to \nnetwork with people, if you want to kind of","start_time_text":"0:52"},{"start_ms":"58600","end_ms":"65080","text":"meet your running crew, we also have a collection \nof run clubs that you'll be able to find by","start_time_text":"0:58"},{"start_ms":"65080","end_ms":"66520","text":"different cities.","start_time_text":"1:05"},{"start_ms":"66520","end_ms":"71920","text":"Now, I created this entire site because I \nrecently got into running pro like a year","start_time_text":"1:06"},{"start_ms":"71920","end_ms":"79360","text":"ago and I actually ran my first marathon last \nMay and I got really into it and so what I","start_time_text":"1:11"},{"start_ms":"79360","end_ms":"84880","text":"wanted to do is combine my passion for building \nsites like this as well as running and create","start_time_text":"1:19"},{"start_ms":"84880","end_ms":"90000","text":"a resource that will hopefully help \nplenty other people get into running.","start_time_text":"1:24"},{"start_ms":"90000","end_ms":"95080","text":"Now, if you are passionate about something \nelse, then this guide is really going to take","start_time_text":"1:30"},{"start_ms":"95080","end_ms":"99840","text":"you through the step-by-step process that I \nwent through in order to create the running","start_time_text":"1:35"},{"start_ms":"99840","end_ms":"100759","text":"directory.","start_time_text":"1:39"},{"start_ms":"100760","end_ms":"104520","text":"Now, we've got quite a few things to cover \nso let's just start off with the first part","start_time_text":"1:40"},{"start_ms":"104520","end_ms":"107719","text":"of it all which is to create the website.","start_time_text":"1:44"},{"start_ms":"107720","end_ms":"113520","text":"Now, the tool that I used in order to create \nthe website is Webflow and I also used what's","start_time_text":"1:47"},{"start_ms":"113520","end_ms":"118960","text":"called Relume Components in order to really \nquickly spin up the site but just first of","start_time_text":"1:53"},{"start_ms":"118960","end_ms":"121440","text":"all, let's go over the \ndifferent pages that I have.","start_time_text":"1:58"},{"start_ms":"121440","end_ms":"127640","text":"So I wanted to keep it super simple in the \nfirst iteration so I only have four static","start_time_text":"2:01"},{"start_ms":"127640","end_ms":"133640","text":"pages, I've got the homepage, then I've got \na listings page with search and filtering","start_time_text":"2:07"},{"start_ms":"133640","end_ms":"141840","text":"for my races, I also have a similar page for \nmy different run clubs and then I also have","start_time_text":"2:13"},{"start_ms":"141840","end_ms":"148319","text":"a contact page which has a few different links \nthat will allow people who visit the website","start_time_text":"2:21"},{"start_ms":"148320","end_ms":"154760","text":"to suggest new run clubs or races and when \nsomeone clicks on this, it simply opens up","start_time_text":"2:28"},{"start_ms":"154760","end_ms":"161720","text":"a form that people can fill out and that will \nthen populate my database with more information","start_time_text":"2:34"},{"start_ms":"161720","end_ms":"165480","text":"so that I can then expand on my directory.","start_time_text":"2:41"},{"start_ms":"165480","end_ms":"172640","text":"Now, in case you are new to Webflow, Webflow \nalso has an internal tool called the Webflow","start_time_text":"2:45"},{"start_ms":"172640","end_ms":"173600","text":"CMS.","start_time_text":"2:52"},{"start_ms":"173600","end_ms":"179920","text":"Now, when you're creating directory sites \nand you want to create template pages for","start_time_text":"2:53"},{"start_ms":"179920","end_ms":"185680","text":"your different races or your run clubs, then \nwhat you can do is you can simply create what's","start_time_text":"2:59"},{"start_ms":"185680","end_ms":"191079","text":"called CMS collections which is essentially \nan internal database that allows you to store","start_time_text":"3:05"},{"start_ms":"191080","end_ms":"199520","text":"information that you'll then later use in \norder to create your race pages or also your","start_time_text":"3:11"},{"start_ms":"199520","end_ms":"202480","text":"cards that you'll then see on your listing pages.","start_time_text":"3:19"},{"start_ms":"202480","end_ms":"205480","text":"And so this is what the behind \nthe scenes of it looks like.","start_time_text":"3:22"},{"start_ms":"205480","end_ms":"207000","text":"It's super simple and straightforward.","start_time_text":"3:25"},{"start_ms":"207000","end_ms":"213520","text":"I've got a field for the race title, I've got \na field for my location, I've got an image","start_time_text":"3:27"},{"start_ms":"213520","end_ms":"219680","text":"in here, I've got the event date and then I \nalso have a few other labels that I'm using","start_time_text":"3:33"},{"start_ms":"219680","end_ms":"225760","text":"for various parts of the card and as soon as \nI then start populating it, it essentially","start_time_text":"3:39"},{"start_ms":"225760","end_ms":"229400","text":"generates a card that looks \na little bit like this.","start_time_text":"3:45"},{"start_ms":"229400","end_ms":"234840","text":"And if we have a little bit of a look into \nmore detail, you can see that it is pulling","start_time_text":"3:49"},{"start_ms":"234840","end_ms":"240640","text":"the information from my database which then \nallows you to create all of these nice little","start_time_text":"3:54"},{"start_ms":"240640","end_ms":"246640","text":"preview cards without needing \nto create it all individually.","start_time_text":"4:00"},{"start_ms":"246640","end_ms":"252480","text":"Now when you create a CMS collection inside \nof Webflow, it will also create a template","start_time_text":"4:06"},{"start_ms":"252480","end_ms":"253280","text":"page for you.","start_time_text":"4:12"},{"start_ms":"253280","end_ms":"258120","text":"So if you wanted to create a more profile \nrich details page, you'll be able to do this","start_time_text":"4:13"},{"start_ms":"258120","end_ms":"262800","text":"but in the first iteration of the site, I \njust didn't even want to over complicate it","start_time_text":"4:18"},{"start_ms":"262800","end_ms":"264800","text":"so I haven't yet created it.","start_time_text":"4:22"},{"start_ms":"264800","end_ms":"271039","text":"So whenever someone goes and clicks on one \nof these cards, it will actually redirect","start_time_text":"4:24"},{"start_ms":"271040","end_ms":"276080","text":"the website visitor directly to \nthe registration page of this site.","start_time_text":"4:31"},{"start_ms":"276080","end_ms":"281800","text":"Now just in terms of the process that I went \nthrough in order to create the page, now obviously","start_time_text":"4:36"},{"start_ms":"281800","end_ms":"284120","text":"you can build everything from scratch.","start_time_text":"4:41"},{"start_ms":"284120","end_ms":"290479","text":"However what I have found to be an absolute \nhack when working with Webflow is to actually","start_time_text":"4:44"},{"start_ms":"290480","end_ms":"292480","text":"just use ReLoom components.","start_time_text":"4:50"},{"start_ms":"292480","end_ms":"299640","text":"Now like I said before, ReLoom is a component \nlibrary that you can use to really speed up","start_time_text":"4:52"},{"start_ms":"299640","end_ms":"304680","text":"the process and they actually have an app inside \nof Webflow that allows you to effortlessly","start_time_text":"4:59"},{"start_ms":"304680","end_ms":"307280","text":"pull in different components from different sites.","start_time_text":"5:04"},{"start_ms":"307280","end_ms":"315040","text":"And so specifically with the listing pages, \nall I had to do is simply copy the element","start_time_text":"5:07"},{"start_ms":"315040","end_ms":"320840","text":"and then I could just simply drop it right \ninto the page and it would then automatically","start_time_text":"5:15"},{"start_ms":"320840","end_ms":"326919","text":"import all of my styles and then just \napply it to the element in question.","start_time_text":"5:20"},{"start_ms":"326920","end_ms":"333200","text":"So then all that I needed to do is to just \ngo in here and just make whatever adjustments","start_time_text":"5:26"},{"start_ms":"333200","end_ms":"339200","text":"I need and I can then also jump in here \nand start making some stylistic changes.","start_time_text":"5:33"},{"start_ms":"339200","end_ms":"345720","text":"So if for example I want to change the background \ncolor, I can actually just access the variables","start_time_text":"5:39"},{"start_ms":"345720","end_ms":"352880","text":"that I've currently got stored inside of my \nvariables panel and just populate it with","start_time_text":"5:45"},{"start_ms":"352880","end_ms":"354040","text":"different elements in here.","start_time_text":"5:52"},{"start_ms":"354040","end_ms":"360720","text":"So in short, if you have used ReLoom in the \npast, you'll obviously know how incredibly","start_time_text":"5:54"},{"start_ms":"360720","end_ms":"362200","text":"powerful it is.","start_time_text":"6:00"},{"start_ms":"362200","end_ms":"368520","text":"If you are brand new to building sites with \nWebflow, then this is definitely something","start_time_text":"6:02"},{"start_ms":"368520","end_ms":"372919","text":"that you'll want to look into simply because \nit will save you a lot of time when it comes","start_time_text":"6:08"},{"start_ms":"372920","end_ms":"377120","text":"to assembling the site and also \nmaking it mobile responsive.","start_time_text":"6:12"},{"start_ms":"377120","end_ms":"384080","text":"Now the next part in the process is to then \ntake your CMS and turn it into a database.","start_time_text":"6:17"},{"start_ms":"384080","end_ms":"389319","text":"And the tool that I'm using to \nbasically run my database is your table.","start_time_text":"6:24"},{"start_ms":"389320","end_ms":"395280","text":"So in here you can see a table for my races, \nyou can see a table for all of my run clubs,","start_time_text":"6:29"},{"start_ms":"395280","end_ms":"399200","text":"you can see a table for the different \nlocations and cities that I have.","start_time_text":"6:35"},{"start_ms":"399200","end_ms":"402640","text":"I also have a table for the \ndifferent provinces in Canada.","start_time_text":"6:39"},{"start_ms":"402640","end_ms":"410800","text":"And also because I am collecting mailing list \nsignups on my site, I also have a table where","start_time_text":"6:42"},{"start_ms":"410800","end_ms":"415120","text":"I can send any mailing list \nsubmission that looks like that.","start_time_text":"6:50"},{"start_ms":"415120","end_ms":"420360","text":"Now the most important tables that you're \ngoing to have in here are the races table,","start_time_text":"6:55"},{"start_ms":"420360","end_ms":"426479","text":"the run club table, city and province because \nthese tables are directly linked to the Webflow","start_time_text":"7:00"},{"start_ms":"426480","end_ms":"427640","text":"CMS.","start_time_text":"7:06"},{"start_ms":"427640","end_ms":"433000","text":"So my recommendation for anyone who is just \ngetting started with this is to build out","start_time_text":"7:07"},{"start_ms":"433000","end_ms":"439200","text":"all of your CMS collections inside of Webflow \nfirst, figure out what individual fields you're","start_time_text":"7:13"},{"start_ms":"439200","end_ms":"443960","text":"going to need in order to create your \npreview cards or even your detail pages.","start_time_text":"7:19"},{"start_ms":"443960","end_ms":"449639","text":"And as soon as you have created all of these \ndifferent fields, jump into your Airtable","start_time_text":"7:23"},{"start_ms":"449640","end_ms":"452480","text":"base and create the corresponding fields.","start_time_text":"7:29"},{"start_ms":"452480","end_ms":"459120","text":"So if for example you have a field inside of \nyour Webflow CMS for the event title, then","start_time_text":"7:32"},{"start_ms":"459120","end_ms":"465600","text":"you'll want to create the same field inside \nof Airtable, same thing for location, same","start_time_text":"7:39"},{"start_ms":"465600","end_ms":"471800","text":"thing for links to the city or province \npage, same things with the date field.","start_time_text":"7:45"},{"start_ms":"471800","end_ms":"477560","text":"And also there might be instances where you'll \nwant to create fields inside of Airtable","start_time_text":"7:51"},{"start_ms":"477560","end_ms":"481440","text":"that you then later on also \ncreate inside of Webflow.","start_time_text":"7:57"},{"start_ms":"481440","end_ms":"486560","text":"One of those fields for example is this formula \nfield that calculates how much time there","start_time_text":"8:01"},{"start_ms":"486560","end_ms":"488880","text":"is until the actual race day.","start_time_text":"8:06"},{"start_ms":"488880","end_ms":"492880","text":"Now this is one of the advantages \nof using a tool like Airtable.","start_time_text":"8:08"},{"start_ms":"492880","end_ms":"497640","text":"You can do really fancy and advanced things \nlike calculate the time between the start","start_time_text":"8:12"},{"start_ms":"497640","end_ms":"504400","text":"day and today and then it creates a dynamic \nlabel that you can then send back to Webflow","start_time_text":"8:17"},{"start_ms":"504400","end_ms":"508520","text":"which then in turn will create these nice \nfun little labels that says things like 10","start_time_text":"8:24"},{"start_ms":"508520","end_ms":"512800","text":"days to go, 2 weeks to go and so on.","start_time_text":"8:28"},{"start_ms":"512800","end_ms":"517479","text":"Now as soon as you've gone through the process \nof creating all of the different fields for","start_time_text":"8:32"},{"start_ms":"517480","end_ms":"521519","text":"your tables, then you'll be in a position \nwhere you can actually start setting up the","start_time_text":"8:37"},{"start_ms":"521520","end_ms":"526400","text":"workflow that syncs data from Airtable to Webflow.","start_time_text":"8:41"},{"start_ms":"526400","end_ms":"530360","text":"Now there are a lot of different tools that \nyou can use in order to create the syncing","start_time_text":"8:46"},{"start_ms":"530360","end_ms":"534240","text":"functionality between two database \nsources like Airtable and Webflow.","start_time_text":"8:50"},{"start_ms":"535440","end_ms":"539080","text":"The tool that I use in this \nparticular project is Whalesync.","start_time_text":"8:55"},{"start_ms":"539080","end_ms":"544360","text":"Now I've used Whalesync a lot in the past \nbut especially for this particular project","start_time_text":"8:59"},{"start_ms":"544360","end_ms":"546279","text":"it's been incredibly useful.","start_time_text":"9:04"},{"start_ms":"546280","end_ms":"551000","text":"Now if you've never heard of Whalesync \nbefore, the way it works is super simple.","start_time_text":"9:06"},{"start_ms":"551000","end_ms":"556840","text":"Step number one is that you create your account \nand then you connect your Airtable base and","start_time_text":"9:11"},{"start_ms":"556840","end_ms":"558520","text":"your Webflow site.","start_time_text":"9:16"},{"start_ms":"558520","end_ms":"563280","text":"As soon as you've connected your accounts \nyou'll be able to import all of the different","start_time_text":"9:18"},{"start_ms":"563280","end_ms":"567920","text":"tables that you have inside of Airtable and \nall of the different CMS collections that","start_time_text":"9:23"},{"start_ms":"567920","end_ms":"569360","text":"you have inside of Webflow.","start_time_text":"9:27"},{"start_ms":"569880","end_ms":"575000","text":"Now because you've created a corresponding \ntable in Airtable for every single one of","start_time_text":"9:29"},{"start_ms":"575000","end_ms":"580520","text":"your Webflow CMS collections, you'll be \nable to map those tables up to each other.","start_time_text":"9:35"},{"start_ms":"580520","end_ms":"585040","text":"And as soon as you've mapped those tables up \nto each other you'll also be able to create","start_time_text":"9:40"},{"start_ms":"585040","end_ms":"591360","text":"a link between the fields inside of Airtable \nand the corresponding Webflow CMS collection.","start_time_text":"9:45"},{"start_ms":"591360","end_ms":"597399","text":"So for example if we have a look at our run \nclubs table, I've got a field for the day","start_time_text":"9:51"},{"start_ms":"597400","end_ms":"603880","text":"of the week, I've got a field for the description, \nthe meeting day, the meeting location, I've","start_time_text":"9:57"},{"start_ms":"603880","end_ms":"608800","text":"got the logo that I'm using, and \nthen I have a few other fields.","start_time_text":"10:03"},{"start_ms":"608800","end_ms":"614360","text":"And inside of Whalesync what I'm doing is \nI am mapping those Airtable fields to the","start_time_text":"10:08"},{"start_ms":"614360","end_ms":"615600","text":"Webflow CMS fields.","start_time_text":"10:14"},{"start_ms":"615600","end_ms":"625360","text":"So for example wherever I am using my profile \npicture, I want that field to map to my logo","start_time_text":"10:15"},{"start_ms":"625360","end_ms":"628279","text":"field inside of the Webflow CMS.","start_time_text":"10:25"},{"start_ms":"628280","end_ms":"634280","text":"And so you can see in here we've got a field \ninside of the Webflow CMS called logo, and","start_time_text":"10:28"},{"start_ms":"634280","end_ms":"641240","text":"so whenever I add information to the profile \npicture field inside of Airtable, it will","start_time_text":"10:34"},{"start_ms":"641240","end_ms":"646200","text":"automatically sync that data \nfrom Airtable to Webflow.","start_time_text":"10:41"},{"start_ms":"646200","end_ms":"652080","text":"Now another thing that is very nice and unique \nabout Whalesync is that it actually works","start_time_text":"10:46"},{"start_ms":"652080","end_ms":"658080","text":"as a bidirectional sync, meaning that if you \nwere to make any changes inside of Webflow,","start_time_text":"10:52"},{"start_ms":"658080","end_ms":"665240","text":"so let's say for example we jump into our \nWebflow CMS collection and we change the logo","start_time_text":"10:58"},{"start_ms":"665240","end_ms":"667080","text":"directly inside of Webflow.","start_time_text":"11:05"},{"start_ms":"667080","end_ms":"671640","text":"Now as soon as you hit the save button, what \nWhalesync will do is it will actually also","start_time_text":"11:07"},{"start_ms":"671640","end_ms":"677160","text":"sync the changed information from Webflow \nback into Airtable, meaning that you'll always","start_time_text":"11:11"},{"start_ms":"677160","end_ms":"680959","text":"have your information in sync \nacross all your different platforms.","start_time_text":"11:17"},{"start_ms":"680960","end_ms":"684800","text":"Now the beautiful thing about Whalesync, ","start_time_text":"11:20"},{"start_ms":"684800","end_ms":"686920","text":"especially when you compare \nit to automation tools like","start_time_text":"11:24"},{"start_ms":"686920","end_ms":"691839","text":"make.com, is that it is super \nsimple and easy to set up.","start_time_text":"11:26"},{"start_ms":"691840","end_ms":"695960","text":"Now a tip that I have for anyone using this \nfor the first time, make sure that when you're","start_time_text":"11:31"},{"start_ms":"695960","end_ms":"702280","text":"setting up the Webflow CMS collection to use \nthe exact same name that you're using for","start_time_text":"11:35"},{"start_ms":"702280","end_ms":"710680","text":"say your logo field inside of Airtable, because \nwhat Whalesync will do is it will automatically","start_time_text":"11:42"},{"start_ms":"710680","end_ms":"716279","text":"detect what fields are related to each other \nand map them up for you, which makes the process","start_time_text":"11:50"},{"start_ms":"716280","end_ms":"718000","text":"even simpler.","start_time_text":"11:56"},{"start_ms":"718000","end_ms":"723600","text":"One more feature that is incredibly \npowerful in Whalesync is the filter feature.","start_time_text":"11:58"},{"start_ms":"72360
