It’s never been easier to start building powerful software with Bubble. Our visual programming tool makes it easy to intuitively design and program beautiful, dynamic products with no code. We’re driven to make software development something that’s accessible to makers of all backgrounds. Bubble can be used to build marketplaces, directories, and even community forums.
This post will walk through a tutorial for building a no-code LinkedIn clone using Bubble. Whether you’re looking to build a professional social network of your own, or you’re just interested in utilizing some of the core features of the platform, this guide will share how to start writing the underlying logic for your product.
Throughout this guide, we’ll highlight how to build the following key features from LinkedIn:
- The ability for users to create & edit their own profiles
- User profiles - displaying dynamic content
- A home page that displays dynamic user posts
- A search function to find users across the platform
- The ability for users to publish content across the platform
- The ability to for users to like and comment on posts
- A function to send connection requests to users
Steps to build a no-code Linkedin clone include:
To get started, you’ll need a Bubble account (sign up here - it’s free). 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 LinkedIn clone.
When you start building in Bubble, you can actively choose to begin designing the user interface of your product, or you can focus on creating the necessary fields within your database.
For this walkthrough, we’ll initially focus on the core design features you might want to include in your LinkedIn clone. These might include:
- Home page - Including a search bar, a repeating group of user-generated posts, and any relevant navigation menus
- User profiles - A page where your users can view profiles and send connection requests
- Settings page - A portal where users access and update their personal profile information
A major feature of 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 LinkedIn clone, you’ll only need to create one user profile page. We can then write the necessary logic to display data that’s specific to a unique user (we’ll also cover this in more detail soon).
Configuring your database
Once you’ve mapped out the design 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 building a LinkedIn MVP, we’ll need to create the following data types & fields:
Data Type: User
- Job title
- Profile photo
- Cover photo
- Skills - Note: If you’d like a field to display multiple items, choose to configure a data field as a list of multiple items.
- Connections - 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.
Data Type: Post
- Post content
- Post comments - List of comments
- Post likes - List of users
Data Type: Comments
- Comment content
- Comment post
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.)
Updating user profile details
Let’s start by building the logic that enables a user to update the information displayed within their profile.
Throughout this post, we’re instead going to focus on building a function that allows users to update their relevant profile data e.g. name, job title, company, location, profile photo, skills, etc.
Using input fields, you can map out free-text, structured, or file multiple input fields that can be used to update your database.
Once a user has added their relevant details within each input, they’ll click the submit button to update this data.
This button click will be the necessary action to trigger your workflow.
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 fields within your database. Start mapping each data field you’d like to change against each of the relevant inputs.
When the ‘update profile’ button is now pressed, it will update all of the relevant fields with any new values.
Additionally, you can now display this data on a users profile by selecting the relevant data fields they’ve provided.
Creating a post
One of the core features of any social network is the ability for users to create and publish content. 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 home page, you’ll trigger a workflow when the ‘post button is pressed.’
You’ll then create a new thing within your database, with data type set to ‘post.’ Once again, you’ll match the relevant fields necessary to structure your post.
Note: Bubble will automatically create a value based on the creator of the post. This will pull any necessary data like the creators name and profile photo.
Display dynamic content in a feed
Once you’re ready to start displaying user-generated posts within a feed on your homepage, it’s time to uncover the power of repeating groups.
Repeating groups are an element that integrate with your database to display a list of dynamic content.
When using a repeating group, simply structure the top column with the relevant content you’d like to display. This powerful element will then populate a grid based on the content within your database.
Get started by classifying the type of content for your repeating group, then the source in which it will pull data from.
In this instance, the type of content will be posts, and the data source will be all of the posts within your database.
As it’s currently formatted, this repeating group will display a list of all the posts in existence. If you’d like to configure this to display only the posts published by a users connections, you can add additional constraints to the data source.
This constraint will now only display content from only those who are connected with the current user.
Once you’ve created the data source for your repeating group, you can now build the framework for the content that it will display. Start adding dynamic content into the fields that relate to each post's data fields.
Within a repeating group, it’s also possible to build events when actions are taken inside each individual row.
For each post, you might want to create a function that allows someone to click on a user's photo, redirecting them to this user's profile.
When creating this workflow, use a navigation event to send a user to another page. From here, select the page type to be the user profile page. You’ll then need to send additional data to this page so the editor knows which user profile to display.
The data you’ll need to display is that of the current cells posts, creator.
Display dynamic content on user profiles
Once you’ve started populating your database with users, you can easily aggregate the dynamic data of each individual, then display this on their unique profile.
When creating a user profile page, start by changing the page type to the user 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 about a particular user.
Creating likes and comments
As with all social networks, likes and comments are essential to facilitating an engaged community. Bubble allows you to easily create logic to promote these interactions.
You can utilize our icon elements to create like or comment buttons. Getting started with the workflow for likes is a straightforward process.
When the like icon is clicked, you’ll want to make changes to the like field for the current post.
Within our database, likes across each post are measured by a list of users. This allows us to add the user to this data field, increasing the total of all users who have liked the post.
If you’d like to then display the number of likes a post has, you can make use of conditions to update the like text.
This condition is set to display the total number of users who have liked a post, only when the count is above 0.
The process of generating a comment follows a similar workflow, only it will be creating a new thing as comments are their own data entity within our database.
When the post button is clicked within a comment, it will create a new comment. This will include the comment input field, and also the current post within the repeating group.
To allow users to search and click-through to a specific user's profile, you can utilize a search element that displays a list of all current users within your database.
By selecting the content type as ‘user’ and your data source as a list of users from your database, it will display all entries.
To send a user to the relevant users profile, navigate to your workflow editor, then create a new event that is triggered when the value of an element is changed.
You’ll then create a navigation event, setting the destination page as a user profile, and sending the data source of the search box's current value.
This will now redirect you to the relevant users profile when the search value is clicked.
Sending connection requests
A central feature to LinkedIn is the ability to send connection requests to users and grow your network. Within Bubble, you can easily create a workflow to facilitate this engagement.
Your workflow will start when the ‘connect’ button is clicked on a users profile. You’ll then want to make changes to your database. In this instance, you’ll be making a change to the user data type.
You’ll select the current users connections, then add the current page user to this list.
You’ll then also need to replicate this event to the receiving user - adding the current user within the receiving users connections list.
Once you’re familiar with creating custom data fields and displaying dynamic content, you can start getting creative with the experiences you build. You can:
- Use a repeating group to create a job board
- Include additional formats of content within posts - photos & video
- Create a feature that supports private groups
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 social network without any additional costs.
If you don’t want to build your LinkedIn clone from scratch, you can purchase one of the templates made by our community members. Some similar templates to LinkedIn include:
- Linky - Social Network by Zeroqode
- Social Feeds Like Yikyak by Zeroqode
- Neighbor Communities by Zeroqode
- Canvas Social Network by AirDev
Bubble can help you build a LinkedIn 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.