How To Build A Fiverr Clone Without Code

If you’ve ever needed help to build a website or application, freelance marketplaces like Fiverr, Upwork, or Freelancer.com can be the go-to source for non-technical makers. These marketplaces help connect industry professionals with customers seeking their skill sets.

With the rise of no-code tools like Bubble, makers of all backgrounds are finding it easier than ever to start building their own powerful software - all without writing a single line of code. In fact, it’s now possible to build your own freelance marketplace using our visual programming toolset. Our customers are using Bubble to build websites, messaging apps, and even social networks.

Throughout this guide, we’ll uncover the process of using Bubble to build your own white-labeled version of Fiverr.

Whether you’re looking to build a dedicated freelance marketplace, or you’re just interested in utilizing some of the core features from Fiverr, this guide will share how to start building the underlying logic for an MVP.

The steps to build Fiverr with no code include:

Get Started

Before you start, you’ll need to first register your free Bubble account. Then you can follow along as we build our product together.

New to Bubble? Follow along on our Crash Course introductory videos to get familiar with the basics of Bubble.

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 Fiverr clone.

It’ll also help if you have an understanding of how to create and edit users accounts. We’ve previously covered this in more detail in our article on building a Quora clone.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubbles visual design tool to shape the user-interface of our product. If you’re replicating a version of Fiverr, some of the core pages you’ll want to include are:

• Product upload page - A backend portal where users can list services to the platform
• Home page - Where users can begin searching for services
• Search results page - Displaying a list of relevant products/services from a search query
• Product page - A dedicated page to display the full information about a service
• Checkout page
• User profile - Displaying a list of reviews for each user
  

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.

In the case of your Fiverr clone, you’ll only need to create one page to host your individual services. We can then write the necessary logic to display only the relevant listing on each page when it’s needed (we’ll cover this in more detail soon).

Configuring your database

Once you’ve mapped out the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the workflows behind your product.

Bubble’s pre-built database makes it easy to create different data types with unique fields. When building Fiverr as an MVP, we’ll need to create the following data types & fields:

Data type: User

Fields:

• Name
• Bio
• Photo
• Products purchased - List of products. Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields without having to create additional data points
• Reviews - List of reviews

Data type: Product

Fields:

• Category
• Description
• Featured image
• Price
• Title

Data type: Reviews

Fields:

• Content
• Rating

Building workflows

Now that you’ve structured both the design and database for your application, it’s time to start stitching everything together and making 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.)

Listing a service on the platform

One of the core features of any freelance marketplace is the ability for professionals to list their services for sale as a product.

Before we build any of the core features for our marketplace, we’ll first build a dedicated page where users can create a new listing.

On our create product page, you can start building support for this feature by using a combination of input fields, including; free-text fields, image uploaders or dropdown menus.

Once a user has added the relevant details within each input, they’ll click the list product button to create a new entry in your database.

Using the workflow editor, select to create a new thing within your database. In this instance, we’ll be creating a new product.

You’ll then need to start adding data to the relevant fields within your database. Map each on-page element you’d like to create against its corresponding data field.

Creating a search navigation

Once users have added product listings to your marketplace, we’ll start building features to search and display these across our platform.

With thousands of listings on a platform like Fiverr, users will often search for specific categories through a search bar on the home page. This allows users to input a query, then view a list of all the relevant matches to these keywords.

On our home page, we’ll use a text input field as a search box - allowing users to enter category keywords.

From here, we’ll create a new workflow that classifies a users search phrase, then passes this data through to a separate search results page.

To power this workflow, we’ll create an event trigger that recognizes when an inputs value is changed. The element will, of course, be the text input field.

As we’ll need to add a unique search query to our URL string, we’ll opt to open an external website. This will allow us to customize the URL path between pages.

The URL we’ll be sending the user to will include the current website's home URL + the URL of our search results page + the dynamic query value from our text input field.

Displaying relevant listings from a search query

Once we’ve built a function to support search queries, we’ll now build our page to display the correct search results.

When building our search results page, we’ll start by adding a repeating group element, displaying a list of product offerings that are related to our search category.

Repeating groups are a powerful element that integrate with your database, displaying and updating 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 as a product.

We’ll then update the data source of our repeating group to display only the products that include our URL strings text in their category field.

Next, you’ll be prompted to select which field of the URL you’ll pull this data from. Simply choose to get data from the URL path, not the parameter.

This will now display any product where the category matches an instance of the specific keyword being searched e.g. Digital Marketing

Once you’ve configured the data source of your repeating group, you can then start adding dynamic content into the main row of this element.

Sending data between pages

Sending data between pages is an essential function for most dynamic products. We’ve covered this feature in more detail throughout our introductory lessons on sending data to pages.

Within a repeating group, it’s also possible to send data to a page from an individual column.

This feature will become useful when building navigational features across your platform. As Fiverr’s listing cards only display an overview of each product (including its name, image, and price), you’ll need to display the full listing details for each unique item on a separate page.

This additional content will be hosted on your dedicated product page.

To power this event, start by creating a workflow that redirects a user to your product page when the product's image is clicked.

Within this workflow, use a navigation event to send a user to another page. From here, select the destination page type to be the product page.

You’ll then need to send additional data to this page so the Bubble editor knows which specific product to display. The data you’ll need to display is that of the current cell’s product.

Display dynamic content on a product page

Once a user has been redirected to a specific product’s page, you can easily pull this event data from your workflow and display the relevant content.

On the destination page, you’ll need to configure the page type to be the same data type that’s being sent through your workflow.

In this case, you’ll set the product page to a product property.

From here, you can then start adding dynamic content into your page elements, displaying the information from the product that has been sent in your workflow.

Purchasing a product

Once a customer decides they’re ready to purchase a product/service, they’ll click the complete order button and trigger a new workflow.

From here, we’ll redirect the users to a payment page using another navigation event.

Within this workflow, we’ll select the destination page as our checkout page, and send the data from the current pages product.

On our checkout page, we’ll add dynamic elements to display a summary of the item the customer is purchasing.

We’ll also add the necessary input fields to support a credit card payment.

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.

You’ll also need to include a Stripe token element next to the on-page payment form. This element won’t be visible to your end-users, but is essential to powering a new transaction in Stripe.

When the order now button is clicked, we’ll then create a new workflow that triggers a Stripe payment.

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).

After this step, we’ll also need to create an additional event in our workflow, adding this product to the current users list of purchased products.

By making changes to an item, we can easily update this field within our database.

If you’d like additional guidance when building your payment processing workflow, you can watch a full tutorial in the video below.

Adding & displaying customer reviews

Once a user has purchased a service, they may want to leave a review on the professionals profile to recommend their work to the community.

By building a user profile page, we can not only display information about our marketplace professionals, but also a list of the reviews they receive.

When creating this page, start by updating the page type to a user.

Next, map out the dynamic content you’d like to display from each profile.

We’ll then add a repeating group to this page, displaying a list of reviews generated for this current page user.

The content type of this repeating group, will of course, be a review. Our data source will then display a list of current page users reviews.

Below this repeating group, we’ll add a multiline input and slider element, allowing users to submit a new review.

When the submit review button is clicked, we’ll trigger a workflow that creates a new thing - a new review.

Once again, we’ll match the on-page elements with the data fields needed for each review.

After a new review has been created, we’ll create one additional step to our workflow, adding the new review to the current page users list of reviews.

This will now add the new review to the existing list of reviews in our repeating group.

Additional features

Once you’re familiar with creating custom data fields and displaying dynamic content, you can start getting creative with the experiences you build.

Privacy & Security: Now that you have the basics of your app, don't forget to start setting some privacy rules and conditionals to keep your data secure - starting with roles in the 'Privacy' section of your Data tab. You can also check if you're unintentionally exposing any data with an API checker.

Additionally, you can:

• Add support for different priced packages on services
• Allow customers to add multiple items into their checkout. We’ve covered this in more detail in our previous How To Build guide on Etsy.

Launch

Ironically, hiring a developer from a freelance marketplace could cost you thousands, but now you can build your Fiverr clone by yourself. As you launch and grow in users, paid plans allow you to host the app on your own custom domain, and these start as low as $25 per month. Some templates and plugins may cost more, but you can build all the functionality of a marketplace without any additional costs.

Templates

If you don’t want to build your Fiverr clone from scratch, you can purchase one of the templates made by our community members. Some similar templates include:

• Giggster - Gigs As Fiverr by Rapid Dev
• Freelancing Like Fiverr by Thimo
• Marketplace Freelancers by Dot Studios
• Freelance Platform Like Fiverr by Nalfe

Start Building

Bubble can help you build a Fiverr clone or any other product you choose! It’s never been easier to build something incredible without having to code.

Ready to join the no-code movement? Register your free account here and get started today.

If you’d like additional help when building your product, our thriving community forum is a great place to source actionable advice and resources. It’s not only a great place to search through our existing Bubble examples, but any maker is encouraged to ask questions to help them on their journey.