How to Build a Full‑Stack App in Softr Using AI (Full Transcript)

[00:00:00] Speaker 1: 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. Hi, I'm Nick, and today we're partnering with Softr to show how you can use their system to build your next client portal, CRM, project management app, or even online marketplace. Now, of course, Softr has an AI assistant that's there to help when you need it. It's called the co-builder. But I love how the 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. It's a very important part, but it's not running the show. You are. Now first, you need to put some thought into the app that you need to build. I just had my bathroom rebuilt after a water leak, and the contractor told me all about how difficult it is to have several renovation jobs running at once. They have to assign electricians, plumbers, tilers, all to different job sites from one day to the next, sometimes sending somebody to multiple job sites in a day. So it's clear to me that my contractor needs a field services app, something that's customized to their business that crew members can access on their phones. So let's head over to Softr.io where 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. 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 those questions. Among other things, it needs you to decide how users will sign in to 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. Now, Softr does something that's 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% of the features in your apps can be built from existing native blocks. So the AI just needs to identify which blocks work best and assemble your app from those. Of course, when you need something new or original, the co-builder can do some vibe coding to build it for you. Softr Studio is where you customize your app. The 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 the co-builder 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. It's at the bottom here in the phone layout and on the left when we're looking at the desktop view. This is how users will navigate between the different pages in the app. But when you're actually designing the app, you'll need to open the Pages panel and select the page that you want to customize. With my app's home page selected, I can see that it has one, two, three, four separate blocks on this page. And when you select a block, it opens up the control panel on the right where you can make adjustments to that block. So 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. Or you can select an individual block and use the Styles tab in the control panel to change the colors of just that block. Also in that control panel, you can add or remove content from the Content tab, or you can set up buttons that users can click in the Actions tab. You can adjust all of those controls yourself, giving you complete control. But you can also ask the AI co-builder to make changes. The co-builder can change the visual themes, the content of buttons on the page, or anything else you might manually adjust across your app. And when I'm done, I'll close the co-builder so it gets out of the way. Now, 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. Softr is going to make this very easy. The co-builder has already built a database with several tables to store the information my app will need. And they're filled with placeholder data. So you actually have some data to work with as you get started. And of course, you can manually edit that data when you need to. If you happen to have databases already set up somewhere else, Softr will let you use those third-party services or even a simple spreadsheet if that works for you. But I'm going to accept Softr's help on this one. Next to Data, we see the Users tab. On one hand, this is part of the database, but it stores information about people who have registered to use this app. Again, 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 groups. Every app is different, but in my database, some of these 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. And then there is the Workflows tab, which is 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.com, or if you want to receive an email every time a task is completed, this is where you would set that up. So now, if we go back to the Interface tab, that list of jobs that is shown on the homepage is simply showing data from my database. I can select that block and go to the Source tab in the control panel, and you can see and even 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 this is connected to a database table called Tasks. This was already set up by the co-builder and it's working great, but I could change it if I need to. Okay, so our content can be populated by the databases, but what about the user data? Well, one of the main ways to leverage user data is with visibility. For example, I have a page in this app called Jobs, which shows a list of all the jobs, including 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 to make changes to the job list. So for something like that, you can go to the Settings for an individual page, then go to Visibility for that page, and we can set that to be visible to either project managers or crew members. Or we could set it to All Logged In Users so everybody can see the page. This is actually already set where I want it, so that only project managers will see this page. But if we flip over to the Home page, we can see that jobs are listed there as well. We don't want to hide the Home page from the crew members, but I could select the block that shows the full list of jobs, then go over to the Visibility tab for that block and change who can see this block. I could set this to Logged In Users, then choose whether I want it to be visible to only crew members or only project managers. Or instead of setting that, I could go to the Actions tab where we can modify the buttons in this block. Maybe it's fine that crew members can see the list of jobs, but I don't want them to see the button to add new jobs. So I can change the visibility of just that button. And in fact, it's already set how I want it so that only project managers will see the button. By controlling the visibility, you control which users can access entire pages, individual blocks on a page, or even specific buttons. Or you can ask the AI co-builder to make those changes. I'll open the co-builder and I'll tell it to make it so that only project managers are able to use the buttons to add new jobs. And it's just that simple. Anything that you could modify manually in a native block, you can just ask the co-builder to do. So you have complete control or you can use the co-builder when you need help. Now when you start making changes like this, you should preview the app to make sure it works. The preview button at the top will show you what the final app will look like. You can preview the desktop view, the tablet view, or the mobile view. And in the top left, you can choose which user is previewing the app. This shows all of the users who are currently registered and are stored in the user database. If I choose myself, we can see that I am a project manager. And I want you to notice how I can see the button to add new jobs here. And in the navigation panel, I can navigate to the jobs page. But if I choose a different person, somebody who is a normal crew member, we see that person is not able to view the job page. And when that user does go to the home page, they don't even see the job page listed in the navigation. And they don't see the button on the home page to add new jobs. So this is how you can configure different versions of the app for different users. So most of the time you're working with pages that contain native blocks and modifying them so they work and look exactly how you need. But if you need something that a native block just can't handle, the co-builder can make something for you. One of the most important parts of my app is this page called My Tasks Today. This is where crew members will see exactly which tasks and which job sites they need to report to today. The native block that Softr set up on this page is pretty good, but I want to make something more specific. So I'm going to select this block and delete it. Then I'll open up the main co-builder and describe what I want here. Now, it's important that you reply to the co-builder's questions. It will probably create a new block called a vibe coding block. But if it asks for clarification, you can tell it to make a vibe coding block. And now I have this new block on my page. It will show the tasks that are assigned to this user for the day along with buttons to jump to the next or previous days. I can select that block to open the control panel, but the options here will be different. This is not a native block. It's a vibe coded block. Different types of blocks with different options in the control panel. Vibe coded blocks have a chat. The main co-builder can make changes to your entire app, but this chat will only work for the block I have selected. I'll ask it to change the color of some buttons. You don't have the same manual controls in a vibe coded block. So for some things, you'll have to ask the chat to make changes. When we go over to the source tab, we see that this block is showing data from the tasks table in my database. You can change the database table that the block uses here. But be aware, changing the data source here manually almost always affects how other things will work. So it might be better to use the AI chat to make that change and address any follow up issues in that chat. The content tab is where you can see the actual code for this block. If you write React code, you can edit this directly. But this tab also has a version tracker. So in a vibe coded block, you can roll back to a previous version if something isn't working right. And there is a share button. So you can send this block to somebody else so they can use it in their app. And of course, you can set the visibility for a vibe coded block. Now, once you have the vibe coded block configured, you should preview it. I'll go to the preview. I'll switch to a user who actually has some tasks assigned to them and make sure the page works how I wanted. That user can flip through day by day until we get to a day when he actually has a task assigned. And that user can mark this task as complete from this page. And if something isn't working right, you can close the preview and make adjustments in Software Studio. I'll take more time to polish this app. But when that's done, I want to go to the database tab and load in real project data. And I'll need to go to the users tab and onboard real users. And in the workflows tab, I'll take a minute to make a workflow that sends me an email every time one of the tasks is marked as complete. This workflow will be triggered every time a task is updated in the tasks table. There's a filter to continue the workflow only if the status of that task has been set to completed. Then it sends me an email using a connection to Gmail. And when your app is ready, the publish button will publish everything directly as a web app with an address on software subdomain. So we'll be instantly live on the web ready for your team to use. Or you can set it up to use your own personal domain if you want to manage the address for the web app. So we built a fully functional field services app that my contractor can use to manage their crew efficiently. And keep in mind, this was full stack development. We made the interface. We made the databases, including the user database, the authentication system, and even workflows that connect to external services all in one tool. So head over to Softr.io and you can get started with all of these tools for free. As you need more AI credits or if you need to onboard larger teams, Softr can scale with you. To keep learning and for more videos like this, be sure to subscribe to this channel.