In this tutorial we'll show you how to create a site similar to LinkTree without code. You'll need an Adalo account and it will likely take you 20 minutes to complete.

What you'll need

• Adalo

Estimated time to complete

• 20 minutes

‍

"Linktree is a free tool for optimising your Instagram traffic, whether you're a blogger, an artist or run a content platform. You'll get one bio link to house all the content you're driving followers to. Let your content live longer than the feed."

Within your Adalo account, create a new app and select Desktop App. Start from a Blank template.

Customize your Welcome, Login, and Sign Up page to your preferences design-wise. On the Home page, click on the App bar. Make the Left Icon your Settings button. Edit the Title to your App name and edit the Right Icon 1 to be a log-out icon. Next, add an Image component, a Text box, a Form component, and a Custom List component.

Then add a new screen and choose an App Bar screen type. Add an Image, Text, and Custom List component. Add a Button component to your Custom List.

Add a new App Bar screen and add a Form component.

Now, click into the Database from the left navigation bar of Adalo. Add an Image property type and name is Profile Picture, add two Text properties and name one Social Media Handle and the other Social Media URL. Then, create a new collection called Posts. Rename the Name property to URL Title, add a Text property named URL, and a True / False property called Visible. Now, let’s add a Relationship field. The relationship field is going to be Posts to User. The relation is going to be a User can have multiple Posts but a Post belongs to one User.

With the databases set up, it’s time to link data to our screens and components.

‍

If you haven’t already, link your Log In and Sign Up buttons from the Welcome screen to the corresponding screen. Link the Log In button from the Log In screen to the Home screen, and the Sign Up page button to the Home screen.

On the Home screen, link the Left Icon to the Account Page. Link the Right Icon 1 to Log In page. Link the Image component to Database -> Logged in User -> Profile Picture. Click on the Form component, and set the data collection to Posts. The Form should Create New Post. In addition to the Submit button creating a new post, you also want to link the form to the Profile Page screen.

Still on the Home screen, click on the Custom List component and set list to Posts. The filter will be Logged in User > Posts. The Click Actions should be Link to Profile Page. Add a Button component with the text Delete. On Press, it needs to Database -> Delete Record and the Record should be set to Record -> Current Post. Then add a Toggle button to the Custom List. The Toggle action should be set to Current Post > Visible. Now, add an eye Icon, that links to the Profile Page screen.

Let’s move on to the Profile Page. Link the Image component to Database > Current Post > User > Profile Picture. Link the Text to Current Post > User > Social Media Handle. The Click Action should Link to a Website and it should be mapped to Current Post > User > Social Media Handle URL. We only want the App bar to show for the logged in Use and not on the public facing page. So, click on the App Bar and change the visibility to Sometimes Visible. You can set this however you want, but for the sake of this tutorial, I have it visible if the Current Post > User > Social Media Handle is equal to the Logged in User > Social Media Handle.

Before publishing your app, set up the account page with the fields you want users to be able to update. Once you are done, you are ready to publish.

‍

I hope you enjoy this tutorial preview, if you have any questions please reach out on Twitter @amiedelisa or @makerpad.

For access to this full tutorial please head over to https://www.makerpad.co

‍