When I started my journey with Webflow back in 2020 I was immediately blown away. Not primarily by the product itself – but rather the community around it. Every day I saw people talking about their own journey with Webflow, helping other freelancers, and connecting with each other.
And with such an active community there were also tons and tons of resources being created and published by the community almost on a daily basis. Podcasts, notion templates, website templates, SaaS businesses… you name it, and someone have probably created it already.
As someone being new to the community this was such an incredible experience. However as time went on and Webflow began being a source for more and more of my income I realised that there are simply too many tools and resources out there. It was impossible to keep track of all of it.
And that’s how the idea for Flow Collection was born.
What is Flow Collection?
Flow Collection is the first Webflow resource hub with filtering, search, and voting functionality. The idea is simple – to create a hub for all things Webflow and enable even founders with little following to get the spotlight they deserve.
In a nutshell, this is how it works:
- List your resource – By filling out a simple form anyone can have their resource listed among all the other 300+ products, community leaders, and courses.
- Visitors discovers your tool – With 2 category levels, tags, a name, and description each resource can easily be discovered when visitors use the filtering or search features.
- Visitors vote on their favorites – With just one click visitors can upvote their favorite resources. This is perfect for any creator as they can direct their audience towards their resource page and have them upvote it – and have it be displayed higher up in the lists!
How was Flow Collection built?
Flow Collection was built with one goal in mind – to make easier to discover and be discovered as a Webflow creator. With that in mind I needed some custom functionality to extend the native features of Webflow, namely:
- Jetboost – Jetboost is a search and filtering integration made specifically for Webflow.
- Finsweet Attributes – This is a collection of various power-ups made for Webflow that extends the native functionality. From mirroring form input, to fully-fledged search and filtering capabilities.
- No-bull for Airtable – A Webflow to Airtable syncing integration.
The database and CMS
I knew that the backend would be a very important component to get right for this project. In order to easily manage a database of over 300 items with various levels of categories and tags the native Webflow CMS manager wasn’t enough.
I needed to quickly be able to get an overview of all items and manage it as easily as a spreadsheet. This is why I decided to use Airtable together with No-Bull from Finsweet.
These two tools allowed me to simply edit a spreadsheet-like database inside of Airtable and with the click of a button push any changes and new items to Webflow for final publish. No-Bull’s field mapping and documentation made this a breeze.
The favorite/upvote feature
Community is everything – that’s what I knew when I went into this. So implementing the now popular upvoting feature was more or less a requirement.
Jetboost enabled this – with their relatively simple “Favorite CMS items” boost. When integrated it automatically counts the number of “favorites” on each individual CMS item and allows for these counts to be displayed.
The “business” side of this feature is pretty perfect as well; creators want their resource to appear at the top and have the most votes, which means they’ll share their resource page with their audience. This drives traffic to Flow Collection and increases the organic reach which in turn helps other resource creators to discover the website.
Real-time search and filtering
Discoverability is the key to make this whole project sustainable and keep growing. Each item is categorised and tagged on various levels;
- Main category – Comprised of 6 total main categories each item is put inside of one of these. The main purpose of this is make it easier to browse large collections of tools for a general purpose. This is displayed to the user.
- Subcategory – With 21 total subcategories this makes for a slightly more detailed but still high-level overview of resources for a general purpose. This is also displayed to the user.
- Tags – A majority of the 315+ resources have 1-3 tags attached to them. These aren’t visible to the user and its only purpose is to improve the accuracy of the Jetboost powered real-time search.
- Name – Mainly serving as a title for each resource, they are displayed to the user on each card. However they also allow for direct search if the visitor knows name they’re looking for.
- Price – Serving as an at-a-glance tip for the user they will quickly know if the resource they’re looking at is free to use or paid. This is also a great way for users to filter for the type of resource they want to see, regardless of budget.
All of these together makes for 5 total searchable data points with the real-time search input.
The future of Flow Collection
Flow Collection is an on-going project that I believe will never truly be finished. The idea is to integrate the Webflow community as much as possible and built this into an unstoppable hub for all of the community to gather around.
This is only the first version and plenty of updates, improvements, and more is coming!
