From Idea to App in a Weekend
A Beginner’s Step-by-Step Guide to Building with Adalo
Ever had a brilliant idea for an app, only to be stopped by the thought, “I don’t know how to code”? Welcome to the world of no-code, where your creativity and logic are all you need. This guide will demystify Adalo, a powerful platform that lets you build real, functional apps with a visual, drag-and-drop interface.
Who is this guide for?
This guide is perfect for aspiring entrepreneurs, designers, small business owners, and anyone with a great app idea who wants to build a functional prototype or product without writing code.
Part 1: The Adalo Mindset
Before building, it’s crucial to understand how Adalo “thinks.” Every Adalo app is built on three core pillars:
The Database (The Brains)
Where your app’s information lives. Built with collections, properties, and powerful relationships to link your data together.
The Frontend (The Face)
What your users see and interact with. Made of screens filled with components like text, buttons, images, and lists.
Actions & Logic (The Connections)
What makes your app interactive. Actions link screens, create database records, and update information in response to user input.
Part 2: Build a Team Directory App
To learn the core concepts, we’ll build a simple “Team Directory” app. This project covers all three pillars and will give you a solid foundation for your own ideas.
Before opening Adalo, sketch a quick plan on paper. This roadmap will save you hours.
- Screens: (1) A list of departments. (2) A list of employees in a selected department.
- Data: We’ll need a `Users` collection (Name, Email, Picture) and a `Departments` collection (Name).
- Sign up at Adalo and click “+ Create new app”.
- Choose “Native Mobile App”.
- Select the “Blank” template to start fresh.
- Name your app “Team Directory”, set your brand colors, and click “Create”.
On the left-hand side, click the Database icon.
- Users Collection: This is created by default. Click “+ Add Property” to add a Text property called `Full Name` and an Image property called `Profile Picture`.
- Departments Collection: Click “+ Add Collection” and name it `Departments`. The default `Name` property is all we need.
- Create the Relationship: This is the most important part!
- In the `Users` collection, click “+ Add Property”.
- Choose Relationship → Departments.
- Select the option: “A Department can have multiple Users, a User belongs to one Department.”
Return to the builder interface by clicking the “+” icon (top left).
Home Screen (Departments List):
- Select the “Home” screen and drag a “Custom List” component onto it.
- Set “What is this a list of?” to Departments.
- Click the list’s “Title” text, then the magic text `T` icon, and select Current Department > Name.
Department Details Screen:
- Click “+ Add Screen”, choose a blank screen, and name it `Department Details`.
- Add a “Text” component to show the Current Department > Name.
- Add another “Custom List” to this screen, this time a list of Users.
- Add a filter to the Users list:
Filter: User’s Department > Name > is equal to > Current Department > Name
- Set the list’s title to show the `Current User > Full Name` and the image to `Current User > Profile Picture`.
Let’s connect the screens so users can navigate.
- Return to the Home screen.
- Select the Card component inside the departments list.
- Click “+ Add Action”.
- Choose the action: Link → Department Details
- Adalo automatically handles passing the data of the *current* department to the details screen.
- Populate Data: Go to the Database tab and manually add a few sample departments and users. Make sure to assign each user to a department.
- Test: Click the “Preview” button in the top right. Test the flow: click a department and see if the correct users appear.
- Publish: When ready, click the “Share” button to get a PWA link that works on any device. For native app stores, you’ll need a paid plan.
Congratulations, you’ve built a real, working app!
Ready to build your own app?
You’ve seen the power of no-code. Now it’s your turn. Use the link below to get started on Adalo for free and turn your vision into a real app.
Using this link helps support guides like this at no extra cost to you.
Part 3: Beyond the Basics – What’s Next?
You’ve mastered the fundamentals. Now you can explore more advanced concepts to make your apps even more powerful.