Transcript
If you need to build an app or several apps for your business, you might be thinking about one of those easy no-code creation tools. And if you want one solution that handles every step of the development process, including your database and web hosting, it's time to take a look at Softr. Today we are exploring how you can use their system to build your next client portal, CRM, project management app, or even online marketplace.
Softr has an AI assistant that's there to help when you need it, naturally called the AI Co-Builder. I love how the AI Co-Builder will sort of get out of the way when you need to take control yourself. In Softr, the AI is just one part of the workflow, and while it's important, you are the one running the show.
First, you need to put some thought into the app that you need to build. I recently learned how difficult it is for contractors to have several renovation jobs running at once, assigning electricians, plumbers, and tilers to different job sites daily. It's clear to me that this contractor needs a field services app, something customized to their business that crew members can access on their phones.
Over at Softr, we can set up an account and start building for free. You can start your app manually from scratch, or there may be a template app that's already built that does something similar to what you need. But I want to use Generate with AI, which is the easiest way to unlock your app idea.
[.blog-callout]
Note from Softr: When starting a new project, you can use the AI co-builder to instantly generate a complete app, page, or database schema from a simple prompt. Alternatively, you can browse our pre-built App templates to find a starting point that matches your exact use case.
[.blog-callout]
You can write a long prompt with lots of detail, but it actually works really well even with shorter prompts. Describe your idea, and the AI Co-Builder can start building the app for you. Watch for follow-up questions and answer them so the system understands exactly what you need.
Among other things, it needs you to decide how users will sign into your app. Softr handles the authentication system, you just need to choose which type. You'll also need to choose the layout for your site's navigation and a starting color theme.
Softr does something different from other app building tools, which makes a huge difference. App interfaces are assembled using blocks, and Softr has a library of what they call native blocks, which are not created by AI. They were built by professional app builders, they've been tested, curated, and they are repeatable.
About 80 percent of the features in your apps can be built from existing native blocks. The AI just needs to identify which blocks work best and assemble your app from those. When you need something new or original, the AI Co-Builder can automatically build it for you using vibe coding.
[.blog-callout]
Note from Softr: If a native block doesn't quite fit your advanced requirements, you can use the Vibe-Coding block. Just prompt for the exact custom component you want, and Softr will generate it and connect it to your database seamlessly.
[.blog-callout]
Softr Studio is where you customize your app. The AI Co-Builder is there on the left, but you can close it or open it at any time. It gets out of the way when you don't need it, letting you make the decisions, but it is just a button away when you need help.
As you're designing your app, you can see how it will look on a desktop, a tablet, or a phone layout. Our contractor wants crew members to use this app out in the field, so the phone layout is really important. In the app interface, we see a navigation bar at the bottom in the phone layout and on the left in the desktop view.
This navigation bar is how users will move between the different pages in the app. However, when you're actually designing the app, you'll need to open the pages panel and select the page you want to customize. With my app's home page selected, I can see that it has a few separate blocks on this page.
When you select a block, it opens up the control panel on the right where you can make adjustments to that specific block. If you want to make changes to the entire site, there are controls on the far left, like the theme controls where you can adjust the interface colors. You can also select an individual block and use the styles tab to change its colors locally.
In that same control panel, you can add or remove content from the content tab, or set up buttons that users can click in the actions tab. You can adjust all of those controls manually, giving you complete control. You also have the option to ask the AI Co-Builder to make these changes for you.
The AI Co-Builder can change visual themes, the content of buttons on the page, or anything else you might manually adjust across your app. When I'm done, I'll close the AI Co-Builder so it gets out of the way.
There are a lot of app builders that focus just on a nice-looking interface with basic functionality, but a robust app that scales with your business has to be able to store and access information long-term. At the top, you can switch from the interface tab to the data tab. Database storage is essential to a robust app.
If you've never built an app or dealt with databases, don't worry because Softr makes this very easy. The AI Co-Builder has already built a database with several tables to store the information my app will need, filled with placeholder data. This gives you actual data to work with as you get started, which you can manually edit whenever you need to.
If you have databases already set up somewhere else, Softr lets you connect to those third-party services or even a simple spreadsheet. But I'm going to accept Softr's database help on this project.
[.blog-callout]
Note from Softr: While you can easily connect to 17+ external data sources, Softr Databases is the powerful, native way to manage your data directly within Softr. It delivers maximum performance and eliminates the need to jump between multiple tools.
[.blog-callout]
Next to data, we see the users tab. On one hand, this is part of the database since it stores information about people who have registered to use the app, complete with placeholder users. But this is also where you can set rules for authentication, onboard new users, and set access rules for specific people or user groups.
Every app is different, but in my database, some users are assigned to a user group called Crew Member and some are Project Managers. These user roles will be important as we customize the app.
Then there is the workflows tab, where you can set up automations that connect to other apps and services. If you need to connect your app to your project management system in Notion or Monday, or if you want to receive an email every time a task is completed, this is where you set that up.
[.blog-callout]
Note from Softr: Using Softr Workflows, you can keep your automation logic as close to your app design as possible. This native capability helps you consolidate tools and reduces your reliance on external automation platforms for your project management apps.
[.blog-callout]
If we go back to the interface tab, the list of jobs shown on the homepage is simply displaying data from my database. I can select that block and go to the source tab in the control panel to see or change which data source this block connects to. In this case, there's a table in that database called Jobs.
If I go to a different page and select a different block, we can see that it connects to a database table called Tasks. This was already set up by the AI Co-Builder and it's working great, but I could change it manually if I need to.
Our content can be populated by the databases, but one of the main ways to leverage user data is through visibility settings. For example, I have a page in this app called Jobs, which shows a list of all the jobs and includes a button to add new jobs. The people who use my app will either be project managers or crew members, and I don't want crew members making changes to the job list.
For something like that, you can go to the settings for an individual page, click on visibility, and set that page to be visible to either project managers or crew members. We could also set it to all logged in users so everybody can see the page. This is actually already set exactly how I want it, making it so only project managers will see this specific page.
If we flip over to the homepage, we can see that jobs are listed there as well. We don't want to hide the homepage from the crew members, but I could select the block showing the full list of jobs and change its visibility settings. I could set this to logged in users, then choose whether I want it visible only to crew members or only to project managers.
Instead of setting block-level visibility, I could go to the actions tab where we can modify the buttons inside this block. Maybe it's fine that crew members can see the list of jobs, but I definitely do not want them to see the button to add new jobs. I can easily change the visibility of just that specific button.
In fact, it is already set how I want it so that only project managers will see the button. By controlling visibility, you control which users can access entire pages, individual blocks on a page, or even specific buttons. Alternatively, you can just ask the AI Co-Builder to make those changes for you.
I can open the AI Co-Builder and tell it to make it so that only project managers are able to use the buttons to add new jobs. It is just that simple to configure. Anything that you could modify manually in a native block, you can just ask Ask AI to do.
You always retain complete manual control, or you can use the AI Co-Builder when you need a helping hand. When you start making changes like this, you should preview the app to make sure everything works perfectly. The preview button at the top will show you exactly what the final app will look like.
You can quickly preview the desktop view, the tablet view, or the mobile view. In the top left, you can choose which specific user is previewing the app to test their active permissions. This dropdown shows all of the users who are currently registered and stored in the user database.
If I choose myself, we can see that my account is assigned as a project manager. Because of that assigned user group, you will notice how I can clearly see the button to add new jobs.
