How to Vibe Code an App in 2026 (Step-by-Step Softr Tutorial)

About this video

Presenter Nick, partnering with Softr, builds a field services app for a contractor who struggles to assign electricians, plumbers and tilers across multiple renovation jobs. Starting free at softr.io, he uses ‘Generate with AI’ and Softr’s AI co-builder, answering follow-up questions about sign-in, navigation layout and colour theme. Softr assembles the interface largely from pre-built, professionally tested native blocks — the presenter says about 80% of app features can be built from them — while the co-builder can vibe-code custom blocks when needed. In Softr Studio he shows the Interface, Data, Users and Workflows tabs: the co-builder has already created database tables (e.g. jobs and tasks) with placeholder data, user groups for project managers and crew members, and authentication rules. Visibility can be controlled per page, per block and even per button, so only project managers see the jobs page or the ‘add new jobs’ button, and previewing as a crew member confirms the difference. He then deletes a native block on the ‘My tasks today’ page and vibe-codes a replacement showing the logged-in user’s tasks for the day with next/previous-day navigation, editable React code, a version tracker for rollbacks, and its own block-level chat. Finally he adds a workflow that emails him via Gmail whenever a task’s status is set to completed, and publishes the app as a web app on a Softr subdomain or a custom domain.

Key takeaways

• Use Softr’s co-builder to generate an app from a prompt, then take manual control in Softr Studio — the AI is presented as an assistant, not the driver
• About 80% of features can be built from Softr’s curated native blocks, according to the presenter; vibe-coding blocks are for the remaining custom needs
• Softr bundles interface, database, user authentication and workflows in one tool, and can also connect to third-party databases or spreadsheets
• Control visibility at page, block and button level by user group (e.g. project managers vs crew members), and verify it by previewing as different users
• Vibe-coded blocks expose their React code, a version tracker for rollbacks, and a block-specific chat, but changing their data source manually can break other things

Episode details: published March 31, 2026 · 14:40 long. Summary written by Self Growth Videos from the episode itself. Business results and any income figures mentioned are Kevin Stratvert’s own claims, shared for education — they are not typical or guaranteed.

← Previous: How to Use Excel for Beginners in 10 Minutes · Next: How to Use Jira and Confluence (Full Project Workflow Tutorial) →

All Kevin Stratvert videos · Kevin Stratvert profile · Kevin Stratvert on YouTube