Build a no-code AI App with user authentication & backend (databutton, firebase, claude AI)

Transcript

[00:00] when leveraging data button we're able to create an entire front end with all relevant things we would need in an effective landing page in addition we set up authentication that allows us to actually create real users with a real backend and allow them to sign up with Google therefore a user comes to our website hits continue with Google and we can sign in and the best part is that once they sign in we now have the ability to access backend functions and use open ai's API endpoints to actually create value and the idea we just created today is a software that allows us to get software ideas simply just providing this information over here and

[00:30] hitting generate ideas which is a real backend function we're able to get value here like you just saw in that example in today's video we're going to learn how we can build Out full stack applications using a no code tool like data button what data button allows us to do is talk to a chat bot provide some information and we can build out a full stack app therefore let's jump into today's video Welcome Back y'all today's video is sponsored by datab button their team had reached out to me I demoed their platform a little bit and I realized that they solve one thing that I don't really see with any other platform there's a bunch of cool stuff about this platform but the biggest one that stood out to me is this right here

[01:01] therefore when you're creating your app and you run into errors and you're like what the heck's going on using this platform you have the ability to talk to a software engineer to guide you in the right direction that in itself is a big selling point at least personally I think it is because of all the videos I've done in the past when it comes to these topics errors are going to ur issues will happen and data buttons guarantee of basically allowing you to talk to a software engineer directly to help you with your application not only are you learning but you're also building out the application is super cool knowing this let's go and create our own appc application today and it seems like a really big goal of data

[01:32] button is not only connecting like a nice looking front end like this is a nice looking website but also the other part of a software which is the most fundamental part of a software which is the backend our ability to do functions our ability to access stuff and provide value to our consumer so in this video I'm going to show you how to connect open AI API to provide some value let's do it let's get started simply start with either email or Google once we're logged in new app the app we're going to create today is going to have three fundamental components first one we're going to have a homepage that's going to allow the user to just arrive to her

[02:03] website and sign up for a software second part authentication process each user that comes to a website is going to be authenticated EG they can sign in and sign out and then lastly the fundamental part of every software is the value we provide so the purpose of this software which is going to be kind of funny is to give you software ideas therefore what we're going to do today is we're going to create a form where you put in ideas that you have or different components of things you want to do within a software and then we're going to get idea generator from an open AI API endpoint or basically we're going to get

[02:34] artificial intelligence to tell us the best software idea to come up with therefore let's jump in what's the app name I'm going to go ahead this is going to be a dog theme app we're call pup pup and pup pup is going to be an amazing software application that tells us how to create other software applications and give us ideas for software applications therefore the pitch is this will be an app that allows us to fill in a form and based on the form data get ideas and software ideas we could do put in the app description it will be a form data we fill in that then we analyze by opening which gives us ideas target audience software startups for the main screen size we're going to do desktop

[03:04] here main theme we'll do dark if you don't know what theme needes that just means like the UI EG darker palette in the colors or lighter palette in the colors design guidelines let's just throw something at it real quick we'll say design it like a Spotify dark UI let's see what happens and then as I discussed before which makes this platform super cool is we could schedule a meeting with an app expert don't really see this in the industry and the ability to talk to a software engineer directly while biding your app is like education on tfold generate starting points of AI we are generating a full

[03:36] stack app let's do it okay we're loading in let me go and explain this interface a little bit so you get a little bit comfortable with it first things first based off that limited amount of information we're already given a pretty good-looking user interface here right now this is designated as the homepage but we'll make this the off page or basically when a user logs in but what you'll see here is that first off we can see what the design looks like in different uis or different devices is a better way to say it so for example in tablet let me get out of the way tablet and mobile this is going to be needed in any

[04:06] type of web app I personally don't like developing in Mobile but it's just you need to do it okay a lot of people be on their phones nowadays goinging back over to desktop here if we go all the way to the left this right here first off Pages this is going to be any type of web page that you have on your website homepage sign-in page sign up page terms of service privacy policy etc etc etc idea being that basically the homepage is just the default URL the sign up page would be like slash signup next is UI components these are going to be different components that you can create

[04:37] that can be used throughout your application really good example this would be like a newsletter CTA or you know when you go to a website or a Blog and it has like that little like box that says like put in your email we can make a reusable component that we can put throughout our website if we chose to do so next is backend which is very important in software development this is going to be where we can set up logic that we can access artificial intelligence with and then finally media public internal storage media public will use to show you some cool photos I got some cool photos y'all some photos of some dogs trust me I was using do to create these photos and just let me show

[05:08] you one for example is it me or did Del and open AI like get an improvement I was creating these images and I was like these are actually pretty solid now so we're going to be using a couple that I have I'll show you how to do that how to upload images and use them throughout your website now that that is done let's check out some other stuff here next thing notice this is kind of like a local host 3000 if you don't know what that is don't worry that's like a local development environment where I can actually put stuff in here and you know kind of mess around which is cool next you'll be able to actually look at let's say the homepage look at a specific code

[05:38] by going to edit code okay pretty cool you can go to history which is nice here which will be versions of the code that we push so if we ever need to roll back to one cuz we're like whoa whoa whoa we messed up we can do that and then the big one here the one that takes all the cake is our nice little chat here this is what's going to develop our software here today and I'm going to show you how we do it step by step therefore now that you're comfortable with the user interface or what the heck's going on let's do it we shall proceed so the first thing I want to do here is I'm going to add some images here of stuff I want to use throughout the website so

[06:09] I'm going to come over here to this folder here and say add media simply select the media you want to add with all my media added let's check it out we got a dog on a laptop we got a dog for a profile picture we got a dog for when we make a conversion on our software we have a dog in vertical portrait next we have a dog writing out a software idea on a whiteboard try to steal that code right here the way their credit system works is that you can have a ton of chats with this chat bot if you need more questions understanding Stuff Etc you can do that the only times it cost you a credit is when it does a code output let's start off here okay looks

[06:40] great but can we make home a new page for SL dasboard that'll be the URL and then let's create a new page for when a user for surise we will call it landing page now what's really cool here and I'm going to show you a nice little trick here is that when you're referencing stuff over here use this little hashtag thing when I do hashtag here I'm referencing home therefore I'm going to put that right there delete that and it knows I'm referencing the home up here let's start off here let's hit enter Now We're Off to the Races the agent was able to understand the context of what I'm asking for and it gave a pretty good suggestion here so it's going to create the new landing page it's going to make

[07:12] it so that in order for us to have navigation it's going to create an app. TSX this will make more sense and then obviously we're going to move this page to a dashboard that all looks good to me I'm going to say yes proceed enter this is the new age of coding you just talk or text I guess so once it did the steps outlined here we able to get our landing page our dashboard and then what I'm going to do is I'm actually going to tell it to put the landing page code in the home page here that's going to be a lot more effective in addition as you'll see here from the last chat it wants me to go ahead and just deploy this at

[07:43] their URL so for now we're just going to deploy it real quick and then we're going to keep going here hit deploy we're going to do pup pup this is another big feature by data button here is oneclick deployment e traditionally software deployment in order to deploy an application you have to put lines of terminal commands to do so here it's just one click while that's doing that let's go ahead and fix some stuff here oh wait it has actually deployed let's go and check it out not bad so far we're at a live website link let's go ahead and combine the lny page and actually put all that code into the homepage I'm me use the little hashtag Tags I'm going to say okay hashtag laning page let's

[08:14] actually just put this code in the homepage writing code super cool it went ahead and did that for me and what you'll notice is that when you make changes or big changes It'll ask you to redeploy the app and that's just because so it reflects live on that website link we saw earlier for now though we got our homepage we got our dashboard I'm going to go to delete landing page because homepage serves landing page now so we don't need this anymore delete perfect So currently how the application functions and they wrote all this copy this has all been written by data button here is we have a nice little white choose pup pup AI powered targeted

[08:44] Solutions instant results and a nice little CTA here as well in addition if I click this it's actually linked to dashboard up to this point let's going to create a signin page so we have some authentication first before we do that though it's called P pup so we need to see some dogs I'm going say okay I like homepage to add better UI let's go ahead and add these images I did the little tag feature here # dog whiteboard # dog laptop remember this is coming from my media here then I say make the images have round corners and fit well hit enter and let's go so we should expect some dogs to show up here so this is super cool this already looks super cool

[09:16] one did a little mess up here so let's go ahead and tell it that it went in and told me that it added the dog of whiteboard as a transparent element I'm going to go ahead and change that though so let's go and do that we're going to say for dog whiteboard I reference again with the tag feature make it just so it's it own container own element so we can see the entire image add padding you know space around it and choose around corners and then let's put it above why choose PP up here and then put it on home what's very fundamental here is use that tag feature let it know exactly what you're referencing over here here for the best outputs all right let's go ahead and do a oneclick deploy deploy

[09:48] app this is so we can see the live reflections of our changes on that live website link so while that's deploying what's really cool y'all is the ability for responsiveness right so we can see what it looks like in tablet pretty cool mobile pretty solid they also added a nice little hover effect here so it zooms in a little that's cool and we're looking pretty good here for pup pup once it deploys you can see your live changes here click again and we're officially on the pup pup website pretty good let's go ahead and set up a signup method here we're going to go and say

[10:18] okay let's create a signup method let's just do Google I want this on a new page called signup this is going to lead to us creating a back end here so we're going to be using Firebase to do so if you don't know what Firebase is just think of it this way this is our way of accessing the cloud and on top of that they have a free plan and they have a paid plan but it's a pay as you go plan in reality for most software development at least in the beginning basically everything's free you get credits from Google the free plan is like very very very generous when it comes to everything you can do with it so for now we're going to be using Firebase what you'll notice as well is that while it's writing the code we can actually see

[10:49] live updates over here okay let's get started here so went ahead and created a sign up page an auth rapper is going to be able to give all the relevant credentials we need to give in order to do said things that we want to do sign up an authentication and the first thing it's asking for is our Firebase project ID so let's go ahead and create a Firebase project once you sign up with your account with Firebase it is free we're going to hit create project with this project I'm just going to name my data button name yours whatever you want and then here you can actually enable Google analytics for your project that's cool we are creating our Firebase project so we actually have a backend for a no code app once it's done we hit

[11:20] continue and here we go we're going to come up here to our settings project settings so the first thing it's asking for is our project ID so that is that right here all right we're going to hit that and hit send next is asking for all the relevant information with the API key off domain project ID don't worry that's easy to find we're already in our settings so all we got to do is scroll down and that will be found right here so let's going to set it up we're going to click this button right here this means web app I'm going to give it the exact same name Register App this is going to be blurred out for obvious reasons but all you need to do is simply

[11:50] go to the con tier that says Firebase config and copy all of it just this part though y'all just the Firebase config don't copy all of the code like this little button right here just this part right here once you do that just paste it right there and hit enter so once we do that we'll get a message like that let's just go ahead and just deploy this app as well the next thing we're going to need to do is in our Firebase project we're going to need to enable authentication to do so we're going to go to build here hit authentication now I already enabled it but you're simply just going to hit get started once you hit get started come to sign in method now in today's video we're just going to be setting up Google because Google's fast Google's nice and everyone loves

[12:21] Google hit Google hit enable provide a support email this will be associated with your account hit save once you see that you're good to go now let's go ahead and add functionality to continue with Google I'm going to go ahead and reference the sign up page okay make it so when I sign up I can sign in with my Google account I have enabled authentication in Firebase Google signin as a sign note sometimes the code output would fail but don't worry the agent just keeps going at it until it succeeds so going to deploy this app as this is pretty fundamental deploy app once it's deployed there is one major thing you need to do to make sure that it works come to your application obviously this

[12:52] is the application pup pup go to your url up here and just copy it then coming back to Firebase here in Authentication go to settings go to authorize domains we basically need to tell Firebase in our back end like hey we own this so to do so you're just going to hit add domain paste it and then hit add once you do that everything should work fine continue with Google we can create an account with Google looking good so far let's go ahead and add some more logic here first piece of logic I want to add I want to make it so that all that get started get started come down here start generating ideas this is going to be

[13:23] attached to the URL of the signup page rather than the dashboard EG when I hit this I shouldn't be going here I should be going to the sign up page so let's do that I'm going to Simply put in okay on the homepage make it so that all the buttons send us to the sign up page enter and then lucky for us we can real quickly test this so get started sign up page come down here sign up page okay we're looking good here now coming over to the sign up page it looks a little blank I don't like that let's add another dog we have some dog photos go ahead and use this photo right here on the sign up page now when writing this

[13:54] prompt I want to reference something specifically in the page EG this little brght so I'm going to hit Ed a code what I'm going to do is I'm going to scroll down here and I notice that it's right here it's brain I don't like that I want to replace brain with my new image so I'm going to copy that and in my prompt here I'm just going to say and replace it with then the line of code and then we have this okay on the sign up page use the tag feature add this photo reference the photo make it a circle Max width of 250 pixels and give it a border with a shadow then put the line of code don't worry the AI gets that I'm going to enter here and notice

[14:25] how this is Al all lame in terms so push it to the limits whatever you want the much look like see if it can do it sign up for pup pup looking pretty good here this is exactly what I wanted next piece of logic we need to add here is that basically when I sign in let's go ahead and arrive at our dashboard okay now let's have it when I sign in with Google we are directed to the dashboard Page hit enter there we go let's go ahead and deploy this deploy app and this right here is what I was referencing earlier in the video where you can talk to a software engineer directly for any help you need so you run to issues errors

[14:56] problems you got a little chat bubble right there and you can talk to to Martin let's talk to Martin when you deploy your app you're going to need to do like a little bit of a Refresh on the page so it shows continue with Google and we have officially logged in now on to stage two here we've successfully created a front end that has authentication and we can deploy this to a live website link the next question and one side note real quick if you're like Corbin I don't like that website link I don't like it don't worry just hit deploy you can add your own custom Dain right there now back to what I was saying let's go and connect this to an AI provider like open AI put information there and actually get an output there

[15:27] because it's time for pup pup to tell us some good ideas let's start off with the basics here okay I want to connect my open AI API key and API key in this context gives us the ability to access artificial intelligence in the cloud hit enter therefore to get started here make sure you go to open.com just type in openai API dashboard sign up with an account it's free let's grab our key simply go to that link right there and just hit create key with your key created simply paste it hit send perfect once you see that we're good to go once we have the key all good to go we're going to say okay for dashboard this

[15:58] right here have it for the form I can input the requested data and when I hit generate ideas EG I'm referencing this button right here we use our open a API key to do a chat completion of software ideas based on this and the ideas show up in generate ideas section let's push it to the limits hit enter while this is generating I want to let you know about one other cool thing about data button is that their backend is fully python they have a fast API system where any type of python packages you could possibly install in here work really well that's kind of why I like data Button as not only can we get nice

[16:29] little front ends and uis but also have a pretty scalable back end let's let it keep generating once it's all done let's go and deploy it now that it's deployed Let's test it out I'm going to go ahead and input industry Finance target audience small business problem statement p&l business she take too long to read no one wants to read them key feature is using AI to analyze and give a summary of what we can do and with all that done generate ideas we are generating ideas and they should show up over here and here's a result finance gbt and a power pnl analysis assistant

[17:00] key features AI power pnl statement analysis automated Financial health indicators and Trend detection real time alerts for significant financial changes potential impact dramatically reduce the time spent on analyzing p&l statements while improving financial decisions making accuracy looking pretty good y'all when leveraging data button we're able to create an entire front end with all relevant things we would need in an effective landing page in addition we set up authentication that allows us to actually create real users with a real backend and allow them to sign up with Google therefore our user comes to our website hits continue with Google and we

[17:32] can sign in and the best part is that once they sign in we now have the ability to access backend functions and use open ai's API endpoints to actually create value and the idea we just created today is a software that allows us to get software ideas simply just providing this information over here and hitting generate ideas which is a real backend function we're able to get value here all generated by our own artificial intelligence provided by open AI if you feel like you learned something in today's video make sure you leave like it's completely free or leave it for the dog the best part about data buttons is that if you ever run into issues you're like Corbin I got an air don't worry talk to that little chat bubble we saw

[18:03] earlier and get some help without further Ado though I'll see you in the next video we just created a full stack app why choose pup pup P pup two random videos that's my face I'll see you in the next video

Build a no-code AI App with user authentication & backend (databutton, firebase, claude AI) ​

Transcript ​

Build a no-code AI App with user authentication & backend (databutton, firebase, claude AI)

Transcript