Tool Path

How to build a Product Hunt clone with Webflow, Memberstack & Jetboost

Experience:

Advanced

For those who want to:

  • Build a site that looks and functions like Product Hunt
  • Allow member-only views
  • Allow members to submit products, and view past submissions
  • Allow member upvoting and commenting

At Makerpad, we often get asked by the community for a Product Hunt clone. That is, tutorials showing you how to build a tech stack that achieves functionalities like;

  • Member product submissions
  • Community upvoting and commenting
  • Product and member pages
  • Dynamic filtering

You asked, and we delivered. This tool-path shows you how to set up and build your own Product Hunt clone, chiefly using Webflow, Jetboost, and Memberstack.

Shout out to Sara Saunders, a Makerpad Creator in Residence, for contributing this tool path!

What will you learn?

How to set up Jetboost's CMS dynamic filter template in Webflow Start now ⭢

With Jetboost's 'CMS Dynamic Filter' Webflow template, you can easily get started with the basic functionality of Product Hunt. In this tutorial, we show you how to clone this Webflow project and get started building your Product Hunt clone in just under 5 minutes!

How to set up an upvoting system using Jetboost with Webflow Start now ⭢

Community voting is the core function around which Product Hunt is built. In this tutorial, we guide you through the initial styling setup for your member home page and upvoting system, ready to connect to Jetboost.

How to build a product submission form in WebflowStart now ⭢

You can create a form directly in Webflow to allow members to submit products to your site. This tutorial shows you all the steps you need to follow to get the form set up and link it to your Webflow CMS.

How to set up your Webflow CMS for a Product Hunt cloneStart now ⭢

The Jetboost 'CMS Dynamic Filter' template comes with quite a few CMS collections already, but you need to add a few more if you want to capture comments and members. In this tutorial, you will learn how to set up your CMS.

How to format your Webflow collection list pages for a product templateStart now ⭢

With some simple formatting, you can have individual product pages that include product info, plus 'Related products' and 'See what's shipped' sections. With this tutorial you'll learn how to fully format your product template page.

How to format a member template page in WebflowStart now ⭢

In order to show members the products and comments they are submitting, you need to set up a member template page. In this tutorial, learn how to set up your template with sections for product submission, any previous comments submitted, and any previous products submitted.

How to connect Jetboost to your Webflow siteStart now ⭢

Jetboost is the tool that allows you to add search, favorites, and dynamic filtering functions to your Webflow site. In this tutorial we'll walk through how to connect Jetboost to Webflow so that your search, filter, tag, status, favorite and voting functions all work correctly.

How to set up Memberstack memberships with WebflowStart now ⭢

Memberstack as a tool allows you to manage the members that will be voting and commenting on your site. In this tutorial, you will learn how to set up Memberstack so that you can then integrate it to your Webflow site.

How to integrate Memberstack with your Webflow siteStart now ⭢

Once you've set up Memberstack, you'll need to integrate it with your Webflow site. This tutorial shows you how to make the integration so that you have a fully functional site that allows people to vote and comment.

Testing, troubleshooting, and reviewing your Product Hunt clone in WebflowStart now ⭢

In this tutorial, you'll test out your build and troubleshoot common obstacles.

Basic automations for your Product Hunt cloneStart now ⭢

In this tutorial, we'll cover a few basic automations that you can add to level-up the functionality of your Product Hunt clone site. This includes using member IDs to sync Memberstack profiles with your Webflow member dashboards, and how to set up product, platform and tag IDs to help you with further automations later down the line.

Join today for free and access 200+ tutorials

Join Makerpad today and you'll get access to hundreds of tutorials and educational content to help you create projects, automate workflows, and build software, without writing code.

Learn alongside 4 thousand professionals, no coding required.

Get Started Free

From the blog

visit the blog