Makers of all backgrounds are turning to Bubble to build powerful software with our no code toolset. Bubble's visual editor simplifies the process of designing and developing applications of all kinds. Customers have used Bubble to build marketplaces, directories, and even social networks.
This post will walk through the process of using Bubble to build a white labeled version of Quora. Quora is a renowned Q&A platform where users can submit questions or answer those submitted by the community.
Whether you’re looking to build a no code Quora community of your own, 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 logic for your product.
Throughout this guide, we’ll highlight how to build the following key features from Quora:
- User profiles - displaying a user’s info and listing their recent activity
- A function for users to submit questions to the site
- Search function for questions - The ability for users to search for specific questions based on a query
- The ability for community members to submit answers to each question
The steps to build a Quora clone with no code include:
Get Started
To get started, you’ll need to register your free Bubble account. Then you can follow along as we build a no-code Quora clone.
Register your account on 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 Quora 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. If you’re replicating the Quora platform, some of the core pages you’ll want to include will be:
- Home page - Including a search bar, a repeating group of community questions, and any relevant navigation menus
- User profiles - A page where your users can access and update their information
- A page where users can submit questions
- A page to host each unique question - This will include the question itself, community answers, and a section for users to contribute new answers
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 reflect information about specific users or things from your database.
In the case of your Quora clone, you’ll only need to create one page to host your individual questions. We can then write the necessary logic to display only the relevant content for each question when it’s required (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 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 replicating Quora as an MVP, we’ll need to create the following data types & fields:
Data Type: User
Fields:
- Name
- Bio
- Photo
- Credentials/title
- Submitted questions - Note: Creating a list based on an overall data type will allow you to seamlessly integrate all of its relevant data fields without having to create additional field values.
- Submitted answers
Data Type: Submitted Questions
Fields:
- Question title
- Question content
- Category
- Answers
Data Type: Answers
Fields:
- Original question
- Answer content
Note: Bubble will automatically pull data about the creator of any new ‘things’ created in your database. This will allow you to seamlessly build on top of a creators specific data like their name, profile photo, etc.
Building logic
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.)
Creating a user account
Let’s start by building the logic that enables a user to first create a new profile. Within Bubble, we’ve made this process as intuitive as possible.
Once you’ve created a dedicated login page, it’s possible to reuse elements from our existing library. Within the page dropdown, select the login/sign-up element.
You can easily copy the element template from this page onto your own account register page.
By using the input fields provided, you can then create a workflow that triggers when a user clicks the sign up button.
Within your workflow editor, you’ll then select to sign the user up.
From here, you’ll then match the input fields from the on-page elements with the necessary fields to create a users profile.
Just like that, a new user profile is added to your platform. You can even select to remember the user and send them an automated confirmation email.
Updating user profile details
Once a user has created a new account, they may also need to update their full details, including; their name, profile photo, and bio.
By creating a dedicated profile settings page, we can use additional input fields to add this data into a users profile.
Once a user has added their relevant details within each input, they’ll click the submit button to update this data.
Using the workflow editor, you can select to make changes to a thing within your database upon this action.
In this instance, you’ll want to make changes to the relevant inputs within your database. Start mapping each data field you’d like to change against each of the relevant inputs.
Now, when the ‘update profile’ button is pressed, it will update all of the relevant fields with any new values.
Additionally, you can now display this data on a user’s profile by using elements that match the data fields provided.
Creating a question
One of Quora’s core features is the ability for users to create and publish new questions. The workflow that powers user-generated posts will also follow a familiar structure to the profile editing function, only this time, you’ll want to create a new thing within your database.
On the question submission page, you’ll trigger a workflow when the ‘submit’ is pressed.
You’ll then create a new thing within your database, with data type set to ‘submitted questions’.
Once again, you’ll match the relevant fields necessary to structure your post.
Display dynamic content in a feed
Once you’ve started generating question submissions, it’s time to start writing the logic on your home page to display these as a dynamic list. 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 ‘submitted questions’.
You’ll also need to set the data source as a list of all the submitted questions from your database.
Now you’re ready to start structuring the dynamic content that will be displayed within the grid. Simply map out the top column with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.
Within a repeating group, it’s also possible to create events based on each individual row.
This feature will become useful when building navigational features across your platform. Quora’s homepage only displays a feed of questions, including their description and the creator. It doesn’t, however, display the full list of answers until a user clicks-through to the full question page. This additional content will need to be hosted on your ‘question page’ for each unique submission.
To achieve this event, you’ll need to start by creating a workflow that redirects a user to your question page when the questions title is clicked.
When creating this workflow, use a navigation event to send a user to another page. From here, select the destination page type to be the question (posted) page.
You’ll then need to send additional data to this page so the Bubble editor knows which specific question to display. The data you’ll need to display is that of the current cells question.
Display dynamic content on a questions page
When someone is directed to a specific answer page, you can easily pull this event data and display the relevant content for each question.
In order to build 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 ‘answers page’ to a questions (posted) property.
By classifying the type of content of 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 question.
Submitting and displaying answers
On the page that displays the full question with its existing answers, you’ll also need to add an additional field that allows users to publish new submissions.
Contributing an answer to a question follows the same process of creating a new question itself - only this time, you’ll need to create a new answer, ensuring you properly integrate it with the current question at hand.
On your answer page, both the list of answers and the input fields to submit an answer will be stacked on top of each other. When a user submits their own answer, this repeating group will update in real-time to match your database.
Searching for questions
To allow users to search and click-through to a specific question, you can utilize a search element on your home page that will index all of the current questions in your database.
By selecting the search field as ‘question title’ it will index all entries and even offer search suggestions as they’re typed.
To send a user to the relevant question page, navigate to your workflow editor, then create a new event that is triggered when the value of an input is changed.
You’ll then create a navigation event, setting the destination page as your answer page, and sending the data source of the search box’s current value.
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:
- Include additional content fields within questions - photos & video
- Create groups for topical interests
- Upvote and downvote for answers
Launch
Hiring a developer or dev team to build this app would cost thousands, if not tens-of-thousands of dollars. Well, now you can treat yourself to a vacation, because you can build and launch your app in Bubble for free.
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 forum without any additional costs.
Templates
If you don’t want to build your Quora clone from scratch, you can purchase one of the templates made by our community members. Some similar templates to Quora include:
- Questions like Quora by Zeroqode
- Social Feeds Like Yikyak by Zeroqode
- Neighbor Communities by Zeroqode
- Canvas Social Network by AirDev
Start Building
Bubble can help you build a Quora clone or any other product you choose! It’s never been easier to build something incredible without having to code.
To get started for free, sign up here.
You can also connect with other passionate makers building with Bubble on our community forum.