How I Build Profitable Apps SOLO (No Code / with AI)

0:00 how did I build this AI powered SAS in 0:02 less than 15 minutes without writing a 0:04 single line of code in this video I'll 0:06 show you exactly how I did it step by 0:08 step so by the end you'll have a fully 0:10 functional web app that's live and ready 0:12 to use but here's the problem most no 0:15 code tools only let you design the app 0:17 they don't set up the backend or user 0:19 accounts so you're literally left with 0:21 something that looks good but doesn't 0:22 actually work so here's exactly how 0:24 we'll build the app in step one we'll 0:26 let AI generate the app idea and create 0:29 a plan step two is to build the core 0:31 features so it actually works and then 0:34 in step three we launch it live so it's 0:36 fully functional and ready to use and 0:38 don't worry you don't need to be a 0:39 coding expert I've made this tutorial 0:42 super simple to follow even if you've 0:44 never built an app before by the end 0:46 you'll see just how easy it is to turn 0:48 an idea into a real working app using 0:51 AI if you've ever tried using AI to 0:54 build something you probably know that 0:56 it doesn't just magically read your mind 0:58 the more context you give it the better 1:00 it performs that's why before we even 1:02 start building we need to give the AI a 1:04 clear blueprint of exactly what we want 1:06 to create so for step one let's head 1:09 over to build with ai. and use my free 1:11 AI tool to generate our project context 1:14 go to the brain dumper page you get five 1:16 free Generations per month so make them 1:18 count now select lovable and what's so 1:21 great about lovable is it builds the 1:23 entire MVP for you with the perfect 1:26 setup UI backend database and AI Fe 1:29 features we just need to give it a good 1:31 context so let's continue I've already 1:33 written down my app idea so I'll just 1:35 paste it in but before we move forward 1:37 pause the video and brain dump 1:39 everything you want in your app and I 1:41 mean everything features mus haves even 1:43 the smallest ideas that pop into your 1:45 head and don't worry about writing it 1:47 perfectly just get all your ideas out 1:49 because the more details you give the 1:50 better the AI will perform once you're 1:52 ready hit generate and just let the 1:54 magic happen I'll just skip the 1:56 generation until it's done and now that 1:58 it's generated there are three three 2:00 simple steps to follow first copy the 2:02 context second open lovable third open 2:05 mobin which we'll use for the UI later 2:07 now go back to lovable and let's move on 2:09 to step two building the core features 2:11 of the app so paste in the context from 2:13 brain dumper here we can see the full 2:15 context all the features that we want to 2:17 include and the game plan which lists 2:19 what is prioritized to build and you 2:21 should skim through this just to make 2:23 sure it includes everything you want to 2:24 build so once you're ready hit enter and 2:27 lovable will start processing the 2:28 context we just provided and now lovable 2:31 starts writing your code live you can 2:33 see it's actually generating components 2:35 adding Global Styles and setting up the 2:37 foundation for your app and here is the 2:39 result from the first prompt he's made 2:41 the can band board with four columns 2:43 before we keep building we need to 2:45 connect superbase if we skip this step 2:47 our app won't store data manage users or 2:49 even function super base is the backbone 2:51 of the entire app so let's set it up 2:53 properly before moving forward click the 2:55 super base button in the top right 2:57 corner if you don't have an account 2:58 create one it's free free now create a 3:01 new project I'll call mine deep work V2 3:03 add a strong password then hit create 3:05 new project now we just need to wait for 3:08 super base to finish setting it up and 3:10 once it's ready go back to lovable and 3:11 click the super base button again you'll 3:13 see your project so click connect and 3:16 just like that superbase is fully linked 3:18 to our project now lovable detects that 3:20 superbase is set up and that 3:21 authentication is ready so let's set up 3:24 the user authentication and literally 3:26 all I need to do is type in the chat 3:28 setup off and AI takes care of the rest 3:31 let's pause for a moment what you're 3:32 looking at here is SQL the programming 3:35 language for relational databases 3:37 knowing how relational databases Works 3:39 makes everything way easier if you want 3:41 to understand how your app stores and 3:42 manages data so let me break it down in 3:44 the simplest way possible especially for 3:46 beginners like Tim here hey Tim do you 3:48 want to quickly understand what 3:50 relational databases are sure go ahead 3:52 okay so think of it like Excel 3:54 spreadsheets you have columns as the 3:56 title and rows for each piece of data so 3:58 if we're to add a new row with data 4:00 filled in this will act like the 4:01 database of how we are saving the 4:03 information got it and the word 4:05 relational means that instead of having 4:07 one huge spreadsheet with like 100 4:09 columns we split it into smaller ones 4:11 and connect them with IDs like how 4:13 exactly each table has a unique ID which 4:16 is called a primary key so in order to 4:18 keep all these tables organized we just 4:20 simply link them together let's say we 4:22 want to store movies then we can split 4:24 this table up into smaller more specific 4:26 tables like movie details movie actors 4:29 and movie reviews okay that makes sense 4:32 so it just keeps the database organized 4:34 and easy to manage exactly all right now 4:37 where were we yeah right so the AI then 4:39 creates a profiles table with four 4:41 columns ID username Avatar URL and 4:45 created at the created at column is a 4:47 standard feature in all tables which 4:49 automatically adds the timestamp when 4:51 each new row is added now click apply 4:54 changes and this generates everything 4:56 the login and sign up forms the security 4:58 features and the full authentication 5:00 system now what happens when we log out 5:02 and try signing back in will it actually 5:04 work let's test it out I'll create an 5:06 account and hit sign up now we'll get an 5:08 email automatically sent out to verify 5:10 our account so open the email and 5:11 confirm the account now close out of 5:13 this and head back to lovable if we now 5:15 log into the account we just made boom 5:17 We can sign out and sign in again to 5:19 make sure it works and yeah this works 5:21 perfectly first try if we now head over 5:23 to the database and navigate to 5:25 authentication we can see the account I 5:27 just made with the ID the email when the 5:29 account was created and the last time I 5:30 signed into the account and if we now 5:32 head over to table editor we can see all 5:35 the tables but currently we only have 5:37 the profiles table set up so if we take 5:39 a look at the ID and head back to 5:41 authentication it's the same ID when you 5:43 click on a user you'll see a detailed 5:45 overview on the side with lots of 5:47 information about that specific user and 5:49 here we can even delete the account 5:51 reset their password and stuff like that 5:52 so if we close out of this we can also 5:54 see the button to add new users manually 5:57 from the database and here you can 5:58 either send an invitation directly to 6:00 someone's email or manually create a new 6:02 user just like signing up through the 6:04 front end now let's jump back into 6:06 lovable and pick up where we left off we 6:08 need to grab our list of planned 6:10 features so let's scroll all the way up 6:12 in the chat copy those features and keep 6:15 them somewhere easy to access since 6:17 we've already built the first feature 6:19 let's go ahead and remove it from the 6:21 list and let's ask lovable to continue 6:23 building the can band board it's now 6:25 thinking through what's next to build 6:26 next and we'll continue building and 6:28 just like that the the AI has built the 6:30 drag and drop functionality and as we 6:32 can see here implemented the rule for 6:34 only allowing one task to be doing at a 6:37 time perfect that's another feature done 6:39 and look at how fast we're moving now 6:42 let's continue by removing the feature 6:43 we just built from the list and move on 6:45 to task management I'll skip until the 6:47 AI is done building and wow it added a 6:50 lot here now we can add tasks edit them 6:52 delete set priority and set a deadline 6:55 wait something's wrong the edit and 6:57 delete buttons aren't clickable that 6:59 means if we launch this app right now 7:02 people won't even be able to update 7:03 their tasks let's see why this is 7:05 happening and more importantly how to 7:07 fix it so let's just mention these 7:09 issues and have the AI fix them real 7:11 quick all right now we can see that 7:13 adding tasks works but what happens when 7:15 we log out of the account if we sign in 7:17 again we can see the tasks are not being 7:20 saved so let's ask the AI to fix it what 7:22 the AI will do now is create the 7:24 database table for tasks so go ahead and 7:26 hit apply changes now that lovable has 7:29 fixed the database it just needs to 7:31 update the user interface this looks 7:33 promising all the columns are empty for 7:35 now since we haven't created any tasks 7:37 yet now lovable wants us to refactor the 7:39 code but what does that even mean while 7:41 lovable handles this for us let me break 7:43 it down hey Tim when coding with react 7:46 we split our code into smaller files 7:48 think of it like using lots of small 7:49 Lego blocks instead of one big block why 7:51 do we do that because it makes your app 7:53 faster and easier to work with when you 7:55 need to change something you only update 7:57 a small piece instead of digging through 7:59 a huge file and each small file is 8:01 called a component which means you can 8:03 reuse it in different parts of your app 8:05 for example imagine a navigation bar 8:08 instead of writing the same code 8:09 repeatedly on every page you create a 8:11 separate component and just drop it in 8:13 wherever you need it that's cool but how 8:15 do I know when to split my code you 8:17 should split your code when a file gets 8:19 too long to read easily or when a single 8:21 component is handling too many things at 8:23 once the goal is to keep each part 8:25 simple and focused on one job this way 8:27 your code stays organized easy to 8:30 understand and much easier to maintain 8:32 that makes sense thanks for explaining 8:33 but luckily for us the AI does this for 8:36 us keeping the code structured and 8:37 organized without us having to even 8:39 worry about it and now that the database 8:41 is connected let's see if it can 8:42 remember the tasks we're adding I'll 8:44 create a task and sign out of the web 8:46 app now when I sign back in the task is 8:48 still there that means it's working just 8:51 to be sure I'll try one more time I'll 8:53 add another task sign out and sign back 8:56 in Yep this is working perfectly now if 8:58 we head over to the to the database 9:00 under table editor and open the tasks 9:02 table we can see all the tasks we've 9:03 created along with their titles 9:05 descriptions priorities and everything 9:07 else so let's head back to lovable and 9:09 update our progress from the features we 9:11 saved earlier remove the one we just 9:13 built and move on to the next one again 9:15 just copy and paste it directly into 9:17 lovable and if you want to see what's 9:19 happening under the hood you can just 9:21 click on the box and here we can watch 9:23 the AI write the code live then it moves 9:26 on to editing the can band board file to 9:28 integrate the new timer and this is the 9:30 fastest way to learn that's exactly how 9:33 I started coding just one year ago I 9:35 landed my first job as a full stack 9:37 developer without knowing anything about 9:38 coding but now that lovable is done 9:40 let's see what happens when we drag a 9:42 task over to the doing column amazing 9:44 look at this a timer starts 9:46 automatically as soon as we move the 9:48 task this is exactly what I wanted it's 9:51 honestly crazy that we can build all of 9:52 this just by describing what we want in 9:55 plain text but the AI didn't fully 9:57 understand what I wanted the 9:58 functionality Works nicely but it's not 10:01 exactly how I wanted it so let's 10:02 fine-tune it and build it just how I 10:05 want it I'll ask the AI to display the 10:07 timer over the entire website and add 10:09 the ability to pause or finish a task 10:11 and you should never be able to have a 10:12 task in the doing column unless you're 10:14 actively working on it and I'll also ask 10:16 it to save the total time spent on each 10:19 task all right this looks interesting 10:21 let's see how it works now if I press 10:22 pause it automatically moves the task 10:25 back to to-do and if I drag it back to 10:27 doing the timer starts in full screen 10:29 mode to help me focus on just that 10:32 specific task so when I now click 10:34 complete it will move the task to the 10:36 done column perfect now the only issue 10:38 is that it didn't actually add the 10:40 feature to remember the time spent on a 10:42 task so let's quickly ask the AI to fix 10:44 that we need to add a new column called 10:46 elapsed seconds to the tasks table in 10:48 the database once that's done just click 10:50 apply changes all right let's test this 10:53 out now yes now it actually remembers 10:56 and saves the time spent on each task 10:58 let's keep going this is moving fast 11:01 next up is the AI implementation but I 11:03 want to finish the web app first so 11:05 we'll save that for later for now let's 11:07 copy the next feature and paste it into 11:09 lovable again at this point you should 11:11 start to see the pattern we ask the AI 11:13 to build the features test if it works 11:15 and refine anything that needs fixing 11:17 now that it's done we can see the 11:18 filters it added at the top of the page 11:21 we can sort tasks by priority low medium 11:24 high we can filter tasks by column inbox 11:27 to do doing done we can filter tasks by 11:30 deadline and see only those due before a 11:33 certain date and we can clear all 11:35 filters with one click great now let's 11:38 move on to the last feature before we 11:40 start implementing the AI copy the 11:42 feature paste it into lovable and hit 11:44 enter now it is added an analytics page 11:46 but there's an error no problem we can 11:48 fix this instantly by either pressing F 11:50 on the keyboard or just clicking the 11:52 button and just like that the error is 11:54 fixed let's try checking out the 11:56 analytics page again this looks much 11:58 better now I can see that I've completed 12:00 50% of my tasks and spent less than a 12:02 minute in total working on them so let 12:03 me just speed up the time while sitting 12:05 in a task for a few more minutes all 12:06 right that should be good enough now 12:08 let's navigate back to the analytics 12:10 page and see what's changed I've 12:11 completed 100% of my tasks and spent 2 12:13 minutes in total which means I averaged 12:15 1 minute per task and now it's time for 12:17 the final feature the AI chat box 12:19 implementation for the last time copy 12:21 the feature paste it into lovable and 12:23 hit enter lovable is telling us that 12:25 deep seek is not available at the moment 12:27 because they were recently cyber 12:28 attacked so I'll use open ai's API for 12:30 now and I can confirm this on the Deep 12:32 seek platform we're unable to top up the 12:34 balance since they've disabled the 12:36 feature but whilst editing this video 12:38 deep seek is actually back up and 12:39 running so just use deep seek yourself 12:42 let's navigate to platform doop ai.com 12:45 and create an account now let's check 12:47 out the pricing section the cheapest 12:49 model available is gp4 mini so to create 12:53 the API key go to the overview page and 12:55 click Start building create your 12:57 organization and continue when prompted 12:59 just click I'll invite my team later now 13:02 name your API key I'll call mine deep 13:05 workor V2 and I'll name the project the 13:08 same once the key is generated copy it 13:10 head back to lovable and click add API 13:13 key just paste it in and submit it and 13:15 let's wait for lovable to work its magic 13:17 if we check out the analytics page we 13:19 can see that it added AI task insights 13:21 let's see what this actually does okay 13:24 so it looks like it's just using AI to 13:26 generate an overview of all tasks but 13:28 that's not what we want I'll ask lovable 13:30 to turn the AI into a chat box in the 13:31 corner where I can ask about anything 13:33 related to all the tasks in the database 13:35 I'll also include an example question so 13:37 it understands what I want to make all 13:39 right now we can see the AI chat box in 13:41 the bottom right corner but does it 13:43 actually work now let's test it how many 13:45 tasks have I completed today hm this 13:47 answer is way too complex and it looks 13:49 like it's just using placeholder text 13:51 let's ask lovable again to make the 13:52 response is more concise and double 13:54 check if the AI is actually working if 13:56 we refresh the page and ask the same 13:58 question again again nice that's exactly 14:00 the response I wanted perfect now we're 14:03 officially done building the web app but 14:04 the UI could definitely use some 14:06 improvements remember mobin the website 14:08 we opened earlier navigate back to that 14:10 tab this site is a gold mine for UI 14:12 design since it's a library of 14:14 screenshots from successful company 14:15 websites and apps and here's the cheat 14:17 code you can literally copy and paste 14:19 these screenshots directly into lovable 14:21 and it will recreate the UI design 14:23 perfectly go to screens and web here 14:25 you'll see dashboards from companies 14:27 like amplitude and stripe ready to be C 14:29 but since we're building a kban board 14:31 let's open the search bar and look for 14:33 kban scroll through the designs until we 14:35 find one that looks good I must say I 14:37 really like incident. I's design it's 14:40 clean modern and just looks professional 14:42 so just click the copy button head back 14:44 to lovable and paste the screenshot into 14:46 the chat then ask lovable to use this 14:48 design for inspiration but only apply it 14:51 to the pages we already have to make 14:53 sure the AI does not add any extra pages 14:55 once it's done let's open the web app in 14:57 the browser and see how it looks sign in 15:00 and nice this design looks very good I 15:02 like it the analytics page also looks 15:04 great and I really like how the filters 15:06 are now in the sidebar and the AI chat 15:08 box looks perfect as well this is 15:10 exactly what I was looking for now that 15:12 everything looks good let's move on to 15:14 step three time to launch it first close 15:16 out of the web page and head back to 15:18 lovable click the GitHub button in the 15:20 top right corner and connect to GitHub 15:22 if you don't have a GitHub account yet 15:23 go ahead and create one now hit install 15:26 and authorize next click transfer 15:28 Repository select your GitHub account 15:30 and push the project over to GitHub now 15:32 head over to github.com and you'll see 15:34 the repository we just pushed open it up 15:36 and I'll just rename it real quick now 15:38 go to viral.com log in Click add new and 15:42 choose project simply import the GitHub 15:44 repository and click deploy and just 15:47 like that your project is live if we go 15:49 to the dashboard we can see the status 15:51 is ready and if we click the versal link 15:53 to our project we can log in the old 15:55 account and see that everything is 15:56 working perfectly but let's take it one 15:58 step further and add a custom domain 16:00 which is extremely easy go back to the 16:02 versal dashboard and click on domains 16:05 now click add type in the domain you 16:07 want to use I'll just use a random one I 16:09 bought earlier click add domain and then 16:11 add next you'll see some DNS records 16:14 that you need to add to your domain 16:15 provider this only takes about 30 16:17 seconds so go to wherever you bought 16:19 your domain and add the new required DNS 16:21 records now just wait until the DNS 16:23 settings are linked this might take 16:24 around 10 minutes and once everything is 16:26 ready search for your domain in the 16:28 browser and and just like that you've 16:30 built and launched a web app now that 16:32 your web app is live what if you could 16:33 turn it into a mobile app as well click 16:36 this video to learn how to build a 16:37 mobile app with AI