Read how the original user cloned Twitter with no code on Bubble in 2015.

After launching in 2006, Twitter has become the go-to platform for real-time news and updates. Users can see tweets on trending topics or international events, written by the people who have something to share, anywhere in the world. With Bubble, you can build your own version of a whitelabel Twitter or the basic structure of a microblogging service and then customize the application with whatever features you can imagine.

Before you start, you’ll need to first register your free Bubble account. Click the button below to get started, then you can follow along as we build our app together.

We also recommend completing the introductory lessons, which will guide you step-by-step through some of the most common Bubble features. This will help you get a running start on building your Youtube clone.

We’ll start off by thinking about the main pages that a site like Twitter needs in order to provide the features your users will expect from a fast-paced social network. These pages will act as the primary interface that your users will use to post updates and make them available to your platform’s community.

Bubble lets you build stunning dashboards and pages that will make your users feel at home, regardless of your design background. If you are a beginner, no problem! You can easily kickstart your project by choosing from one of our community's pre-made templates (see Template section).

One of Bubble’s features is the ability to send data to a page. This means that you only need to create one generic version of a page, with one simple design; from there, Bubble will automatically populate the elements on the page using this data. This information is stored in the Bubble database, which requires no external setup, and Bubble automatically propagates things like images, title, and user description into the right groups and text elements by using the page’s stored data. This means you won’t need to create thousands of different pages for each profile or post.

To build an MVP, we’ll build these pages of the app:

Some users find it easier to start with setting up their data types, which is essentially setting up the database. Every Bubble app comes with a built-in database that you can configure to suit your needs, meaning no setup hassle for you.

We want one data type per type of ‘thing’ we want in the app. Think of a ‘thing’ as exactly that - a thing that you will be showing, storing data on, or using in the app.

Each of these data types should have fields within it that hold properties of that thing. As we continue building the pages, elements on the page will draw upon different fields of different data types.

At its core, our Twitter app will have these data types:

These are the bare minimum fields we would need to get the app working. As we build more features, we would likely add more data types and fields. For example, we can add things like polls, gifs, and more to make our social network really interactive! We can even build a scheduling system that only sets a Tweet to public (we’d need a public data field on the Tweet type that is a yes/no value) when a certain date and time is reached.

You can have as many data types/fields as you like. We can then hide or show different design elements or change the way the app behaves based on those bits of data.

Now that we have some blank pages and the database set up, we’re going to give the web app some actual functionalities by connecting them together and performing some basic actions. In Bubble, the main way to do this is with a list of “actions” grouped in a “workflow.”

Each workflow happens when an “event” happens (e.g. a user clicks on a button or the page is fully loaded), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database” or “hide/show an element” etc.).

To get you started with the basics of the workflows, you’ll need to build the following features:

Here, we’ll design a form and then let the user click a button to save their profile image, handle, and full name. A workflow will tie both the design side (the form) to the data types that we created earlier; this process makes Bubble really powerful for building data-driven apps (apps that store and retrieve user data).

A sample form you could create:

This form includes a few elements:

As we want all of this information to be public, we won’t need to worry about Data Privacy rules for now. If you want to change who can see what, check out the reference here.

Note: Input fields need to match the type of data that Bubble’s database is expecting. For instance, Name fields should have the Content Format of "text," and Profile Picture data field should be an "image," which means we need an image uploader element to get the right type of data. If you had additional fields like Age, they should have the Content Format "number," so that writing alphabetical letters will not be permitted.

Next, save the user’s profile information using a workflow.

Double click the ‘Save Profile’ button in your form and click ‘Start/Edit Workflow’ in the properties menu. This tells Bubble that you want to tie some logic to the button when it is clicked.

Then select the step ‘Make changes to a thing.’ In this case, we are making changes to the user that is currently logged in to our application.

Create the action 'Make Changes to the Current User' using the input’s data as shown above:

(Supporting materials: Lessons on “Saving data” and “Saving and modifying data”)

Create a new page in your no-code Bubble Twitter app to display your tweets or feed (or do it all in one page if you want). Create 1) a multiline input element and 2) a ‘Post’ button element that the user can click. We’ll then set up a workflow to create a new Tweet in the database using the contents of that multiline input element. Later, we can then display a list or feed of all created Tweets from the database onto a page so users can view everyones posts.

This is what the form can look like:

Create the Workflow: click the ‘Post’ button > Create a new thing action > Type = Tweet. (This tells Bubble that when the ‘Post’ button is clicked, we want to create a new Tweet).

In the grey properties menu we can then set the fields we want to save data in to make up the Tweet. Set "Content = MultilineInput’s What do you want to post...'s value" so the Tweets contain the text from your multiline input box. You can skip the Location or Image fields for now (you can always do those later).

Then add ‘Reset relevant inputs’ action after your 'Create a new Tweet' action: this removes the text from the input once the Tweet has been created, so the user can post something else without needing to remove the old text they typed.

That’s it! Now, the Tweet will be saved to the database, along with some default data Bubble automatically adds, such as the user account who created the Tweet, the time it was created, and a unique ID for the Tweet.

Our next step is to create the Tweet feed to view all of the Tweets stored in the database. To do so, we can add a ‘Repeating Group’ element from the Element types on the Bubble editor's sidebar of any size (here there are 4 rows and 1 column).

Set ‘Data Source’ = ‘Search for Tweets - this will show all the Tweets stored in the database (that have been created by users using our earlier form).

Add a text element inside Cell #1 to show 'Current cell's Tweet’s Content.' (Likewise, you can go ahead and add an image element to display the 'Current cells’ Tweet’s Image'.) These will populate each cell in the Repeating Group.

Your users can then scroll the repeating group as they would normally on Twitter and the cells will scroll through all of the different Tweets stored in the database. Repeating Groups are very powerful, and you can add filters or constraints for operations like only showing Tweets created by the current user, or tweets with a certain hashtag.

The great thing about Bubble is once you have learned the basics of creating a piece of data, you can then do a lot more and use the same technique to create other types of data in the database! (See supporting materials: Lesson on “Saving and modifying data”)

To show different tweets to logged-in users vs. logged-out users, create a Conditional on your Tweet Feed Repeating Group.
​

Using the Conditional tab in Bubble for the Repeating Group element, create a conditional statement: 'When Current User is logged in' > Data source = "Search for Tweets" > Type = Tweet, Created By = Current User.

When this condition is met, the Repeating group will show only Tweets that have been ‘Created By’ the ‘Current User’, i.e. the person logged in. This is a great way to show different data to different users. Remember: Repeating Groups can only have one data type each, you cannot change the type of data it shows to anything other than ‘Tweet’ created by Current User - if you wanted to show other users you'd need a separate Repeating Group. (See our supporting materials: Lesson on “Using conditionals.”)

Here are some ideas for more features that can add more functionality to your Twitter app. These are not only features your users will love, but building these will give you more practice with designing pages, structuring the database, and building workflows.

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 $29 per month. Some templates and plugins may cost more, but now you can build all the functionality of a Twitter like platform, validate your idea faster with potential customers and start a tech business without needing to code.

If you don’t want to build your Twitter clone from scratch, you can purchase one of the templates made by our community members. Some templates that demonstrate specific kinds of social networks include:

Bubble can help you build a home or room rentals platform with custom features of your choosing! You can build your idea without code.

To get started for free, sign up for Bubble.

Connect with other users building a social network on our community forum.

​