How I built Stackradar without a line of code using Webflow, Supersparks, & other tools.

Claudia Nathan
Stackradar
Customer Story
May 14, 2024

Stackradar is a directory of 400+ vetted tech tools and resources to help everyone discover & build game-changing tech stacks. I built this platform from scratch without any technical experience - something 100x more accessible in 2024 thanks to tools like Webflow and Supersparks.

For a brief run-down on what Iā€™ve managed to build, currently in Stackradar features include:

šŸš€ 400+ curated tools

šŸ‘‰ Hand-picked & published by humans (1 human but she works fast, swear)

šŸŖ© Curated stacks by industry

šŸ”® Tech stacks shared by founders and startups

šŸŽ Free membership to save tools & share experiences

ā­ User reviews & commenting

šŸ—‚ļø Browse by category, price, integrations & more

šŸ‘€ Tools regularly monitored & updated

āœ… New tools added every week

Stackradar's tool directory
Example of Stackradar's tool page

In honor of our recent Product Hunt launch, coming in at #2 of the day and #4 of the week, I wanted to break down exactly how I built Stackradar, so if youā€™re a non-technical human with an idea you want to bring to life and no idea how - now you hopefully can.

šŸ› ļø Why I built Stackradar

Thereā€™s lots of incredible tools out there. But thereā€™s too many, and I find sometimes I get so carried away trying out new stuff that I forget what I was ever trying to do in the first place.

But what spurred the creation of Stackradar was actually a conversation with my housemates (both business owners) in which they asked me what I meant by ā€˜Atlassianā€™. After that day I made a point to ask anyone & everyone (offline) if they knew what Atlassian was, or Notion, Intercom, Product Huntā€¦ 8/10 people said no.

Since that fated ā€˜Atlassianā€™ day Iā€™ve also noticed how often people ā€” from small business owners to CEOā€™s and management teams ā€” are choosing the wrong products, or outsourcing and spending money where it doesnā€™t need to be spent.

So I bootstrapped Stackradar to help āœØeveryoneāœØ ā€” from tech startups & indie makers to beauty salon owners & architects ā€” learn, discover and build carefully curated & integrated stacks to transform, streamline and scale their work.

šŸŒ Democratizing digital transformation

95% of the tools on StackRadar require zero coding or development experience, meaning anyone can configure and build solutions to break through bottlenecks, 10x productivity and open doors to scale you never thought possible.

I know this is possible because 2 years ago Iā€™d never built a website in my life, let alone a community and directory.

But then I got started with Webflow, and it all snowballed from there. Coming from a design background (and believing I didnā€™t have a technical bone in my body) Iā€™m consistently blown away with how progressively accessible the world of no-code has become. Supersparks - for example - allowed me to embed user reviews uniquely on each tool page, and I set it up and designed it to suit the brand in about 30 minutes (tops).

Iā€™ve worked with startups for a few years ā€” I manage a yearly startup conference here in Australia, and Iā€™ve seen too many people with incredible ideas lose out on funding or exposure because they didnā€™t have the resources to develop an MVP.

Iā€™m here to say that the resources are there, and the possibilities have become endless. Stackradar took me a while to develop because I was learning how to do everything as I went, but to test my skills I recently replicated the build to see how long it would have taken me had I known how to go about it from day one.

How long did it take me?

One day.

šŸ—‚ļø The CMS

Every bit of content you see on Stackradar is created and updated in Airtable, then replicated in Webflowā€™s native CMS. Categories, stacks, resources and price filters are all their own ā€˜tablesā€™ or ā€˜data setsā€™ that interlink with one another.

Stackradar's category pages with CMSĀ references

When I find a new tool, I add it to a separate dataset called ā€˜Stagingā€™. This then triggers an API call to URLbox which takes a screenshot of the products homepage. I check the screenshot, sometimes I re-do it myself, or if the company has a press kit Iā€™ll find that and use their content from there. I then use a script I added to my Airtable base to compress the webpā€™s to optimise site performance using TinyPNGā€™s API, you can see how here.

I donā€™t use AI to scrape and write any of the information about the products, I write it all myself ā€” taking info from the productsā€™ various marketing pages and ā€˜aboutā€™ sections. Yes, itā€™s time-consuming. But in the age of AI, authenticity is everything.

Once Iā€™m happy with the draft, I click a button set up in my Airtable interface that triggers an automation to duplicate the record cell for cell in the live data set.

šŸ› ļø The Backend

Once added to the live data, Whalesync picks up on the new record and duplicates that into the actual Webflow CMS. Whalesync monitors and updates any changes between Webflow & Airtable and updates accordingly. Itā€™s an awesome tool - especially for directory & programmatic SEO websites.

šŸ” Advanced CMS Functions

The entire search engine is powered by Jetboost, itā€™s incredibly user-friendly and easy to configure. It powers the search page and the ā€˜save/likeā€™ feature on each tool for logged-in users (TY Memberstack).

ā­ Community engagement & UGC

The reviews on each tool page is powered by Supersparks (a Webflow approved app) which automatically integrates with Memberstack ā€” special mention to Supersparksā€™ founder Ian Ruta. For one, the superpowers heā€™s built for Webflow in Supersparks are awesome tools with really competitive pricing. For two, he is a really talented and authentic founder.Ā 

The reviews section I was able to custom-designed in Webflow with Supersparks

Before publishing the platform he was responding to my queries on the Supersparksā€™ setup within minutes, no matter the time of day. If youā€™re a Webflow builder, Supersparks offers a tonne of awesome features on top of ratings/reviews, like Community Posting, Comment Sections and a CMS Audio Player.Ā 

šŸ‘†This is one of the times in this article where it will sound like Iā€™m pushing a product as an ad, I can guarantee you it is not. Staying true to the message behind Stackradar, these tools are ones Iā€™m pushing because they are fantastic tools that Stackradar could not have been built without.

šŸŽØ The Frontend

Iā€™m a product designer by trade, so I spend half my life in Figma ā€” and I couldnā€™t think of a better place to spend it. Originally the design system was built entirely from scratch. But I then discovered DesignCode UI, which I purchased and worked some of it into my existing design system. So itā€™s a combo of custom design and components from the very cool team over at Design+Code.

āœ… Project Management

Task management tools are everywhere, but Iā€™ve never found one that truly hits the mark for me. Currently I use both Airtable and Notion. While Airtableā€™s interfaces feature is certainly powerful, itā€™s missing some important features (itā€™s a spreadsheet app after all). Notion is šŸ’Æ but doesnā€™t have the same speed and capacity to manage, maintain and update the CMS like Airtable does.

Iā€™m also big on UI in the tools I use, and Notionā€™s UI is one of the best. I use Whalesync again (told you they were cool) to sync tasks between Airtable and Notion. This allows me to create and action tasks linked to the CMS in Airtable but also take advantage of Notionā€™s powerful task management features and automations.

Linear has to be my favorite task management toolā€Šā€”it isnā€™t a fit for Stackradarā€˜s use case, but I wanted to give it a mention because I use it for everything else I do.

Because Iā€™m always looking for ways to test no-code products and further my development skills, Iā€™m now actually building my own task management system just for me to manage Stackradar and a few other projects Iā€™m working on. Itā€™s a work in progress, but Iā€™ll be sure to detail this more fully once itā€™s done.

As a quick run-down, Iā€™m using Xano as the backend, Webflow as the front-end and Wized as the middle-man. Iā€™m planning to eventually do the same for the back and front-end of Stackradar, but Iā€™ll be up-front and say thereā€™s definitely a learning curve with that stack. As Iā€™m learning to build with these tools Iā€™m creating guides and resources to help other people in the no-code space master these tools, itā€™s an exciting space.

šŸ‘„ User Experience

For my site analytics I use both Google Analytics, Search Console and Plausible (which is a great tool, highly recommend). I have a separate Airtable base where I quantify analytics and search console insights to try and identify user pain points & trends. But to be honest ā€” as powerful as I know user data can be ā€” I believe that for a smaller product/platform, the most powerful data you can get is from talking to your users.

I regularly engage the Stackradar community (powered by Memberstack) and ask them for feedback, I donā€™t use any templates when I chat to my users. Iā€™m all for authenticity and paying attention to every person who gives their time to Stackradar (though I realise this is a privilege as a small platform, and isnā€™t always possible).

ā˜Žļø CX and Comms

I am a big fan of Gleap, which powers both Stackradarā€™s User & Customer Experience. I currently use their chat, bug reporting and feature requests features, but plan to extend on this and use their AI support bot, help docs, knowledge base and other awesome features in the future.

For the massive set of features they offer their pricing is really competitive, starting at just $39 USD p/m for a massive set of features that other products are charging hundreds per week for (also use this link for 20% off ā€” again I realise this sounds like an ad but I genuinely love this tool)

I am also a big fan of Attio which I use to communicate with the people and companies behind the tools listed, as well as outreach to cool & interesting founders & creators to collaborate.

šŸ’ø Revenue

I donā€™t hide the fact that I use affiliate links, Iā€™m affiliated with around 40% of the tools listed. But I choose products that I think have good, genuine value first, then if they have an affiliate program itā€™s a bonus. I also never allow bias into the tools I select to be featured in stacks, resources and marketing. I started Stackradar with genuine intent to help people access digital transformation, and I hold myself accountable to that (you can too).

šŸ“ Quickread ā†’ Products Mentioned

šŸš€ Whatā€™s next

As the Stackradar community has grown Iā€™ve found myself surrounded by some really cool people with really cool ideas. With their help hereā€™s some of whatā€™s in the works:

šŸŽ deals & discounts

šŸ¤– an AI form to assess your needs and curate your stack

šŸ“š learning curve analysis & rating for each tool

šŸ“– tool-specific guides & resources to help people discover AND learn how to take full advantage of every tool

šŸ’„community upvoting & public profiles (TY Supersparks)

āœŒļø Product Hunt

Weā€™re currently live and open for votes on Product Hunt, if you had some time to spare and share, a vote helps us keep growing this awesome community!

Happy stacking šŸš€

ā€

0 Responses
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
or register to comment as a member.
John Smith
7 Seconds Ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Reply
--
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
or register to comment as a member.
John Smith
7 Seconds Ago

Lorem ipsum dolor sit amet

Reply
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
or register to comment as a member.
Load more comments

How I built Stackradar without a line of code using Webflow, Supersparks, & other tools.

From product designer to building a directory & community with no code to the number 4 product of the week on Product Hunt šŸ”®

How I created a community & directory using Webflow, Supersparks, & other nocode tools.

Stackradar is a directory of 400+ vetted tech tools and resources to help everyone discover & build game-changing tech stacks. I built this platform from scratch without any technical experience - something 100x more accessible in 2024 thanks to tools like Webflow and Supersparks.

For a brief run-down on what Iā€™ve managed to build, currently in Stackradar features include:

šŸš€ 400+ curated tools

šŸ‘‰ Hand-picked & published by humans (1 human but she works fast, swear)

šŸŖ© Curated stacks by industry

šŸ”® Tech stacks shared by founders and startups

šŸŽ Free membership to save tools & share experiences

ā­ User reviews & commenting

šŸ—‚ļø Browse by category, price, integrations & more

šŸ‘€ Tools regularly monitored & updated

āœ… New tools added every week

Stackradar's tool directory
Example of Stackradar's tool page

In honor of our recent Product Hunt launch, coming in at #2 of the day and #4 of the week, I wanted to break down exactly how I built Stackradar, so if youā€™re a non-technical human with an idea you want to bring to life and no idea how - now you hopefully can.

šŸ› ļø Why I built Stackradar

Thereā€™s lots of incredible tools out there. But thereā€™s too many, and I find sometimes I get so carried away trying out new stuff that I forget what I was ever trying to do in the first place.

But what spurred the creation of Stackradar was actually a conversation with my housemates (both business owners) in which they asked me what I meant by ā€˜Atlassianā€™. After that day I made a point to ask anyone & everyone (offline) if they knew what Atlassian was, or Notion, Intercom, Product Huntā€¦ 8/10 people said no.

Since that fated ā€˜Atlassianā€™ day Iā€™ve also noticed how often people ā€” from small business owners to CEOā€™s and management teams ā€” are choosing the wrong products, or outsourcing and spending money where it doesnā€™t need to be spent.

So I bootstrapped Stackradar to help āœØeveryoneāœØ ā€” from tech startups & indie makers to beauty salon owners & architects ā€” learn, discover and build carefully curated & integrated stacks to transform, streamline and scale their work.

šŸŒ Democratizing digital transformation

95% of the tools on StackRadar require zero coding or development experience, meaning anyone can configure and build solutions to break through bottlenecks, 10x productivity and open doors to scale you never thought possible.

I know this is possible because 2 years ago Iā€™d never built a website in my life, let alone a community and directory.

But then I got started with Webflow, and it all snowballed from there. Coming from a design background (and believing I didnā€™t have a technical bone in my body) Iā€™m consistently blown away with how progressively accessible the world of no-code has become. Supersparks - for example - allowed me to embed user reviews uniquely on each tool page, and I set it up and designed it to suit the brand in about 30 minutes (tops).

Iā€™ve worked with startups for a few years ā€” I manage a yearly startup conference here in Australia, and Iā€™ve seen too many people with incredible ideas lose out on funding or exposure because they didnā€™t have the resources to develop an MVP.

Iā€™m here to say that the resources are there, and the possibilities have become endless. Stackradar took me a while to develop because I was learning how to do everything as I went, but to test my skills I recently replicated the build to see how long it would have taken me had I known how to go about it from day one.

How long did it take me?

One day.

šŸ—‚ļø The CMS

Every bit of content you see on Stackradar is created and updated in Airtable, then replicated in Webflowā€™s native CMS. Categories, stacks, resources and price filters are all their own ā€˜tablesā€™ or ā€˜data setsā€™ that interlink with one another.

Stackradar's category pages with CMSĀ references

When I find a new tool, I add it to a separate dataset called ā€˜Stagingā€™. This then triggers an API call to URLbox which takes a screenshot of the products homepage. I check the screenshot, sometimes I re-do it myself, or if the company has a press kit Iā€™ll find that and use their content from there. I then use a script I added to my Airtable base to compress the webpā€™s to optimise site performance using TinyPNGā€™s API, you can see how here.

I donā€™t use AI to scrape and write any of the information about the products, I write it all myself ā€” taking info from the productsā€™ various marketing pages and ā€˜aboutā€™ sections. Yes, itā€™s time-consuming. But in the age of AI, authenticity is everything.

Once Iā€™m happy with the draft, I click a button set up in my Airtable interface that triggers an automation to duplicate the record cell for cell in the live data set.

šŸ› ļø The Backend

Once added to the live data, Whalesync picks up on the new record and duplicates that into the actual Webflow CMS. Whalesync monitors and updates any changes between Webflow & Airtable and updates accordingly. Itā€™s an awesome tool - especially for directory & programmatic SEO websites.

šŸ” Advanced CMS Functions

The entire search engine is powered by Jetboost, itā€™s incredibly user-friendly and easy to configure. It powers the search page and the ā€˜save/likeā€™ feature on each tool for logged-in users (TY Memberstack).

ā­ Community engagement & UGC

The reviews on each tool page is powered by Supersparks (a Webflow approved app) which automatically integrates with Memberstack ā€” special mention to Supersparksā€™ founder Ian Ruta. For one, the superpowers heā€™s built for Webflow in Supersparks are awesome tools with really competitive pricing. For two, he is a really talented and authentic founder.Ā 

The reviews section I was able to custom-designed in Webflow with Supersparks

Before publishing the platform he was responding to my queries on the Supersparksā€™ setup within minutes, no matter the time of day. If youā€™re a Webflow builder, Supersparks offers a tonne of awesome features on top of ratings/reviews, like Community Posting, Comment Sections and a CMS Audio Player.Ā 

šŸ‘†This is one of the times in this article where it will sound like Iā€™m pushing a product as an ad, I can guarantee you it is not. Staying true to the message behind Stackradar, these tools are ones Iā€™m pushing because they are fantastic tools that Stackradar could not have been built without.

šŸŽØ The Frontend

Iā€™m a product designer by trade, so I spend half my life in Figma ā€” and I couldnā€™t think of a better place to spend it. Originally the design system was built entirely from scratch. But I then discovered DesignCode UI, which I purchased and worked some of it into my existing design system. So itā€™s a combo of custom design and components from the very cool team over at Design+Code.

āœ… Project Management

Task management tools are everywhere, but Iā€™ve never found one that truly hits the mark for me. Currently I use both Airtable and Notion. While Airtableā€™s interfaces feature is certainly powerful, itā€™s missing some important features (itā€™s a spreadsheet app after all). Notion is šŸ’Æ but doesnā€™t have the same speed and capacity to manage, maintain and update the CMS like Airtable does.

Iā€™m also big on UI in the tools I use, and Notionā€™s UI is one of the best. I use Whalesync again (told you they were cool) to sync tasks between Airtable and Notion. This allows me to create and action tasks linked to the CMS in Airtable but also take advantage of Notionā€™s powerful task management features and automations.

Linear has to be my favorite task management toolā€Šā€”it isnā€™t a fit for Stackradarā€˜s use case, but I wanted to give it a mention because I use it for everything else I do.

Because Iā€™m always looking for ways to test no-code products and further my development skills, Iā€™m now actually building my own task management system just for me to manage Stackradar and a few other projects Iā€™m working on. Itā€™s a work in progress, but Iā€™ll be sure to detail this more fully once itā€™s done.

As a quick run-down, Iā€™m using Xano as the backend, Webflow as the front-end and Wized as the middle-man. Iā€™m planning to eventually do the same for the back and front-end of Stackradar, but Iā€™ll be up-front and say thereā€™s definitely a learning curve with that stack. As Iā€™m learning to build with these tools Iā€™m creating guides and resources to help other people in the no-code space master these tools, itā€™s an exciting space.

šŸ‘„ User Experience

For my site analytics I use both Google Analytics, Search Console and Plausible (which is a great tool, highly recommend). I have a separate Airtable base where I quantify analytics and search console insights to try and identify user pain points & trends. But to be honest ā€” as powerful as I know user data can be ā€” I believe that for a smaller product/platform, the most powerful data you can get is from talking to your users.

I regularly engage the Stackradar community (powered by Memberstack) and ask them for feedback, I donā€™t use any templates when I chat to my users. Iā€™m all for authenticity and paying attention to every person who gives their time to Stackradar (though I realise this is a privilege as a small platform, and isnā€™t always possible).

ā˜Žļø CX and Comms

I am a big fan of Gleap, which powers both Stackradarā€™s User & Customer Experience. I currently use their chat, bug reporting and feature requests features, but plan to extend on this and use their AI support bot, help docs, knowledge base and other awesome features in the future.

For the massive set of features they offer their pricing is really competitive, starting at just $39 USD p/m for a massive set of features that other products are charging hundreds per week for (also use this link for 20% off ā€” again I realise this sounds like an ad but I genuinely love this tool)

I am also a big fan of Attio which I use to communicate with the people and companies behind the tools listed, as well as outreach to cool & interesting founders & creators to collaborate.

šŸ’ø Revenue

I donā€™t hide the fact that I use affiliate links, Iā€™m affiliated with around 40% of the tools listed. But I choose products that I think have good, genuine value first, then if they have an affiliate program itā€™s a bonus. I also never allow bias into the tools I select to be featured in stacks, resources and marketing. I started Stackradar with genuine intent to help people access digital transformation, and I hold myself accountable to that (you can too).

šŸ“ Quickread ā†’ Products Mentioned

šŸš€ Whatā€™s next

As the Stackradar community has grown Iā€™ve found myself surrounded by some really cool people with really cool ideas. With their help hereā€™s some of whatā€™s in the works:

šŸŽ deals & discounts

šŸ¤– an AI form to assess your needs and curate your stack

šŸ“š learning curve analysis & rating for each tool

šŸ“– tool-specific guides & resources to help people discover AND learn how to take full advantage of every tool

šŸ’„community upvoting & public profiles (TY Supersparks)

āœŒļø Product Hunt

Weā€™re currently live and open for votes on Product Hunt, if you had some time to spare and share, a vote helps us keep growing this awesome community!

Happy stacking šŸš€

ā€

About the author
Claudia Nathan

Create a custom-designed online community with Webflow
Nocode