Anyone Can Create An App! UX/UI/Dev With AI

0:00 I'm going to show you my most updated 0:01 process for building a mobile app with 0:03 AI we will go from ux to UI to 0:06 development all with AI and then at the 0:08 end I'll show you how to deploy a fully 0:09 functional app using your own 0:18 domain hi my name is Jad on this channel 0:21 I bring you the best ways to implement 0:22 AI in your design process and many tips 0:25 and tricks on using AI for Building 0:27 Products today I'm going to share with 0:29 you the result of of many hours of 0:30 experimentation and Discovery using AI 0:33 tools here's my framework for this video 0:35 with chat GPT we're going to ideate and 0:37 create a good solid structure for our 0:39 mobile app then we'll generate a very 0:41 detailed UI in ux Pilot and finally 0:43 we'll build our product with lovable we 0:46 will also launch it and deploy it and 0:48 added database and your custom domain 0:50 I'll show you how to do all of that at 0:52 the end of this video this process makes 0:54 sure that you are building your product 0:55 on a solid foundation based on user 0:57 needs and we'll do that by leveraging 0:59 the massive amount of data that chat GPT 1:02 is already trained on now getting all of 1:03 this data is easy but knowing how to use 1:06 this data is where our expertise comes 1:08 in it really helps to have a good 1:10 foundation of design principles and good 1:12 communication to me it has become second 1:14 nature because I spent a lot of time 1:16 early on in my career to understand your 1:18 X and youri Foundations and I want to 1:20 guide you through the same path that's 1:22 why I'm partnering with skill share the 1:24 sponsor of this video I've been a member 1:26 of skillshare since 2018 and I played a 1:29 huge part in in accelerating my career 1:31 and staying up todate with the best 1:33 practices and tools in the u iux space 1:36 so if you want to solidify your uxx 1:37 foundation I really recommend this class 1:40 on fundamentals of usability it really 1:42 helps to understand how to optimize your 1:44 product I also recommend this other 1:46 class on design thinking which is an 1:48 essential skill to have when you're 1:50 solving problems through design I love 1:53 the skillshare model it's the largest 1:54 online learning community for creatives 1:57 and it's really easy to follow and learn 1:59 at your own page at any skill level you 2:01 can find a class in any category like 2:03 logo design photography graphic design 2:06 AI marketing and many more plus learning 2:09 directly from industry experts allowed 2:11 me to think like them and to follow 2:13 their professional Journey like right 2:15 now I'm learning this course on how to 2:17 make effective YouTube videos in an 2:19 efficient way and I'm learning it from 2:21 MKBHD himself skillshare can help you 2:24 take your career skills Hobbies passions 2:26 or side hustles to the next level the 2:29 first 500 people to click the link in my 2:31 description will get a one month's free 2:33 trial of skillshare so click on the link 2:35 in my description to make sure that 2:36 you're one of the first 500 to take 2:38 advantage of unlimited access for a 2:39 whole month thank you skillshare for 2:41 supporting my channel and my 2:43 viewers now let's start our project with 2:45 an idea we need to convert our idea into 2:47 a project brief that means what problem 2:49 you're solving how you are solving it 2:51 and who you are solving it for by 2:53 identifying these elements you will be 2:55 able to start ideating with chat GPT now 2:58 let's start with chat GPT copy this 3:00 prompt and fill in your project info 3:02 just the initial details of your idea 3:04 the product type can be a mobile app a 3:06 web app a website or a progressive web 3:09 app and for a product name enter your 3:12 project name and who it is for so for 3:15 Target users enter any demographics or 3:18 user types and then for your goal enter 3:20 your main objective or the problem that 3:22 you are solving with a solution just a 3:25 brief description of what the app does 3:28 now for this video I'm going to go with 3:29 a PR aggressive web app called confetti 3:31 for friends and families the goal is to 3:34 allow users to manage and join events 3:36 and share photos I chose a progressive 3:39 web app because that would be the 3:40 easiest way for a startup to develop a 3:43 mobile app that works on Android and 3:45 iPhone and works on the web as well so 3:48 you don't have to develop for multiple 3:49 platforms and if you know why I called 3:51 it confetti let me know in the comments 3:54 submit this prompt and you should get a 3:55 detailed 3:57 statement now go through this state and 4:00 make sure it reflects your vision for 4:01 the product and of course ask for any 4:04 changes that you want so I found this 4:06 too long I asked it to make it more 4:07 concise and here's the result it gave me 4:09 a beautiful statement that summarizes my 4:12 vision now we want to start coming up 4:13 with features that the app will have and 4:15 this will be the foundation that will 4:17 guide the UI we will rely on real world 4:19 data that Chachi PT trained on to come 4:22 up with a set of features that solves a 4:24 problem you can find all the prompts 4:25 that I'm using in the video description 4:28 now the following prompt will present 4:29 present to you a list of features and 4:31 best practices for your specific 4:34 situation paste it in the same 4:35 conversation with chat 4:40 GPT now you have a full list of the 4:42 required features go through them and 4:44 make sure you analyze each feature and 4:46 feel free to chat back and forth with 4:48 chat GPT until you end up with a set of 4:50 features that reflects your vision for 4:52 the product now the next step is to 4:55 start coming up with a structure with 4:57 this prompt we will create a detailed 4:59 site map that will be the foundation of 5:01 the content paste this prompt in chat 5:04 GPT and you will get a list of pages and 5:07 their High Lev content and here we have 5:10 a detailed s map that includes all of 5:12 the pages and their 5:18 hierarchy and again go through and make 5:21 sure you take your time to make sure 5:22 that everything makes sense from a user 5:24 perspective and feel free to ask for a 5:26 visual flowchart if you want to see a 5:28 user flow 5:29 [Music] 5:44 and once you're happy with the site map 5:46 it's time to create our building blocks 5:48 for the UI we will start with the 5:49 homepage copy this prompt and it will 5:51 tell chat jpt to give you a layout 5:53 structure for the homepage in plain text 5:56 so that we can generate it with a UI 5:58 generator 6:01 and there we go now we have the 6:03 structure for the layout of the homepage 6:05 starting with the header then the hero 6:07 section and all of the rest of the 6:09 sections that should be included in the 6:11 homepage if you're creating a mobile app 6:14 or a mobile first design make sure 6:16 you're asking for a mobile layout 6:20 here and now you have everything you 6:22 need to start generating the UI for the 6:25 homepage again go through this and make 6:27 changes that you see fit for your 6:29 product then repeat the same for every 6:31 page in your product go through the sit 6:32 map and request the structure for each 6:34 page so paste the same prompt but change 6:37 the page name go back to your sit map 6:40 and check out the next page that you 6:42 need to 6:47 design and now I created the eight main 6:49 pages of my app I started with the 6:52 homepage then dashboard then events and 6:55 then I created the event details page 6:57 and the create new event page and then I 6:59 also created the profile notifications 7:01 and 7:05 settings at this point you can jump 7:07 straight to lovable to start building 7:09 the app but if you want to have more 7:10 control over the UI like I do I always 7:13 prefer to use ux pilot first to make 7:15 sure that my UI looks exactly how I want 7:18 it before I start building if you don't 7:19 have a ux pilot account click on my link 7:21 to get some free credits and in my 7:23 experience ux pilot has been the best at 7:25 following the exact requirements that I 7:27 have select desktop or mobile I'm 7:29 creating a mobile first app so we'll 7:31 select mobile app now click on this 7:33 expand button so you can have more space 7:36 to work with your prompt in the context 7:38 field we're going to enter our project 7:40 brief plus our styling for the 7:43 app so I'll copy this project brief 7:47 here and then below the project brief 7:49 I'm going to enter any styling that I 7:50 want and ux pilot adheres to styling 7:53 prompts very well so feel free to 7:54 experiment with any styling prompt that 7:57 you can think of here I said I want a 7:59 dark theme with rounded corners and I 8:01 want transparency with gradient colors 8:04 and I give it the exact color that I 8:05 want plus elevation shadows and thin 8:09 lines and now we're going to create our 8:11 flow so add the amount of screens that 8:14 you generated with chat 8:16 GPT for this video I'm going to create 8:18 the five main screens of the 8:20 app and then let's start with the 8:24 homepage I'll copy the homepage 8:26 description from chat 8:27 GPT and paste it 8:30 here make sure you include the page name 8:32 in each 8:33 flow now go through them and make sure 8:35 these include every element that you 8:37 want or if they include anything that 8:39 you don't want just delete them like for 8:42 example here there's an optional section 8:44 I don't want this one so just like that 8:47 fix any details that you think are 8:49 necessary and also make sure that the 8:52 tabs at the bottom or your navigation is 8:54 consistent across the 8:56 pages there we go once you're done with 8:58 all the edits let hit update 9:02 context and then click 9:04 generate and it will start generating 9:07 all the screens at once which will make 9:08 it 9:10 consistent there we go now that you have 9:12 all your screens go through them and 9:14 make sure everything was included based 9:16 on your 9:16 prompt and if you want to modify 9:19 anything click on the edit button at the 9:21 top of your page and then you'll get a 9:24 prompt box where you can request your 9:26 changes in natural 9:28 language there we go now we have our 9:30 screens complete in ux Pilot if you want 9:33 to do any manual editing you can click 9:35 on Save and retrieve in figma and you 9:37 can use the ux pilot plugin to import 9:40 your screens to figma and then edit them 9:42 you can also change the font from the 9:44 top right here and choose any font that 9:46 you want to apply to your whole app and 9:49 remember this is all based on the 9:51 foundation that we created with chat GPT 9:53 that ensures the best usability for your 9:55 solution so we're not letting you xpilot 9:57 make any decisions here when you have 9:58 all your p is ready it's time to build 10:00 the app head over to lovable. deev here 10:03 with a free plan you get five prompts 10:04 per day but it's very much worth it to 10:06 get a paid plan because it's really 10:07 powerful so now in lovable we're going 10:09 to start by telling it what kind of 10:11 product we're building I said create a 10:13 pwa called 10:14 confetti and build this homepage and 10:17 here you will paste the content that we 10:19 created either with chat GPT or with ux 10:22 pilot if you're starting from chat GPT 10:24 just paste the content of the homepage 10:26 that you created and if you're starting 10:28 with ux pilot 10:29 then click on the code button at the top 10:31 here and then in the right hand side 10:33 panel you will see all of your code just 10:36 click copy at the top this will copy 10:39 your 10:40 code go back to lovable and paste your 10:44 code and hit 10:49 submit and there we go since I gave it 10:51 the design that I had in you xil it it 10:53 adapted it perfectly into this 10:55 Progressive web app but if you're 10:57 starting from chat GPT then you won't 11:00 have any styling here all you have to do 11:02 is prompt lovable to add your styling 11:05 that you want if you want a dark theme 11:07 tell it to add a dark theme if you have 11:09 specific colors tell it exactly what 11:11 colors to use now click on the mobile 11:14 view at the top here to see how it looks 11:16 like on mobile since this is a mobile 11:19 app we're going to be building with 11:21 mobile 11:22 primarily and now all we have to do is 11:24 go back and copy the rest of the pages 11:36 and once you create more pages you can 11:38 access them through the breadcrumb at 11:40 the top here you can see I have the 11:42 dashboard 11:43 page and there we go it looks 11:47 perfect make sure you add all the 11:49 interactions by asking lovable to assign 11:51 an action to each button and go through 11:53 the app and test it to make sure that 11:55 you are covering all of the user 11:56 scenarios that you came up with in your 11:58 initial flowchart now that you created 12:00 all of your pages we need to add all of 12:02 the interactions just by asking lovable 12:05 to add an action to each button so go 12:08 ahead and test the whole app and 12:10 whenever there's a button that is not 12:11 working tell it to add an action to 12:21 it now if your app needs user 12:24 authentication or a database it will be 12:27 very easy to set up the back end so 12:28 we're going to I use superbase to create 12:30 a database so create an account on 12:33 super.com and then create a new project 12:36 enter your project name the database 12:38 password and your region select the 12:41 region closest to you so that it will 12:43 perform the 12:47 fastest once you create your project 12:49 wait for it to finish setting 12:52 up and once your database is done 12:55 setting up go back to lovable and from 12:57 here click the super base button at the 12:59 top and here you can connect your 13:02 account authorize lovable and now select 13:07 your 13:08 project click connect and now wait for 13:11 it to connect your project to your 13:15 database and there we go it says superas 13:18 connected make sure you read all the 13:20 information that lovable is providing 13:22 here so that you can know what you can 13:23 do with your database now back in super 13:26 base go to 13:27 authentication and this this is your 13:29 table with your users when they sign up 13:31 for your app before you test your app 13:34 make sure you go to your project 13:35 settings 13:37 here and click on 13:40 authentication General user sign 13:44 up and here under email turn off confirm 13:48 email since you don't have an email 13:51 provider set up this will make it easier 13:53 to test your app without prompting the 13:55 user to confirm their email before they 13:57 get access to the app then hit save at 14:00 the 14:01 bottom now go back to your project go to 14:04 your signin page and test the login so I 14:07 I asked to create a sign up page because 14:09 I only had a sign in page and now it's 14:12 creating a new table so that we can 14:13 create users I'll say apply changes and 14:17 in my database I can see that now I have 14:19 a profiles element I created an 14:23 account and now in my authentication 14:25 table I can see under users that I have 14:28 a new us user that means the sign up 14:30 page is working and now you have to ask 14:33 lovable to create the tables necessary 14:35 for your product in my example I need a 14:38 table for event details so that when 14:40 someone creates an event it will save in 14:42 my database so I'll just ask it to 14:44 create the 14:53 table it will do everything 14:57 automatically now if you go back to your 14:59 database here in the database 15:01 tab you can see that I have a new 15:04 element for events and it includes all 15:07 of the information that I need from my 15:09 UI so now I'll test 15:18 it I'll go to table editor here I can 15:21 see that I have two tables now and in 15:24 the event table I can see that my event 15:26 saved successfully 15:29 at this point you can click on publish 15:31 at the top and hit deploy and you will 15:32 get a link with your app live on the web 15:35 so you can test it with real users you 15:37 now have a fully functional Live app 15:39 that is on the web that you can test 15:41 with real users and it uses a database 15:44 and user authentication you can see how 15:46 easy it is to manage your database at 15:48 this point you can get feedback from 15:50 users by sharing this link just to make 15:52 sure that the usability is there and 15:54 that there's no bugs or broken paths or 15:56 something that is not working well and 15:59 make sure you include all of the alerts 16:00 that you need to communicate with the 16:02 user to communicate any system errors or 16:05 input errors and now if you want to 16:07 launch your app and host it on your 16:09 custom domain we can do that with a few 16:11 clicks just click on edit code at the 16:13 top here and you can connect your GitHub 16:16 account 16:17 here once you connected your GitHub you 16:20 can click on transfer 16:22 repository and then select your 16:25 profile and now it's successfully linked 16:28 to your get GitHub that means every 16:30 change that you make to your app here 16:32 will be pushed to your GitHub code and 16:35 now if you want to host your app on your 16:36 custom domain all you need to do is go 16:39 to netlify and hit sign up and from 16:42 there go ahead and click the sign up 16:44 with GitHub button that makes sure that 16:46 GitHub is connected to your netlify 16:48 account once you do that you will have 16:50 the option to import your project from 16:52 GitHub into your netlify 16:54 account so click on it here and then 16:58 configure your app here make sure you 17:00 enter a valid site name and then hit 17:03 deploy now all you have to do is wait 17:06 for it to finish building the 17:08 website and then follow the steps to add 17:10 your custom domain and to secure your 17:13 app it's very easy just follow the 17:16 prompts on the screen the cool thing 17:18 about a progressive web app is that you 17:19 can download it to your phone on Android 17:22 or iPhone and it will function like a 17:24 native app it will even work offline and 17:26 will have notifications just go to the 17:28 link of the app in your browser and hit 17:30 add it to home screen and now it 17:33 functions just like a native app and if 17:35 you want to release it to the App Store 17:37 you can do that by wrapping it in a 17:39 native mobile package now I know I went 17:42 quickly in this video but if you want 17:43 more detailed longer videos that cover 17:46 everything you need to know about AI 17:48 tools and AI processes for building 17:50 products I have all of that on my 17:52 community platform that I'm building 17:53 we'll talk more about that in the next 17:55 video but for now let me know if you 17:56 have any questions I'll answer 17:57 everything down in the comments comments 17:59 and thank you for watching till the end 18:00 I'll see you in the next video cheers 18:06 [Music]