Transcript
I built this full stack app in less than 15 minutes without knowing how to code by using Softr, a new powerful AI code builder. In this video, I will show you exactly how you can use it to build complete full stack applications with a professional frontend, a functioning backend, and automated workflows, all by typing a few simple prompts.
By the end of this video, you will have a fully built and deployed full stack app that you can either use, share, or turn into your own AI SaaS. Once you sign up for a free account, you will be brought into this interface which is actually super simple to navigate.
Since we are going to generate this app using AI, what we have to do is simply click on generate with AI. Now the AI app builder pops up and asks us what we are going to build today.
[.blog-callout]
Note from Softr: While the AI co-builder is perfect for generating a complete project management tool from a single prompt, you can also use it later to add specific pages or features to your existing app as it grows.
[.blog-callout]
For this video, I want to build an app similar to ClickUp and Monday.com, which are project management softwares that are considered to be very complex apps. This will show you how easily we can build them.
I will tell the AI I want a project management app similar to ClickUp and Monday.com. I want it to research the best features and suggest extra AI-first features that would save time or money for our users.
Softr is going to ask some clarifying questions. First, it asks which core workflow should our app focus on. I will select tasks and projects.
Then it asks who will use the app and what the access level will be. Since we want to turn this into an AI SaaS, let's select multiple roles. I will also select dashboards and reporting as the advanced features that matter most.
Softr asks how we want our users to be able to log in. I will select email, Google, and SSO to ensure the logins are secure. This help the AI co-builder figure out exactly what kind of app we want to build.
Next, we select the navigation menu and the theme. I personally prefer darker themes, so I will select that one. Once I click create, Softr starts building the app for us.
First, it creates all the backend tables because Softr doesn't just build the frontend, it also builds the backend as well. This is the most optimal way to build full stack applications because the backend and permissions are the hardest parts to get right.
[.blog-callout]
Note from Softr: When you generate an app this way, it automatically sets up Softr Databases. This native solution provides the most seamless performance, though you can still connect to 17+ other data sources if needed.
[.blog-callout]
About 10 seconds later, Softr has finished the backend and started building the frontend interface. Once it is ready, we can try it live to see it as a real user would.
In the live preview, we see an interface that looks exactly like the theme we selected. We have total projects, total tasks, and estimated hours. We can search through projects by status, priority, or tags.
We can add a brand new project, set the status to active, and assign dates and priority. We can even assign it to a specific person and add a cover image. The task then gets added successfully to our list.
Underneath the projects, we can see our dashboard with defined project scope and milestones. This includes a Kanban board showing which stage tasks are in, such as to-do, in progress, or in review.
We also have a differentiator feature called Ask AI. We can talk to an AI specifically about our tasks and projects. For example, I can ask which projects are currently active and have a high priority level.
[.blog-callout]
Note from Softr: The Ask AI feature allows your users to interact with their data using natural language, turning a standard client portal into an intelligent assistant.
[.blog-callout]
This AI has the information from our dashboard to give us an answer. Softr managed to embed AI into our app without us having to set up API keys or manual configurations.
We can also preview the app in tablet and mobile formats. The app looks very clean across all devices. Our project count also updated automatically because the brand new project was saved in the backend database.
If we navigate to the data section in the editor, we can see the full backend. Since Softr is also a backend platform, it doesn't require third-party tools like Supabase because the backend functions are embedded.
We can see all the users, projects, and tasks. All the information we filled in the frontend is safely stored in our backend database, including the files and images we uploaded.
In the editor, we can make very specific changes to sections. If I select a section, I can use the chat interface to tell Softr to move the search bar to the middle of the block.
[.blog-callout]
Note from Softr: If you ever find that a standard block doesn't meet a specific design requirement, you can use the Vibe-Coding block to prompt for a custom component that connects perfectly to your database.
[.blog-callout]
Softr makes that change without affecting anything else on the website. We can also manually move sections, duplicate them, or leave notes for teammates working on the project.
We can edit where a section gets its data, change content like welcome messages, and set visibility rules. For example, we can make certain sections only visible to logged-in users.
I also want to show you the Softr Workflows section. You can select a trigger, such as a new record added to a database, and then add steps like sending a Gmail or creating a Google Calendar link.
[.blog-callout]
Note from Softr: Softr Workflows allow you to keep your business logic right where your data lives, reducing the need for expensive third-party automation tools.
[.blog-callout]
You can even use an AI assistant to create these workflows. I asked it to build a task overdue reminder, and it created a workflow that runs on a daily schedule and sends an email for overdue tasks.
In the settings, you can find integrations for Make, Zapier, Google Analytics, and Stripe Checkout. By setting up Stripe, you can make your app a paid service with monthly subscriptions.
Softr also provides SEO optimization options. You can use your Google site verification ID to let Google crawl your website, which helps you get free customers from search results.
You can also add a custom domain by entering your domain name and updating your DNS settings. Once you click publish, your full stack application is live on the cloud.
If you want to build apps like this with beautiful frontends and functioning backends, you can sign up for Softr. Remember that Softr now offers unlimited published apps on all plans, including the free plan.
