This tutorial guides you through adding your first component to your app. Components in Adalo are like building blocks. You can easily drag them from the component menu on the left to your app's design on the right, and drag them within your design to re-order. You can also customize any components using the options available.

Once you've created your blank mobile app in Adalo, you're going to see a few out-of-the-box screens like a signup page, a login page, and your first screen, which is classed as a homepage. This is also the first thing that the user is going to see once they either sign up or login.

This tutorial shows you how to drag a component from the menu on the left to your home screen on the right. On the left hand side, you have a component menu. Under 'add component', you can either scroll through the list of options, or search for a component if you know what you're looking for.

For this tutorial we're going to add a 'simple list' component. Click on this component, hold and drag it onto your home screen. Then select a text component, and hold and drag this onto the home screen above the list component you just added.

Notice that when you select your 'list' component on your home screen that a sub menu on the left-hand side appears that asks, "what is this a list of?". Click here and you'll see you can select 'Users'—this option is always available, and is a collection of data automatically created for you by Adalo. You can also click 'new collection'.

Collections are lists that exist on your app. For example, if you were creating a directory site of shops, a collection would be a list of those shops.

‍