How To Build A LinkedIn Clone With No-Code Using Bubble

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
over on my homepage here i can see posts in my feed from both companies and individual users if i would like i could add a like to this post i could perhaps even comment on this post here you'll see that that comment will be added to this list of comments to the post and if i'd like to even view this user's profile i could select their profile photo open up their profile page and on their profile here because i'm already connected to this user i could also choose to send them a message that will then open up our inbox page and display a list of all of the messages that i've exchanged between this user [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build a linkedin clone entirely out of no code using bubble bubble's by far one of my favorite no code tools as it gives you complete control over your own custom database the design of your application the workflows that stitch everything together and the ability to integrate with third-party tools and services i've been using bubbles since early 2019 and i'm yet to find another noco tool that matches its rich list of features for those of you who don't know me i've spent the past 12 months working with the bubble team to help write their how to build blog series this series took a list of the top products out there on the market like airbnb uber and instagram and explained the step-by-step process to rebuilding them with bubbles no code tool while this written series helped thousands of no code makers across the world i had plenty of requests to turn this into a video series of my own of course i would just like to point out that this series has no affiliation with bubble at all and it's something that i'm now doing in my own time throughout today's tutorial i'll be explaining the step-by-step process you need to follow in order to build your own linkedin clone this includes a long list of features like registering user accounts allowing users to create and publish posts across the platform of course then also allowing users to engage with those posts with likes and comments creating a home page feed to display those posts building our dynamic user profiles to display the information of users across our platform sending and receiving connection requests creating company pages as well as allowing admins of those pages to create posts on the company's behalf and then of course i'll be explaining how we can create our own feature that allows users to send and receive messages between each other's accounts there's a ton that i want to walk through throughout this tutorial so grab your bubble editor and let's get started the first feature we'll be building out today isn't actually a core feature to the user-facing experience of our application instead we'll need to take the time to create the custom database within bubble that will allow us to power all of the features within our application now for our tutorial today i've just created a notion checklist here which just contains all of the different data types and fields i'll be adding as well as a list of all of the features that we'll be building throughout our build as you can see the linkedin application is quite extensive in terms of how many features it has and i wanted to make sure i covered each of these in as much detail as i possibly could but as i mentioned before we build out our actual user facing application i'd like to take the time to set up the necessary framework and infrastructure we need to power those features and that is through our own custom database now if you've never created your own custom database within bubble before i'm going to be sure to explain each of the data types and fields in as much detail as possible one thing i would just like to note though is that i have created a new bubble editor over here and if we were to open up our data tab here it's just below my recording button but you'll see the data tab within your editor the first thing you'll notice is that you have a user data type already created for you and now this is added by default because in order to register a user's account you'll need a user data type and also within this data type bubble automatically stores the user's email and password you just won't be able to see the password field in plain text within your database but you'll see here that there is a field to register the user's email address and one thing i'd just like to also point out at this point in our tutorial is that you might see that there is a heading here that displays that privacy rules have been applied to this data type and so if we click into this what you'll see is that bubble has essentially added a default privacy rule into your database and what this privacy rule means is that by default only users will be able to see their own content that they create within our platform so let's say if a user was creating a linkedin post that would be published into a home page feed the user who has logged in and had created that post would of course be able to see that but any other user across our application wouldn't and that's actually not the experience we want to create here instead we want users to be able to publish and create content and allow other users with accounts to be able to see and engage with that content so what we'll actually need to do is delete this privacy rule here as it will allow us to create the experience we need throughout our linkedin build today if we were to then also head back over to our data types tab here you'll now see that our user data type is publicly visible one thing i will just note is that when you create a new data type which i'll be explaining how to do in a moment we'll just need to make sure that this option here is not checked because if this is checked it will automatically add the same privacy rule that was added onto our user data type onto any additional data types that we create and now before we build out all of the data fields within our user data type i'd just like to run you through all of the different data types that we'll be creating today throughout our linkedin build and the way i like to structure my database in terms of data types and fields is that if something needs to be created within my application it should have a data type so you'll see here i have a user data type because users will create accounts and then you'll see i have a company data type because company pages can be created within our application i have a data type that is a post because these will be the posts that are created when a user would like to share some content and then i have the post comment data type because every time someone would like to engage with a post we'll need to create a new comment and then finally i have a chat data type which is essentially a chat between two users and then finally i have a message data type so every time someone wants to send a message we'll need to create that within our database and now the first thing we'll need to do within our database is actually add in all of these data types and then we can start to build out all of the underlying data fields and you'll soon see that we will link some of those data fields back to different data types which just allows us to create a truly relational database so if we jump into our bubble editor here i will start by adding in all of the additional data types i had listed so our user data type had been added by default but i'd now like to add in our company data type then there was our post data type then of course our post comment data type our chat data type and then finally our message data type and now that we've finished adding in all of our different data types we can add the data fields which will store any relevant data within that particular category so we'll jump back into our notion dock here and under our user data type here you'll see i have a list of different fields and this is all of the information and data that i'd like to store for every user that registers an account within our application so this is things like their name their profile photo and even their job title and so if we jump into our bubble editor here we can open up our user data type and we can start adding in the necessary fields to power the user accounts so as i mentioned the first field was the name of this user and this field type will just be a text field type i will create that then for the user there was also their profile photo and as you'd probably guess this will be an image field type because we'll be storing an image for that field and while we're working with our profile photo i'd like to add in our cover photo and this will be the photo that's displayed at the top of our users profile page this of course will also be another image i can create that then after our cover photo i'd like to add in an about field so this is the equivalent to a description or a bio about this user and this of course will just be a text field i can create that then we'll add our job title field this will once again just be a standard text field followed by our city field which again will just be a standard text field and that of course will be a city or region that a user can list that they live in within their profile and now i would like to add in a field called company and this will be a listed company that a user has registered that they work for and because we have a data type dedicated to each company i would like to link this field through to that company data type which just means at any point throughout our build we can reference the information stored under each company so let's say that a user had listed that they worked for a company like uber what we could do in their profile is list that company as well as any other information stored about that company so something like the company's logo or even the size of the company and of course i'll be explaining that more detail when we get to that step within our build but for now i'm just going to create this field and then the last two fields i would like to register is first of all the list of connections that this user has so these are all the users that someone is connected with and as i just mentioned because we're connecting users with different users the field type here will need to be set as a user and because one person on our platform can be connected to more than one person at a time i will need to select that this is a list with multiple entries i can choose to create that and then the very last field i'll need to create is just a list of connection requests so these are the users who have sent the current person a connection request but had not yet been accepted or declined and once again this field type will be a user and because someone can have more than one connection request at a time this will be a list of multiple entries we can create that and then if we jump back into our notion dock we can check off that we've finished adding in all of the data fields for our user data type which means of course we can move on to our next data type which is the company and so for every company that's created i'd like to register pretty much the same information as a user profile so things like the name the tagline the logo and also a list of all the people who follow this company so i'm going to jump back over into my bubble editor here i'll open up our company data tab and the first field i'll be adding is the name of this company this will be a text field type then the next field is the tagline for this company this will once again be a text field type then there was the logo for the company and similar to our user profile photo this field will be an image type i will create that and then we'll create another field for the cover photo so similar to user profiles the company profiles that we'll be creating later on in our build we'll also need a cover photo this can of course be an image field type and following that i will add in a field type for the company size and now this field type will be a text entry because i'm not going to actually store this as a specific number instead this will just be a written range so this could just be something like 0 to 10 employees 10 to 50 employees or 50 plus employees so making this as a text field will give us complete control over how we display that information of course later on though if we would like to perform a count of exactly how many employees have listed that they work at a company i'll be showing you how we can create a feature to do that but for now i'm just going to select this as a text field and choose to create that then following this field i'll be adding in a website field so this will just allow companies to add in a link to their website which of course is just a text field then there was the industry that this company belongs to which once again would just be another text field and now i can start to add in some of the relational fields i had listed within my notion doc the first was a list of admins which is a list of users who actually will have control to make changes to this company within our database and because i would like to allow certain users to have access to this company i'm going to select that this field type will be a user type and of course more than one user at a time can have access to be an admin so i will select this is a field with multiple entries and then the next relational field will be a list of followers so these are all of the users who have listed that they'd like to follow this company so once again this field type will be the user type and i will select that this is a list with multiple entries and then there's one last field i'd like to add and this is just a published status for this company page so i'm going to type in the word published and what i mean by this is that when a company is created within our database i would like to store a default value that recognizes that it should not be published in our application so that way it doesn't just automatically start displaying in a user's feed instead i'd only like to update the company status to published once an admin has updated all of the information stored for that company which means that if someone stumbles across the company page it's actually going to have some content on it it's not just going to be blank so i'll set the field type here to be yes or no meaning it will be published or it won't be published i'll choose to create that and then what i'd like to do is set the default status for this field to be no so that whenever a company is created by default it's not going to be published and from there that's all the fields i'll need to add within my company data type so i can jump back into notion and check those off the next data type i'll need to build out is the post so every time a post is created within our database and published to our linkedin feed we'll just need to store some information within it so this can be things like the actual text content of the post itself an image if there's an image attached to the post as well as a few other fields which i'll explain as i add them into our database so under our post data type i'm going to start by adding in the text content which will just be a field type of text as i've mentioned before and then i'd like to add another field which is the image of the post so of course we'd like to allow users to not only just create text posts but also image posts so i'll be selecting that this field type is an image i'll create that and then on this post i'd also like to store a number of how many users have liked the post so i'm going to create a new field here and i'll be calling this likes and essentially later on now build when i explain how to build out the like feature i'm going to store this data field as a list of users and then every time someone likes a post i'll add them to that list of users and if they were to unlike that post i can easily just remove them from that list of users and what you'll soon find out is that bubble is also great at counting the total number of entries within a list so if i'd like to display how many people have liked the post i can just count how many users are within this list and then easily just display that next to a post so this field type is going to be a user and i'll select that this is a field with multiple entries because more than one person can like a post i'll create that and then the last field i would like to add in is called created company and so this will only be applicable when someone creates a post from a company page not their own user profile because essentially later on in our build i'd like to be able to identify in our home page feed posts that are created by users and posts that are created by companies and so by storing the value of a company on a post only when it's relevant we can easily identify which company page has in fact published this post so i'll select that this field type will need to be a company because i'll be linking this to a company page and i won't need to select that that's a list with multiple entries because only one company can create one post at a time i will select to create that for now and then i can jump back in to notion here and check off that i finished adding in all of the data fields for our post data type the next data type i have here is the post comment so every time someone would like to create a comment we will add that entry into our database and we can link this comment back to a particular post that the user would like to publish it on so if we jump into notion we'll open up our post comment data type and the first field we'll be creating is called content so this is actually just the text of the comment itself so that means that this field type will just be a text field type and then the next field i'd like to add is called the og post so essentially every comment that's created in our database will need to be linked back to a post and this is how i can do that so i'll be selecting that this field type is a post and then whenever someone adds a comment on a post i'll just be storing what post this belongs to so when someone then views a post i can display a list of all of the comments that belong to it i will create that field jump back over into my notion dock here and now i just have two last data types left one is a chat and one is a message and you'll also find that these data types will be linked together as well so the first data type is a chat so every time someone would like to message someone within our application i'm going to create a chat between those two users so if we jump into bubble open up our chat data type i'm going to create a new field and call this chat users and this field type will be a user field type but i'll be selecting that this is a list with multiple entries because of course a chat will contain two users not just one and then when a chat is created in our database later on i'll be adding both the users of that chat so we can display that within their inbox page and of course i'll be running you through that in more detail when we get to that point but for now i'm just going to choose to create that data field and that's all i'll actually need to add to our chat data type it was actually pretty straightforward if we jump back into notion i can check off that i've added in that single data field and the next data type is just the message type so every time a message is created within a chat i'm going to need to link that back to the original chat between two users so what you'll find is that the messages actually have a similar relationship to the chat data type like the post comment did to the post data type so over in our bubble editor i'm going to open up our message data type here create a new field and the first field i'd like to create is called content so this is the actual text of the message itself so this field type is a text type i'll create that and then finally whenever a message is created within our database i'd like to link this to a chat so that way when that chat is opened i can display a list of all of the messages that belong to it so i'll create a new field and i'll call this og chat so this is the original chat that a message should belong to and this field type will need to be a chat type and i won't be selecting that this has multiple entries because of course one message can only belong to one chat at a time i will then select to create that field and that is the very last data field we'll need to add within our database i can just check those off within my notion dock here but as you can see it's never been easier to create your own custom database within bubble without writing a single line of code of course taking the time to set up your own custom database is essential if you'd like to get the most out of your build after configuring our database we can finally move on to the list of features that i have laid out for us in our build today and as you can see there is quite a few features and particularly with this builder i found there was a few little specific new answers that were important to follow so i'm going to be sure to explain each of those in as much detail as i possibly can just to make the whole process of creating your linkedin platform as easy as possible but if i scroll on up my list of features here i can see that the first feature i'd like to create isn't necessarily a core feature that users will be interacting with in our linkedin product but it's a necessary feature nonetheless and that is a feature that allows users to register accounts within our platform and then once they have registered an account i would like to redirect them through to a settings page where they can then update any additional information they'd like to add to their profile this one's a fairly straightforward feature to build out so let's just jump right into our bubble editor and we can get started over in my bubble editor here i've created a brand new application and what i'd like to do is start by selecting from our page drop down menu here and then within this i'm going to select to add a new page into our application and i'll be calling this page register i will create this and on this page the first thing i'll be doing is just updating the background color to be just a light shade of gray so that way when i add any input elements onto this page i'll be able to see where they sit in relation to the overall dimensions of my page and if i was building out a similar registration page to the current linkedin experience the first thing i'll need to do is add an element on the page which is the linkedin logo so from my visual elements tab here i'm going to select to add in an image i'll drag this out across my page and at this point in time i have a static image stored on my local device that i'm going to upload and as you can see i have just a static image of the linkedin logo i'm going to then right click on that and center that horizontally in my page and then below this what i'd like to do is just add a text heading which again is the same text that linkedin uses on their own registration page so i'm going to select to add in a text element i'll drag this across our page and then i will update this to display the static heading which is make the most out of your professional life and what i would also like to do is update the style of this to just be the h2 style heading throughout this tutorial i'm going to touch base on a few little design pieces here and there for our build but i'm not going to focus too much on creating my own custom design styles i'm just going to try and use the default ones that bubble has which is why i've just selected to use the standard h2 style heading here if i really wanted i could just remove this style after i've selected it and that will actually keep the same formatting and i could just center that within the element box itself and then reduce the width of that and then finally just center that horizontally in my page and maybe just move that up a tad so it's closer to my logo now below these two static elements what i'd like to do is just add a list of input fields that will allow me to register data for a user when they sign up a new account and then after we've added in those input fields i can explain how we can create our first workflow which will allow us to store that data in our database so i'm going to start by grabbing another text element and i'll be adding this to the left hand side of my page here and i'll be updating this static heading to display the word name because i'd like to register the name of the user at this point in our application i'll also update the style of heading here to be the h2 style heading once again and i'll just reduce the width of that element and just move it over to the side here and now below this i'll be adding in an input field so if i scroll on down to the input forms menu i can see there's an option here to add in just a regular input field i'll drag that out and as you're probably aware of right now this input field will register the user's name in an application so i'll be updating the name of this to be called input name and that'll just make it easier for me to reference this input when i would like to store the value of it in our database i could then if i'd like just move this across so it's in the center of our page and just move it up a tad there as well and then from here what i'd like to do is actually copy both of these fields i'll drag this below and then i can update the static text here to display the word email because i'd like to now register the user's email address and i would then also like to update the name of this input field to be called input email but while i'm here i'm also going to need to update the content format of this input field so because we're storing the value of an email address we're going to need to select that the value of this should be an email address and what that'll do is it'll just allow bubble to validate that whatever input value is stored within this field it will just need to equal the same formatting of a valid email address and then finally after adding in this field i'm going to select both the heading and the input field again i'll drag this down on a page one last time and in this instance i would like to update the static text to display the word password also just need to expand that text element out so the full word is displayed and then finally i will need to update the name of this input field to be called input password and of course i'll also need to update the content format here to be a password as well which just means that it's going to hide any characters displayed within this input field by default and that is all of the input fields we'll actually need to add onto our registration page here of course i'll be explaining in another module throughout this build how we can build out our settings page that will allow a user to add in any additional information we'd like to store within their profile but just throughout the process of registering an account you'll find that most applications keep this as minimal as possible just because it helps reduce any friction when a user is creating an account but after we've added in our input fields what we'll need to do is add in a button element onto this page and when this button is clicked that of course will trigger our first workflow so i'm going to drag this button element out and on this button i'm going to add in the static text that displays the word register and then i would like to center this horizontally in our page and then i also might just update the style of this button so it's a little bit closer to the same branding as linkedin itself so i have a color code here which is the linkedin blue color code if you'd like that it's double zero seven f fc4 while i'm here i'm also going to update the roundness of this button to be 20 so that way the border is curved around the actual button itself i'll then jump back into my design tab and i can see my button is now on my page and it has been reformatted and from here what i'd like to do is create our first workflow whenever this button is clicked so i'm going to choose to start edit a workflow and within this workflow i'd like to register a new user's account so i'm going to select to add in our first action and within this action i'll be selecting from the account option on the left hand side here and then of course i'd like to sign the user up which means we'll be storing their account in our database now when you're registering a user you'll first notice that bubble requires you to add in both an email and password field and this of course will store the same values that we have stored within our input fields on our page so i would like the value of the email that should be stored for this user in our database to be the same value that's within our input email field on our page and then the value of the password will be the input password value on our page and what i also love about bubble is that when you're registering a new users account you can also save any additional data for this account that you would like and the way i can do that is just by selecting to change the value of another field for this account in our database and the field i would like to change is the name of the user so if i select the user's name here i would like this to equal the same value as the input name which is of course the input on our page now after we've registered a user's account what i'd also like to do is just create an experience that redirects a user through to our settings page once they've actually submitted their details into our database so essentially i would like someone to select the registration button have their account registered in our database and then be redirected through to a settings page where they can add any additional information they'd like to store within their account and the way i can do that is by first of all creating a new page within my application this will be our settings page so if i head to our page drop down menu again i can add in a new page and i'll just be calling this page settings i'll create that and now on this page i won't need to make any changes to it at this present time what i will need to do though is jump back into my registration page here open up our workflow editor and select to open the workflow that we had just created and after the step where we're registering a user's account within our database i'd like to add an additional step and this will be a navigation event and i'll be selecting from the go to page option meaning i'd like to send the user to another page within our app and the destination page that i'd like to send the user to is our settings page and at this point in our build i won't need to worry about sending any data through to this particular page but i will be explaining that in more detail when it's needed later on but for now this is actually all we'll need to do when we're creating our first feature which is the registration page let's jump on over into our bubble development environment and take a preview at what this whole experience looks like over on my registration page here you can see that i have my three input fields which are currently blank so i'm going to add in the values of my new account so my name will be lachlan kirkwood my email address i'll just put as test1 and gmail.com and you'll see that bubble will verify that that is an active email address format and then i'm going to add in a password and you'll see that those characters are hidden by default and when i'd like to confirm that i want to register an account i'm going to select this register button our workflow will run it will create that account within our database and what you'll see here is that we have now been redirected through to a settings page in our application and later on in our build i'll be explaining how we can add some additional input fields on this page which will allow us to store any additional information we'd like about our user accounts back in my notion checklist i'm going to check off that i finished building out the first feature which allowed us to register new user accounts in our application and of course throughout that process i explained how we can add an additional step into the workflow that redirects users through to our settings page once their account had been created now it's time to move along to one of the first user facing features within our application and that is the ability for users to create and publish linkedin posts across our platform and now the reason i'm going to build this feature before we go and actually build out the home page itself is just because i'd like to walk you through the process of what's involved in creating a post so that way when it's time to display those posts on our home page we know which specific data fields to display and that'll help just shape the overall design of the home page user interface let's jump on over into our bubble editor and i can start walking us through the process of creating a linkedin post over in my bubble editor here what i'd like to do is create a new page within my application and that of course will be the home page so i'm going to head to our page drop down menu here select to add a new page and i'll be calling this home i'll choose to create that and now similar to before the first thing i'd like to do on this page is just update the background color to be a light shade of gray so that way when i add any white elements onto the page i can see where they lie in regards to the borders and as i mentioned in this particular section of our build i'm not going to cover too much about the overall design of the homepage yet i will definitely do that throughout the next feature that we build but right now i essentially just want to add a button on our home page that when it's clicked allows a user to start creating a post and when they have finished creating that post i'd like them to submit that into our database and then later on throughout our build we'll be displaying a list of all the posts on our home page like a feed so to kick this process off what i'm going to do is start by adding a group element into the center of my page here this is just going to be a rectangle like that what i'd also like to do is just remove the style of this group so i can update the background color to be white and i'll also update the roundness of the borders here to be 10 just so they have some curved edges and within this group i'd like to replicate the same user interface that linkedin has when a user can create a post so essentially there'll be a profile photo of the user themselves and then a button that will prompt them to start creating a post so i'm going to start by adding in the image element into our group here and within this image i would like to display the current user who's logged in their profile photo so i will insert dynamic data and display the current user's profile photo and i would also just like to make sure that the user's profile photo fits the full dimensions of this image element so i'm also going to select to process this with injects and then i will select the option to resize this image by cropping its dimensions and you'll see later on when i preview the application but that'll just make the image fit completely within our image element here i'll then choose to close that and then what i'd also like to do is just update the roundness of this image element to be 100 because i'd like it to be a perfect circle and then i'll need to match the height and width of this element to be the same so it'll be a square so it'll be 50 pixels wide by 50 pixels high and i can then just move that to the side of our group on our page there and then beside this i'll be adding in a button element across the rest of our group here i'll make that the full length of the group and i would like this button to display the text start a post and in this case i'm going to remove this style for the button here because i would like to update the background color of this button to be white and then i will also add a solid border onto this button so we can start to see where that lies within our white group element i'll make the border color just a gray slash kind of darker black color and then also for the font color i would like to make this 4f4f4f which is just a darker black and now you'll see that this button is visible within our group i'm also going to just increase the height of that and i could center that vertically so it's in the middle of our group here and now what i'd like to do is create an experience that triggers a pop-up element when this button is clicked which will then allow the user to add in the full information of their post so that's where they could type in the actual content of the post itself as well as have the option to upload an image and as i just mentioned i'll be creating this experience through a pop-up element so if i scroll on down to my containers menu here you'll see there's an option to add a pop-up if we add that anywhere on our page what you'll see is the pop-up is just a group that hovers over the page so i personally love using pop-ups because they save you from having to redirect the user through to another page within your application and if at any point the user would like to return back to the position they were on the original page they can just click away from the pop-up and then they will just be returned to that page and of course because that pop-up is hidden by default if you'd like to display it again just open up your elements tree here in the left-hand menu and select the eye icon and that will display this pop-up for this pop-up though i'm going to create a name for this and i will call it pop-up create post and then on this pop-up the first thing i'll be doing is just once again adding the current user's profile photo and their name and then i'll be adding a text and image input field that will allow them to add the contents of this post itself so i'm going to once again select to add in an image element onto this pop-up and within this image i'm going to insert dynamic data and similar to before i'll be displaying the current user's profile photo i would also like to process that with mgx and i will resize to crop the dimensions of it and of course i would like this to be a round photo so i'm going to set the roundness to be 100 and then i'll also update the width and height of this so it's square i'm going to make this 55 pixels wide by 55 pixels high and now beside this i'm going to add in some text and this will be the current user's name so i'll insert dynamic data and display the current user's name i would also just like to change the styling of this text i'm just going to choose to bold it so i'm going to open up our rich text editor here highlight that text and choose the bold option i will then save that and you'll see that formatting has been updated and then below this i'd like to add in a multi-line input field to allow the user to type in the contents of their full post so i'm going to scroll on down to our input forms and i'll be selecting a multi-line input field remembering that a multi-line input field allows users to add in multiple lines of text unlike just a regular input field which allows users to add in as much text as they would like but only on a single line and of course if we select to stretch to fit this content this multi-line input field will continually expand downwards based on how much content is stored within it i'm going to also update the name of this to be called multi-line input post content because this is where the actual content of the post will sit if i really wanted i could just reduce the height of that as well remembering it will automatically expand downwards and i could expand the width of that out as well and now i could also update the placeholder content so this is just the shadowed text that sits within this field until a user types in it and i'll have this display what do you want to talk about dot dot dot and now what i'd also like to do is give the user the option to add an image to a post if they would like and now in order to do that i'm going to need to add in a picture uploaded input field onto our pop-up here so i'm going to drag this out below our actual input field i might just make that a tad bigger while i'm here and now at the moment this picture uploader is looking pretty bland what i would like to do though is just upload a placeholder image that sits within here so it looks like a picture icon which is actually similar to the experience that linkedin has when a user has the option to add an image to their own post now i have an image stored on my local drive so i'm just going to quickly upload that and as you can see i just have an image here which looks like an image icon i'm just going to also update the width of this to be 44 just so it's squared and now although this looks like an image icon this element is still a picture uploader so if a user selects this element it will still allow them to upload any image they would like and then i would like to have that new image replace the static image that i've added what i am going to do first though is just update the name of this to be called picture uploader post image and now one thing i would just like to point out is that this picture uploader itself is quite small so when a user uploads an image it's going to replace the current static image i've added into this element but the preview itself isn't going to be very big so what i'd like to do is add an image element onto our pop-up here that is the full size of our pop-up and i would like that image element to display the same value as the picture that's been uploaded into our picture uploader just so the user can see a full size preview of the image that they've just uploaded so what i'm going to do is i'm going to expand our pop-up down for now and i'm also going to move our picture uploaded down to the bottom of our pop-up and from here i'm going to select to add in a group element onto our page i'll expand that down and i'm going to just remove the style of this group and just add a flat background color i'm just going to make this red for the time being so we can see where it lies on our pop-up and i'll explain why i've used a group in a moment however in the meantime i'm going to add in an image element into this group i'll drag this out so it's the same width as the multi-line input field above that and if i really wanted i could just expand our group down further just so the image is a bit more square and essentially what i'd like to do within this image is display a preview of the image that's been uploaded into a smaller picture uploaded here so for this image element that sits within our group i'm going to give it a dynamic value and i would like the dynamic value of this image to be the same value as the picture that a user has uploaded so i'm going to select to insert dynamic data here and i would like this image to display the picture uploaded post image its value so now it will display a preview of any image that's been uploaded into this picture uploader but of course within our linkedin application there's going to be quite a few use cases where users don't actually want to add an image to their post they might just only want to create a text-based post and in that instance i don't want this group to display because they won't need to preview any pictures that have been added to that post and so this is why i'd chosen to add the picture element into a group here because one of the main benefits to using a group is that you can choose to hide or display those based on any conditions so i'm going to select in our group here and i can update the name of this to be group post image preview and i would like to unselect the option that displays this element when the page is loaded which just means that by default this group and anything that sits within it will be hidden on our page and the other main benefit to using a group is you can also select to collapse the element's height when it's hidden meaning that when this group isn't displayed the space that it sits within will be collapsed so that way any elements that sit below it will simply move on up and take its place but of course now because this group is hidden we're going to need to create a condition on this element that identifies under which circumstances it should be displayed and that will be when a user uploads an image into this picture uploader so i'm going to head to our conditional tab for our group and i'd like to define a new condition and what i'd like to do is recognize when the picture upload a post image when its value is not empty i would then like this element to be visible and i will take that that is true but one thing i would just like to note and this is where you'll start to see the particular nuances of bubbles power come into play is that as you might remember i've already uploaded a static image into our picture uploaded here so technically this picture uploaded field does actually have an image within it and as you can see this is the unique url that bubble is using to host this image and now because our group has a condition that allows it to display when there is a picture in our picture uploader it's automatically going to display a preview of this picture icon and that's not what we want to happen we only want it to display a preview of an image once a user has uploaded their own custom image and so a way we can stop this static image from being displayed is by selecting to copy the url that this image is being hosted at and then we will select to open up our group so our group post image preview we'll open up our conditional tab and we'll just add an additional constraint here that allows this element to become visible so at the moment we're only allowing this group to be visible when the picture uploader's value is not empty meaning it has a picture in it but what i can do is select the and option and i'd like this to also only display when the picture uploader its value the url of the image is not and then i will paste in the url that bubble had added for our static image and now it will not display our group until there has been another image uploaded that is not this thumbnail image and that's all we'll need to create for our group element here i'm just going to quickly move our picture uploader to the side there and then finally what we can do is select to add in a button to the right hand side of our pop-up here and i'd like to type the word post within this and of course when a user selects this post button i would like to create this linkedin post within our database so i'm going to select to start edit a workflow and within this workflow i'd like to select from our data tab and in this case i'll be choosing to create a new thing because we'll be creating a new post so i'll be selecting that the type of thing i'd like to create is a post and now by default all posts published within our linkedin platform will have some text stored within them but of course not every post will include an image so what i'd like to do first is create a new post and i'd like to store the value of the text content for this post and i would like this to equal the value of our multi-line post content and now because not every post will have an image within it i'm going to create a separate step in our workflow that will recognize when the picture uploader has a new value in it i would like to add the picture to the post that's been created and if it doesn't have an image stored within it i would not like to add an image to that post so i'm going to add another step within our workflow select from our data tab and in this case i'm not going to want to create a new thing i'm going to want to make changes to a thing and the thing i want to make changes to is the result of step one in our workflow so that is this post that's just been created so at the moment this post would have been created in our database and it would have some text stored within it from our multi-line input but what i'd like to do now is store the value of the picture uploader so i can select that the image will need to equal the value of our picture uploader element and now it's right here that i also want to explain that you can add a condition onto this workflow step that only allows this step in our workflow to run if the picture uploader's value is not empty and that way if it doesn't have a picture in it it will just skip this step entirely but if it does have an image within it it will add that to this post that's just been created and so similar to the condition we created on our hidden group i'm going to create a condition that only allows this step in our workflow to run when the picture uploader its value is not empty and also when the picture uploader its value the url of that image is not and i'll once again paste in the url of our static image and now this will only allow an image to be added to our post when there is a unique image added by a user who's creating a post and now after a post has been created what i'd like to do is just hide this pop-up element that's currently being displayed and that will just return the user back to the home page so i can open up our workflow editor and in this case i'm going to select from our element actions and i'll need to choose to hide an element and the element i'd like to hide is the pop-up create post and of course because i'm hiding that element i'm also going to need to create a workflow to display that element so if i jump to my design tab and close this pop-up i would like to create a workflow when this start a post button is clicked here and within this workflow i would like to show an element which of course will be our pop-up so under our element actions here i'm going to select to show an element and i would like to show the pop-up create post and now that will trigger the pop-up to be displayed on our page and that's all we'll need to create for this feature right now within our tutorial what i would just like to do before we take a preview at this experience is just remove the color of our group just to make it a white background so it sits within our page i could also just reduce the height of that group so i can move our picture uploader up on our page as well as our button element here i'd like to make that in line with our picture uploader and now we can go and preview our application and see what the experience looks like when a user creates a new post so over on my home page here i'm currently logged in as my lachlan kirkwood account and you can see that my profile photo has been displayed here and if i would like to start a post i can click this button and what you'll see now is that our pop-up has displayed to create a new post and it has my information displayed here again what i can do is just type in some text for this post so i'll say this is a test post and what you'll also see is that by default that group element is hidden on this pop-up but if i'd like to add an image what you'll see is when i select a file that group will then display and it'll also display a preview of the image that i'm uploading so i'm going to select to upload a file here and as you can see after my image has been uploaded into the picture uploaded element it has also displayed a preview of that image within our hidden group here which is now visible and if i would like to create this post i can select to post that that workflow will run it will create that within my database and then it will then close that pop-up and return us to the home page which of course later on in our tutorial i'm going to be explaining how we can display a list of all of the posts published across our linkedin platform below our upload element here on the home page in a feed back in my notion doc i'm going to check off that we've finished building out the feature to create posts within our linkedin application and of course within that i had also explained how you could create an experience where you could attach images to each of those posts after building the feature to create and publish posts across our platform i'd like to move on to i guess one of the real main core features of the application and that is building out our linkedin home page this of course is where most of the user engagement will probably take place as throughout this section of our tutorial i'd like to cover how we can build a home page feed to display a list of all of the posts later on of course i'll also be covering how we can create engagement events like liking and commenting on posts but for now i'm just going to split this into two separate modules just so we can walk through everything in as much detail as possible so let's jump on over into our bubble editor and we can get started over on my home page here the first thing i'd like to do is create a feed of all of my posts that will be displayed below our start a post group here so i'm going to move this group up on our page i'm just going to leave a little bit of space as well just because i'd like to add a search navigation bar in a moment but for now i'm going to add a repeating group element onto our page and if you're not familiar with repeating groups they're a great way to display a list of dynamic data from your database so in this case we'll be creating a social feed based on all of our linkedin posts and when you're adding a repeating group element onto your page the first thing you'll need to do is identify what type of content you'd like to display within each individual row in this case i would like to display a list of all of the posts that have been published within my linkedin application and now like a social media feed our repeating group will display every individual post within a separate row but of course what i'll also need to do is configure the data source of this repeating group so the bubble editor knows which particular post to display on our home page and similar to the real world linkedin experience what i'd like to do is create a social media feed where the posts created by the current users connections are displayed as well as any posts created by the current user so for our data source i'm going to start by searching through our database for all of the posts where the person who created them so the created by field is in the current user so the person who's currently logged in viewing their feed their list of connections which of course in our database was a list of users and while i'm displaying these posts i would like to sort these by their creation date and set the descending value to be yes meaning that the most recent post will be displayed at the top of our grid and that is how we can configure our repeating group to display a list of posts by the connections of the current user but of course what i'd also like to do is create a way to display the posts created by the current user so they can view their own posts within a feed and the way we can do this is by selecting to merge a different data source with this current data source that we've just added so i'll be choosing to close this data source here i'll select the more option and i'm going to type in the word merge with because within this what i would like to do is merge a separate data source with the existing data source so i'm going to select the do a search for option once again i'll be searching for all of the posts similar to before only this time i would like to search for the post where the created by equals the current user so these are all of the posts that have been created by the person who's logged in looking at their own feed and once again i'd like to sort these by their created date and the descending value will be yes so the most recent post will appear at the top and now because we've selected to merge these two data sources together the bubble editor will know to display all of the posts by the current user's connections as well as all of the posts that are created by the current user themselves from here i'm going to then choose to close this data source and now i can update the style of our repeating group i'm going to start by just only displaying two rows with now repeating group and i would also like to expand this repeating group down but before i do that i'm going to need to expand my page so just under the height of my page here i'm just going to set this as 1500 for now i can always change that at a later point in time but this will now give me room to stretch out my repeating group and this will actually need to be quite long because if you remember we can potentially store not only text posts but image based posts and later on we'll also need to store a list of comments that are associated with this post so there's going to need to be plenty of room to fit all of those elements and content in so i'm just going to stretch this down on my page and of course we can reduce that if we find we have any empty space what i'd also like to do is just remove the style of this repeating group for now and just update the border of this repeating group to be a solid color just so i can see where it lies within my page when i'm adding elements onto it before we preview the application though i'll remove that border off so that way it looks like a proper social media feed i can then move that up on our page and now from here i can start to add in the dynamic elements that i would like to display within each post so i'm going to start by displaying the profile photo the name and the job title of the person who has published this post within our feed and instead of adding in just a new image element i'm going to select the image element that we had previously added on our page i'll copy that and i'll then paste this within our repeating group i'll just move that down a tad and i will just need to update the data source of this image so at the moment this is displaying the current user's profile photo whereas what i'd like to do is display the current cells post so this particular post within our repeating group the creator of that post so this is the person who has published it their profile photo and i would like to once again process this with mgix and select to crop this image so it fits nicely within the constraints i would also then just like to update the dimensions of this image to be 60 pixels wide by 60 pixels high and now beside this i would like to display the name of the person who has published this post so i'll be selecting from a text element and i'll be dragging this out at the top of our post and i'll be inserting dynamic data and i'll display the current cells post the creator of that their name and then i would like to open up our rich text editor here highlight this text and choose to bold in that i'll save that then and what you'll notice by now is that the repeating group is actually replicating the same elements throughout every single row so essentially you only need to design the content in the first row and it will automatically add all of those elements into every other row that you choose to display and of course when we preview this application all of these inputs will dynamically display the data that's relevant to each post but after adding in the creator of this post their name what i'd like to do is just copy this text i'll drag this down and instead of displaying the current cell's post creator's name i would like to display their job title and from here i'm also going to open up our rich text editor highlight this text and unselect to bold that text and then i can just move this text up a tad making sure that it's somewhat in line with my profile image there and now below the details of the person who has published this post i would like to add another text element only this time i'll be dragging this out from the left hand corner of our repeating group and this field will be used to display the actual text of the post itself so i'll insert dynamic data and i'll display the current sales post the text content of that post and of course this will automatically expand downwards if there is more than just one line of text so you only need to worry about adding in just a single line for this element here but then of course after i've added in the text of this post i'd like to also create a feature that can display the image of this post if one has currently been attached to it and similar to the process of creating a post what i'd like to do is add in a group element and then include an image element within that because within this feature i would like to automatically hide that group and only display it when an image is actually attached to this post so i'm going to scroll and down to our containers menu here select to add in a group element i'll drag that out and just for the sake of the process while we're building this group i'm going to remove its style add a background color and just change this to be a light red for now just so we can see where it sits within our repeating group and i'll just be updating the name of this group to be called group post image display and now after i've updated the name of this group i'll need to add in an image element that will allow us to display the image of this post but before i do that what i'll need to do is just store a value within this group so the image element knows which particular post it should be displaying an image for and this is also what i love about groups is that you can store any particular value within them and you can pass that value on into any of the elements that sit within it so for our group here i'm going to update the type of content that it displays to be a post and i would like the data source to be the current sales post so the post within the cell of our repeating group and now once i've configured the data source for this group i can add in an image element i'll just drag this out so it's roughly in line with the text element that we'd had added in above and then for this image element i can insert dynamic data and choose to display the parent group so the parent group is our red group that this image element currently sits within i would like to display the image that's associated with that post and now as i mentioned before i don't want this group to display by default within our repeating group here i'd only like it to display when an image has actually been added to this post so what i'll need to do is select the red group element making sure that i have opened up the group post image display here and i'll scroll on down and unselect that this element is visible on page load and i would also like to select that this element's height should be collapsed when it's hidden and then from here i'll need to open up our condition tab for this group and i'd like to define a new condition that only displays this group when the post that it sits within has a value within its image field so i'll choose to define a new condition and i'll recognize when the current cells post its image field is not empty meaning it will have a value stored within it i would like to select that this element is visible and i will tick that that is true and that's all we'll need to take care of when we're configuring this particular group what we can add below this is now just a count of all of the likes and comments that this particular post has so in order to do that i'm going to just copy this text element we have above where we're displaying the actual text of the post i'll then drag that out so it's in line with the rest of our elements and below our picture element there and under the appearance tab i just like to update the dynamic data that's displayed here so i'd like to display the current cell's post it's likes which if you remember in our database our likes is a list of users so i would like to perform a count of how many users are within that list so if 99 people have liked this post and been added to that list it will display that there are 99 likes and then beside this dynamic data i'd like to display a count of how many comments there are so i'm going to select on a new line here i'll add a space then i'll add a dash and then i'll add another space and that just helps set the formatting so there are spacing between the count of likes and the account of comments i'm about to add but from here i'd like to identify how many comments have been added to this post and because if you remember the comments within our database is stored on a separate data type to the post itself what we'll need to do is actually perform a search through our database and identify how many comments have been posted against this post so i'll insert dynamic data and i'll need to search through our database for all of the post comments where the og post so the original post that that comment belongs to equals the same value as the current sales post so this post within our feed i would like to perform a count on how many there are and now that will return a number of how many comments have been published for this post i'm going to then add another space and type in the word comments so now this field will just display a numerical count of the likes it'll have a dash and then it'll display a numerical count of how many comments there are and just identify that they are comments and this is actually the exact same layout that linkedin includes within their own home page feed so it's quite easy to actually just replicate that process and now below the count of how many likes and comments there are i'm just going to quickly reduce the height of that text element what i'd like to do is add in a couple of different icons one will be a like icon which we'll be using as a like button and the other will just be a comment icon so i'm going to head over to our visual elements i'll select to add in an icon i will drag this out and i'm just going to search for the thumbs up icon here and i want to start by choosing the thumb icon that has a empty color within it so i'll select that and i would also just like to reduce the height of that a tad make it a bit smaller there and now beside this i would like to display the word like so i'm just going to add in a static text element here and this will just display the word like just to indicate to users that that is the like button i can then just close off the width of that text element and then what i'm going to do is just copy both the icon and the text element drag this down on our page and then i'm going to update this icon i'm going to search for a message icon here and i'm going to choose the one with the empty color again and then i would just like to update the text for this to display the word comment and i'll just need to expand the width of that text element out perfect and of course later on throughout our tutorial i'm going to explain how we can create workflows that will trigger when things like the like button is clicked and we can update the count of likes that this post has which will of course mean that the account will update in our text element here as well and then finally the last thing i would like to add within our repeating group for the time being is just a way for users to add a comment into this post although i won't run through that particular workflow right now i want to run through that in more detail throughout a different module in this tutorial but what i'm going to need to do is just expand my repeating group down a little bit more on our page and then i would like to add a profile image of the person who's currently logged in viewing this post as well as an input field that allows them to add a comment so i'm going to select to add in an image element i'm going to actually just copy once again the image element within our start a post group here i'll select into our repeating group and i'll paste that in i'll then drag this down so it's in line with the rest of our elements on the page and i won't actually need to make any changes to this picture element so at the moment it's displaying the current user their profile photo and so the current user is the person who's logged in who could also leave a comment on this post so i won't need to make any changes there what i will need to do though is just add an input field next to this which will allow a user to add a text-based comment and in order to do that i'm going to head to our input forms and i'm going to select the multi-line input field and once again the reason i'm using the multi-line input field instead of just a regular input field is because i'd like to select the option here to stretch the content to fit meaning this will expand downwards if more content is added into it because comments can be quite long within a linkedin post and for the style of this input field the only change i'm going to make is just update the roundness of this to have a border of 20 so that way it just has circular edges around the side of it and then finally the last thing i'll need to do is just add a button below this which allows a user to post a comment so i'm going to need to once again expand my repeating group down but i can see i need to expand my page down as well so once i've clicked on my page here i can update the height let's say to be let's make it 2000 for now we can always change that later and then i would like to just expand my repeating group down again and now i can add in a button element below this and i would like this button to display the word post and i'll just square that off so it's a little bigger and then i can just move that up on our page i might also just move that comment field down a tad as well and that's all i'll need to add within this stage of our build for this home page feed of course as i mentioned before i'm going to explain in a separate module how we can create the workflows to like a post and also leave a comment on a post but for now there's just a few other minor things i'd like to add onto our home page and the first is a way for a user to visit the profile of the person who has created a post so let's say someone's viewing their linkedin feed and they see a really great post from a profile that they'd like to learn more information about what i'd like to do is create a workflow that's triggered when the profile photo is clicked for this user and within that i'd like to redirect them through to a profile page which will display the full information of this user so i'm going to select our profile photo here and i'll choose to start edit a workflow and within this workflow i'm going to select from a navigation event and choose the go to page option and the destination page that i'd like to send this user to doesn't yet exist so i'm going to need to create a new page and i'll be calling this page the profile page because this of course is where i'll be displaying the information of a user's profile and now after we've created that page we're going to need to make one quick change to it before we actually integrate that within our workflow and that is if we open up our page drop down menu and select our profile page jump over to the design tab all i would like to do is update the type of content that i would like to display on this page so because i'm going to need to dynamically display a user's profile information i'll need to update the type of content to be a user and now within our workflow where we're sending someone through to this page we can send through the value of the user who has created a post and then we can dynamically display all of their information across this page and of course when we build out the profile page in full detail i'll be explaining that thoroughly as we go through that process but for now i'm just going to jump back over to my home page here i will select the picture icon within our post i'll open up that workflow we were just creating and within our go to page option i'd like to select that the destination page should be our profile page and the data i'll be sending through is the current sales post the creator of that post which of course is a user and that is all we'll need to create within this step of our workflow back in our design tab though there is just two more features i would like to add to this page the first is just a preview of the current user's profile so if you log into your linkedin account now you'll see next to your home page feed there's actually just a small preview of what your profile looks like in terms of your profile photo your cover photo and then your name and that's an experience that we can replicate here as well so i'm going to choose to add in a group element into our page here and then i'll remove the style of this group give it a flat color and that will be white i'd also like to update the roundness of this group's borders to be 20 so there's just a small curve on the edges of it and then if i'd really like i could just expand my page out a tad as well so i'm just going to make my page a thousand pixels wide and that will just allow me to expand this group out a tad just move it across and now i can start to add in some dynamic elements of the current uses profile so as i mentioned the first thing i'd like to add is just a preview of their cover photo so i'm going to add in an image element here i will just drag this out in the middle of our group for now and i will insert dynamic data and display the current user to the person who's logged in their cover photo and once again i'd like to process this with mgix and resize this to crop it so it fits the right dimensions i'll then close that and then i can move this image element up into the top corner of our group here and just expand that all the way across our group and just for now what i'd also like to do is add a solid border onto this image just so i can see where it actually sits within our group here i can of course remove that at a later time when we actually preview our application but the next thing i'd like to do is just display the current user's profile photo and once again to save time adding that in i'm just going to grab this profile photo within our start a post group i'm going to copy that i will click into our new group here and paste that in i can then drag this down into the middle here and i will update the size of this to be 60 pixels wide by 60 pixels high and i can center this horizontally within our group and once again if i'd like i can just add a solid border on this for now just so i can see where it sits within our group here and then below that i'd like to add the name of the current user who's logged in as well as their job title so i'm going to add in a text element here and within this text element i would like to display the current user their name i will remove the style of this because i would like to center that within our text element and then i will open up our rich text editor and choose to bold this text and then finally i will right click on this text element and center it horizontally within our group i can also move that down a tab below our profile photo and below our user's name i'm going to just expand my group down a tad and i'm going to copy this text element drag this out making sure it is in line with our existing text element and in this case i'd like to display not the current user's name but the current user's job title i will also open up our rich text editor highlight this text and unselect to bold this font and then of course i just want to center that horizontally making sure it is in the center of my group and now this will just display a quick preview of the current user and if we'd really like we could create a workflow that could even redirect the user through to their own profile page here so let's say we want to allow the user to click on their profile photo and see their profile itself we can create a workflow here and when this particular image is clicked i'll choose from a navigation event i'll select the go to page option and the destination page will once again be the profile page we just created only this time the user will be sending through to that page is the current user so that way they'll be able to view the information of their own profile if we were to jump back into our design tab though there's just one last feature i would like to add in order to complete this initial phase of our home page and that is adding in a custom search experience that allows users to search through all of the users within our linkedin platform and so before i add in that search box i'm just going to add in a static image here and this is just going to be a linkedin logo that i have stored on my local device so i'm just going to upload a static image here and as you can see i've just uploaded a linkedin logo there i can drag that out to the side so it's in line with our group as well if i'd even like i could choose to highlight all of my elements and just move those across a tab on my page just because i've got plenty of empty space on this side but then beside our linkedin logo here what i'd like to do is add in a search box so i'm going to scroll on down to our input forms here and i'll choose to add in a search box element i will drag this out and within this search box i would like us to be able to index all of the users stored within our database for our linkedin platform so i'm going to leave the choices style to be a list of dynamic choices i will then need to define a list of which data this search box will be searching through in our database and that of course will be a list of all of the users who have registered accounts and then the field that users can search through is the user's names so if a user was to start typing in a name this search box would preemptively provide a predicted search suggestion and of course what i'd like to do is create an experience that allows us to redirect the user through to that particular profile page when a particular search result is clicked so before we do that i'm just going to expand the height of this search box a tab there and then what we can do is create a workflow that triggers whenever the value of this search box is changed so if we jump into our workflow editor we can create a new trigger for a workflow and if you select the element actions option you'll see an option here to create a workflow every time an input value is changed in this case the element input will be the search box that we've just added onto the page and what i'd like to do within this is select from a navigation event because i'll be sending someone through to a profile page yet again so i'll choose the go to page option and then i'll select that the destination page will be our profile page and the data i'll be sending through is this search boxes value just remembering that the data source for this search box was set as a user which means we can send through user profile information to our profile page and that is all we need to add to our profile page at this particular step throughout our build if we were to take a preview at the application you could remove all of the borders that we've added onto our repeating group as well as the color we had added on to our hidden group post here but i'm just going to take a quick preview at what this whole experience looks like just so you can get an idea of how this home page will function over on my homepage here you can see i'm currently logged into my lachlan kirkwood profile and on the left hand side i can see a preview of my cover photo and the details of my profile and of course in our repeating group here i have a list of all of the posts that were created by either my connections or myself at this point in our tutorial i actually don't have any connections so it's only going to just display the post that i have added but what you'll see is that the text about post has been displayed as well as the actual image if i was to create a new post right now i'm just going to call this test post 2 and if i was to not add an image to this post i could choose to publish this and what you'll see is that the group element has been hidden and now this is a text only post you'll also just have to excuse the empty space in our repeating group here i've just left this blank for now because we'll need this space to display a list of comments that have been created here in a moment but the last thing i'd like to show you is just the search functionality so i've gone ahead and i've just created another test account within our application so if i was to type in the name of this user which their name is test user 2 you can see here that our search box is providing a predicted search result and if i was to click on this our workflow will trigger and run and you can see in our url string here we've been sent through to our profile page and bubble has also sent through the unique id of that particular user's profile back in my notion checklist i'm going to tick off that i finished building out the features for our home page which of course included our repeating group which was our social feed the ability to redirect users through to our profile page as well as a search function to search for users across our linkedin platform and that is all i have time for in this tutorial today if you are interested in checking out the rest of the course i'd recommend clicking the link in the description to purchase the full course within the complete course i'll be walking you through the step-by-step instructions to complete the rest of our build you can also get access to a suite of bubble tutorials where you'll learn how to build other popular products if you'd like to get started building some other popular products for free i'll be sure to include some suggested links at the end of this video thanks again for taking the time to watch and be sure to hit that subscribe button if you'd like to see any other useful tutorials to help you on your bubble journey [Music] you
Info
Channel: Building With Bubble
Views: 1,397
Rating: undefined out of 5
Keywords: Bubble, bubble.io, no-code, no code, no-code development, visual programming, buildcamp, coaching no-code apps, makerpad, adalo, webflow, zapier, no-code tools, app development, minimum viable product, MVP, Bubble no-code, software development, linkedin clone, no-code social network, social network app
Id: oFVsct33juU
Channel Id: undefined
Length: 87min 9sec (5229 seconds)
Published: Wed Sep 22 2021
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.