Step-by-Step Guide: Building a Notion Clone with Adalo

Building a productivity app like Notion might sound out of reach without coding, but with Adalo’s no-code platform you can create a functional workspace app—nested pages, block-based editing, templates, sharing/permissions, and cross-platform publishing—without writing native code.

Prerequisites and Initial Setup

Step 1: Create Your Adalo Account and Project

1. Visit Adalo.com and sign up (free to start).
2. On your dashboard, click Create New App.
3. Choose Mobile App (you’ll still be able to publish to web).
4. Name the project (e.g., “WorkspaceX”).
5. Select Start from Scratch.

Step 2: Configure App Settings

1. Open App Settings (gear icon).
2. Set Brand Colors and Fonts for a clean workspace look.
3. Enable responsive behavior for tablet/desktop layouts.
4. Add Terms and Privacy Policy URLs (needed for publishing).
5. Review current plan capabilities on Adalo Pricing when you’re ready to publish.

Designing the Data Model

Step 3: Create the Workspaces Collection

1. Database → Add Collection → Workspaces.
2. Add fields: Name (Text), Icon (Text or Image), Description (Multiline Text), Created At (Date & Time – automatic).
3. Add relationship: Owner (User, Many-to-One).

Step 4: Create the Pages Collection

1. Database → Add Collection → Pages.
2. Add fields: Title (Text), Icon (Text/Emoji), Page Order (Number), Created At (Date & Time), Last Edited (Date & Time), Is Favorite (True/False).
3. Add relationships: Workspace (Many-to-One), Creator (User, Many-to-One), Parent Page (Pages, self-relationship).

Step 5: Create the Blocks Collection

1. Database → Add Collection → Blocks.
2. Add fields:

• Block Type (Text): “Text”, “Heading1”, “Heading2”, “Heading3”, “Bulleted List”, “Numbered List”, “Toggle”, “Quote”, “Divider”, “Image”, “Embed”.
• Content (Multiline Text or URL), Block Order (Number), Created At (Date & Time).

3. Add relationships: Page (Many-to-One) and optional Parent Block (Blocks, self-relationship) for nested toggles.

Step 6: Create Membership (Join) Table for Roles

1. Database → Add Collection → Workspace_Members.
2. Add fields: Role (Text: Owner, Admin, Editor, Viewer), Joined At (Date & Time – automatic).
3. Add relationships: User (User, Many-to-One), Workspace (Workspaces, Many-to-One).

Step 7: Add Utility Fields

1. Pages: Last Edited By (User).
2. Pages: Block Count (Number) (stored value you’ll update via actions).
3. Workspaces: Page Count (Number) (stored).

Core Screens and Navigation

Step 8: Build the Workspace Home

1. New Screen → Blank → “Workspace Home”.
2. Add a List of Workspaces filtered by: Workspace_Members.User = Logged In User.
3. In each row show Icon + Name; Tap → Pages List (pass current Workspace).
4. Add a New Workspace button and a Settings icon.

Step 9: New Workspace Flow

1. New Workspace button → Create → Workspaces (Owner = Logged In User; Created At = Current Time).
2. Immediately Create → Workspace_Members (User = Logged In User; Workspace = New; Role = Owner).
3. Navigate → Pages List with the new Workspace.

Step 10: Build the Pages List

1. New Screen → “Pages List” with a Workspace parameter.
2. Add a List of Pages filtered by Workspace = current and (Is Archived ≠ True) if you add archiving later.
3. Sort by Is Favorite (desc) → Last Edited (desc) → Page Order (asc).
4. In each row: show Icon, Title, “Last edited [time ago]”, and a star to toggle Is Favorite.
5. Add a floating + Page button.

Step 11: Create Page Flow

1. + Page → Create → Pages with:

• Workspace = current, Creator = Logged In User, Created At = now.
• Page Order = Count(Pages in Workspace) + 1.

2. Navigate → Page Editor passing the new Page.

Step 12: Build the Page Editor

1. New Screen → “Page Editor” with a Page parameter.
2. Add a header form bound to the Page: Icon (text/emoji) and Title.
3. Add a List of Blocks filtered by Page = current, sorted by Block Order.
4. Insert small “+” buttons between list items to add blocks at a position.

Step 13: New Block Type Picker

1. New Screen (Modal) → “Block Type Picker”.
2. Show a grid/list of types (Text, Heading1/2/3, Bulleted, Numbered, Toggle, Quote, Divider, Image, Embed).
3. On selection: Create → Blocks with Block Type, Block Order = count + 1, Page = current; then Close Modal.

Step 14: Inline Editing and Auto-Save

1. For Text/Heading/List types, overlay a Text Input bound to Block → Content.
2. Add a short hidden timer (≈2s) that starts on input change; on complete:

• Update Block → Content (if needed)
• Update Page → Last Edited = now; Last Edited By = Logged In User
• Update Page → Block Count = Count(Blocks for Page)

Step 15: Drag-to-Reorder Blocks

1. Install a sortable/drag list from the Adalo Marketplace.
2. Replace the Blocks list; on drop, Update → Block Order for moved items to keep sequence correct.

Step 16: Duplicate, Archive, Delete

1. Duplicate Block → Create new Block with copied Block Type/Content, set Block Order = current+1.
2. Archive Page (optional) → add Is Archived (True/False) on Pages; set True; hide from default lists.
3. Delete Page/Block → show confirm dialog; limit Page delete to users with sufficient Role.

Nested Pages, Templates, and Discovery

Step 17: Breadcrumbs & Sub-Pages

1. On Page Editor, show a breadcrumb: Workspace → Parent Page(s) → Current Page.
2. Add “Add Sub-Page” action: Create → Pages with Parent Page = Current and Workspace = Current Workspace, then navigate to its editor.

Step 18: Favorites & Filters

1. Add chips: All, Favorites, Recently Edited.
2. Apply filters to the Pages List accordingly.
3. Add a Search input bound to Title (contains).

Step 19: Page Templates

1. Database → Add Collection → Templates: Name, Icon, Description, Is Public (True/False) plus an optional set of starter Blocks.
2. On Use Template, Create Page and copy the template Blocks into the new Page.

Collaboration and Permissions

Step 20: Role-Based Visibility

1. Determine role from Workspace_Members for the Logged In User.
2. Show edit controls if Role in {Owner, Admin, Editor}; Viewer sees read-only UI.
3. Optional Page-level ACLs: Is Public (True/False) or Allowed Users (many-to-many).

Step 21: Invite Members

1. Database → Add Collection → Invitations: Email, Workspace, Invited By, Status (Pending/Accepted/Declined), Created At.
2. “Invite Member” opens a modal to capture email → Create Invitation and trigger an email via an automation/custom action.
3. On acceptance, Create Workspace_Members with Role = Editor (or chosen role).

Step 22: Activity Feed

1. Database → Add Collection → Activity Logs: Action (Text), User, Target (Page/Block IDs or Text), Time.
2. After key events (create/edit/delete), Create Activity Log.
3. Show a Workspace Activity list with newest first.

Rich Editing and Media

Step 23: Add a Rich-Text Editor (Marketplace)

1. Open the Adalo Marketplace.
2. Install a rich-text editor component (verify platform compatibility on its listing).
3. Bind the editor to Block → Content; store HTML/Markdown; pair with a display/renderer component.

Step 24: Images and Embeds

1. Image Blocks: Use an image picker or URL field; render with an Image component.
2. Embed Blocks: Store URLs; render via a component that supports web previews (subject to platform limits).

External Data and Automations

Step 25: External Collections (Custom APIs)

1. Use External Collections to connect REST APIs: guide.
2. Map JSON fields to your schema (Pages/Blocks).
3. Confirm plan availability on Pricing.

Step 26: Airtable Integration (PATs)

1. In Airtable, create a Personal Access Token (PAT) and locate your Base ID.
2. In Adalo External Collections, connect Airtable with PAT + Base ID; map tables to Workspaces/Pages/Blocks.

Step 27: Automations (e.g., Zapier)

1. Trigger Slack/Email when a new Page is created.
2. Generate weekly digests of “Recently Edited” pages.
3. Optional backups: export records to Drive/Sheets on a schedule.

Authentication and Onboarding

Step 28: Welcome, Sign-Up, Login

1. Welcome screen with logo/tagline and buttons: Create Account / Log In.
2. Sign-Up form (Users): Full Name, Email, Password + Confirm; on success → auto-login.
3. Login form: Email, Password; add Forgot Password link.

Step 29: First-Run Workspace

1. After first login, Create → Workspaces named “[User Name]’s Workspace” with Owner = user.
2. Create → Workspace_Members (User = user; Role = Owner).
3. Navigate to Pages List for that workspace.

Notifications (Optional)

Step 30: In-App Notifications

1. Database → Add Collection → Notifications: Title, Message, Type, Is Read, Created At, Action URL, Recipient (User).
2. Show a bell icon with unread count; on tap, list notifications.

Step 31: Push Notifications

1. Enable push in Adalo; request permission in-app.
2. To test push, use TestFlight (iOS) or Internal testing track (Android).
3. Triggers: “You were added to a workspace”, “Your page was updated”, etc.

Quality, Testing, and Performance

Step 32: Preview on Devices

1. Use Adalo’s previewer for mobile and desktop.
2. Validate navigation, breadcrumbs, and long lists.

Step 33: Seed Test Data

1. Create 3 workspaces, 25+ pages each, 100+ blocks per workspace.
2. Test search, favorites, and filters under load.

Step 34: Performance Best Practices

1. Paginate lists (20–50 items) with Load more.
2. Store counts (Block Count) on save instead of computing on each load.
3. Defer deep relationships (load details on the Page Editor).
4. See Optimize Performance: https://help.adalo.com/performance/optimize-app-performance

Step 35: Error & Empty States

1. Add empty states (“No pages yet—create your first page”).
2. Show clear toasts for failed saves/network errors.

Step 36: Access Control Checks

1. Verify Viewer can’t edit or delete.
2. Verify Editor/Admin/Owner paths for create/duplicate/archive/delete.

Publishing to Web, iOS, and Android

Step 37: Web Publishing

1. Publish → Web App to an Adalo subdomain for quick sharing.
2. Add a custom domain on paid plans.
3. Guide: Publish Web App

Step 38: iOS Submission

1. Enroll in the Apple Developer Program: https://developer.apple.com/programs/
2. In Adalo, generate an IPA build for iOS.
3. Upload to App Store Connect via Apple’s Transporter.
4. Review times vary; plan for several days or longer.

• Apple App Review: https://developer.apple.com/app-store/review/

Step 39: Android Submission

1. Create a Google Play Developer account: https://play.google.com/console/signup
2. Generate an AAB (required for new apps).
3. Upload in Google Play Console, complete listing, ratings, and data safety.
4. Review times vary; initial reviews can take longer.

Scaling and Maintenance

Step 40: When to Add an External Backend

1. If you need larger datasets, custom search, or heavy workflows, connect APIs via External Collections.
2. Keep Adalo as your UI; move heavy logic server-side.

Step 41: Template Gallery

1. Add a Templates screen that showcases templates by use case (Docs, Tasks, OKRs).
2. Provide Use Template → clones a page and starter blocks into the current workspace.

Step 42: Release Management

1. Group changes into releases; add a What’s New page in-app.
2. Web updates deploy instantly; plan mobile updates for store review.

Step 43: Backup & Export

1. Add Export CSV/JSON flows via automation for Pages and Blocks.
2. Schedule periodic backups to a drive.

Troubleshooting

Step 44: Actions Not Firing

1. Check action order and Sometimes conditions.
2. Temporarily remove conditions to isolate issues.

Step 45: Data Not Saving

1. Confirm correct collection bindings and field types.
2. Test a minimal Create action to validate path; then re-add conditions.

Step 46: Slow Lists

1. Reduce active filters; add simple stored flags (e.g., Is Archived).
2. Limit fields shown per row; lazy-load detail screens.

Step 47: Component Compatibility

1. If a Marketplace component behaves unexpectedly, review its listing for platform notes.
2. Swap to a simpler component to confirm root cause; then re-introduce gradually.

Why Use Adalo for a Notion-Style App

• Visual data modeling: Build Workspaces ↔ Pages ↔ Blocks relationships without code.
• Cross-platform output: Publish to web, iOS, and Android from one project.
• Extensibility: Add features via the Marketplace, connect APIs with External Collections, and automate with Custom Actions.
• Cost control: Choose the plan that fits your rollout—always verify current details on Adalo Pricing.

Additional Resources

• Adalo Help Center: https://help.adalo.com/
• External Collections: https://help.adalo.com/integrations/external-collections-with-apis
• Custom Actions: https://help.adalo.com/integrations/custom-actions
• Optimize Performance: https://help.adalo.com/performance/optimize-app-performance
• Adalo Marketplace: https://www.adalo.com/marketplace
• Web Publishing: https://www.adalo.com/publish-web-app-no-code
• iOS Publishing: https://www.adalo.com/ios-app-apple-app-store
• Android Publishing: https://www.adalo.com/native-android-app-google-play-store

‍

Note: This guide delivers shared updates, nested pages, and block editing. It is not a Google-Docs-style real-time co-editor. For true concurrent editing or very large data volumes, pair Adalo with specialized backends via External Collections/Custom Actions, test thoroughly on real devices, and follow Adalo’s current docs for publishing and performance.

‍