You no longer need to know how to write code in order to build powerful software. Makers of all backgrounds are turning to no-code tools like Bubble to build products with our seamless visual editor. Our platform simplifies the process of designing and developing applications of any kind. Our customers have used Bubble to build job boards, social networks, and even internal company tools.
This post will walk through the process of using Bubble to build a whitelabel version of Groupon. Groupon is a marketplace for discovering offers and discounts, allowing users to find deals on products and services that align with their interests.
Whether you’re looking to build your own no-code version of a Groupon marketplace, or you’re just interested in utilizing some of the core features from the platform, this guide will share how to start building the underlying framework for your product.
Throughout this guide, we’ll highlight how to build the following key features of Groupon:
To get started, you’ll need to create a Bubble account. You can register here for free - even without a Groupon offer.
We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your Groupon clone.
When kickstarting your project, you can choose to start by wireframing your product design, or building the necessary fields within your database.
In this case, we’ll start by using the visual design tool to shape the user-interface of our product. Some of the core pages you’ll want to include in your Groupon MVP are:
A major feature within Bubble is the ability to send data to a page. This means that you only need to create one generic version of a page that can request information about specific users or things from your database.
In the case of your no-code Groupon clone, you’ll only need to create one page to host each individual offer. We can then write the necessary logic to display only the relevant content for each offer when it’s required (we’ll cover this in more detail soon).
Once you’ve mapped out the display of your product, you’ll then start mapping out the necessary data fields to power your application. We’ll rely on these fields to connect the logic behind your product.
Creating a database in Bubble is a seamless process. Start by listing your top-level data types, then add the necessary fields within each category.
When building you Groupon MVP, we’ll need to create the following data types & fields:
Data Type: Offers
Data Type: User
Now that you’ve structured both the design and database for your application, it’s time to start stitching everything together to make your product functional.
In Bubble, the main way to do this is with “workflows”. Each workflow happens when an “event” occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)
Whether a brand or a moderator is adding an offer to the platform, you can build a private portal to easily support this process. Within your offer portal, you’ll use input fields to map out free-text, structured, or file fields that can be used to update your database.
Once a brand has added the relevant offer details within each input, they’ll click the submit button to create new data within your database.
Using the workflow editor, you can select to create a new thing within your database under the ‘offer’ data type.
You’ll then match the relevant input fields to the data fields within your database.
Once you’ve started creating offers, it’s time to then start writing the logic on your home page to display these as dynamic lists. This can be achieved by utilizing our repeating group element.
Repeating groups integrate with your database to display and update a list of dynamic content.
When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type of content as “Offers.”
You’ll also need to set the data source as a list of all the offers stored in your database.
Note: If you’d like to sort the offers displayed on your homepage by their categories, you can add additional constraints to the data source within your repeating group - only fetching the data with a relevant category.
Now you’re ready to start structuring the dynamic content that will be displayed within the grid. Simply map out the first column with the relevant content you’d like to display; this powerful element will then populate the remaining columns based on your existing data.
It’s also possible to create events based on each individual column of the repeating group. This feature will become useful when building navigational functions across your platform.
Groupon’s homepage only displays an overview of each offer - including a title, an image and a price. It doesn’t, however, display the full details of an offer until a user clicks through to the offer page.
To create the logic for this event, you’ll need to start by building a workflow that redirects a user to your question page when the questions image is clicked.
When creating this workflow, use a navigation event to send a user to another page. From here, select the destination page to be the offer page.
You’ll then need to send additional data to this page so the Bubble editor knows which specific offer to display. The data you’ll need to display is that of the current cells offer.
When someone is directed to a specific offer page, you can easily pull this event data and display its relevant content.
When building this function, you’ll first need to ensure that the destination page type matches the data property that you’re sending within the workflow. In this case, you’ll need to set the offer page to an offers property.
By classifying the type of content on a page, Bubble can easily pull and send relevant data from existing sources.
You can now start adding dynamic content into the fields that display information from a particular offer.
Using Bubble, it’s possible to harness the power of several plugins to easily accept payments and process orders.
In this guide, we’ll be using the Stripe.js plugin to process credit card payments through Stripe.
Note: After integrating this plugin, you’ll need to first configure your API keys within the plugin settings.
When accepting payments, you’ll need to build a checkout interface that allows users to add their credit card details. For the sake of our MVP, we’ll be adding these relevant fields below the purchase button.
You’ll also need to include a Stripe token element next to the payment form. This element won’t be visible to your end-users, but is essential to powering a new transaction in Stripe.
Next, we’ll need to create a new workflow that triggers a Stripe payment when the “Buy” button is clicked.
You’ll begin by selecting the event ‘convert card into Stripetoken A’. Within this event, you’ll need to configure your input fields to match Stripes payment structure.
Once a card has been converted into a Stripe token, you’ll then need to create an additional workflow that automatically processes this token from a user's bank account.
Using the ‘Stripe.js - charge - create’ event, you’ll verify the Stripe token, as well as the final amount to be paid (including the currency).
If you’d like additional guidance when building your payment processing workflow, you can watch a full tutorial in the video below.