We Built a Newsletter Website with Databutton’s Full-Stack App Builder
Other Videos📅 2025-06-26
Transcript
[00:00] Data Button just got a massive update that makes any type of integration with Superbase kind of irrelevant. And the big update we just got is datab now handles all authentication integration and database integration, which means when you're building your app, you don't have to deal with all that complex stuff when it comes to signing in a user, logging out a user, or alternatively storing the data on your actual platform. Today's video is sponsored by Data Button. Let's check out the software we're going to create together. Let's have artificial intelligence build out an entire application. And this application's purpose is going to be the
[00:31] following. This right here is going to be a useful tool any business really needs, which is going to be the ability to either sign up people to your newsletter or a weight list. All we do simply is put in our email here. Let's do this. And we've been successfully added to the list. The update they have today is that for authentication, for a user to sign up, or alternatively for databases, it's all done by AI. Now, originally we would have to set up the keys, set up an environment, a bunch of more complex work, but data button now handles it all. So, let's go and create our app. I'm going to come up here to
[01:02] get started. So, when creating apps with data button, we just give context of the app we want to create and then AI handles the rest. So, today we're'll be creating that weight list app. And actually, instead of a weight list, let's just set up the logic for a newsletter, which is pretty cool and pretty useful, especially when you want to grow that audience size list. We're going to say a newsletter sign up form for my business. I'm going to hit continue. For the second step here, this is where we put in wireframes, PDFs of further context of the application we want to build. I'm going to leave a link down to a data button video that I show you where I built from a wireframe and a
[01:33] small description of the app. I added the relevant files here and was able to build out a full-blown application. But what I care about right now is the design. And specifically, the design we're going to take here is this right here. Now, for your context, go to any type of app, website, or whatever it may be. So maybe you really like Chad GBT's design. To give data button context to make the UI look like that, simply start screenshotting parts of the website. I'm going to command shift 4 and screenshot this. And then I'm going to add the file here. Leveraging artificial intelligence, it's going to be able to visually contextualize the information
[02:04] found on that screenshot. Or a simpler way of saying this, basically the AI is like, okay, you like lighter theme, you like darker theme. Oh, they did like it when gradient was used. Stuff of this nature. We're going to hit let's start. So we're creating our app right now. And what's really cool with this update, y'all, like I said in the beginning, is it's going to handle the entire database integration right off start. Now, this is going to take a couple minutes, but just to give you context from real software development to set up and initialize an app and get everything ready for your development environment. This could take up to an hour, if not
[02:34] two to three if you're brand new. But for now, we were able to set this up within four or five minutes. So, the first thing I want to point out with this update here is this user and data. This app comes preconfigured of user management and database. When you store data in the database and user registers to your app, they will appear here. I think right now in the market when it comes to integrating into back-end logic, there's kind of a gap. A lot of apps are amazing at creating good frontends, but that connection to the backend is basically what makes your
[03:05] application actually work. End of the day, you can have the most beautiful looking app, but if you can't sign up a user, no one's going to use it. Next, what you'll notice with data button is that they have a task feature. So, this is super useful in real software development. We use something very similar to this in Jira where we'll set up different stories for the individual to-do for different things we want done in the app. For now though, let's do this first one here. Let's build our front end. So, I'm going to go ahead and say resume task. And the entire workflow when building out this application is going to happen over here to the right. So, once a task is done, it's going to
[03:36] ask for confirmation here of yes, Mark is done. To view the front end, we're going to come up to preview. It will load the live front end here, which is pretty nice. And as you can see, this was almost spot-on based off the screenshot of context we gave, which was this right here. This is a great starting point. And what we can do here is we can ask for changes. So, a couple things I want to do. Let's first learn how we add an image to our app here. Second thing is I want to change the coloring here to much more of a green hue. So, we're going to go ahead and say, okay, add the attached image and make it in the profile circle. So, we're going to attach an image here pretty
[04:07] soon. And then we're going to say also for the coloring, can we do more of a dark theme with a green highlight? Let's first add our file here. So I'm going to hit this button right here. And then you're going to select your image. So I've gone ahead and uploaded my image here. And we can go ahead and hit enter. Now this is the image. I don't know who this guy is. He seems pretty cool though. So I want that image though to show up right here in CB. And then I want like a darker theme and a nice little green hue. So while we let data button AI handle the front end, let me show you the two major things we're going to add for back-end functionality in this application. So the major
[04:37] functionality I'm going to show you how to do is first integrate a third party application. So we're going to be using Mail Bluster for our newsletter here. The steps and logic I'm going to show you though can still be applied to Mailchimp, Sen Grid, and all these other different newsletter marketing softwares. In addition to my right over here, you might be like, what's why is it all white? That's because of the fact that I had to hide these emails for high-risk situations. cuz you don't we don't want to leak people's emails. What I'm going to do is I'm going to prove to you that this works by subscribing my own email and then we're going to see it show up in this leads list found here at
[05:07] Mailbluster. The second thing I want to do here is leverage this native integration by data button here of a database. I want to store all the relevant emails that we collect through this form in a nice little dock path. So, we're going to get a double whammy here. We're going to subscribe to our newsletter software and on top of that, we're going to store all this data in the back end of our app. Pretty cool stuff here that you can apply to other context. And here we go. You know a task is done when it says mark as done. And this looks pretty cool, y'all. So, we got our nice little profile image that I added before. And then on top of that,
[05:37] we have a new cool UI of like a gradient green hue and a dark theme UI. And we can preview these on desktop, tablet, and even on mobile. Now, what's really cool about data button here and anyone that's ever done software development is the one thing that front-end developers typically hate is going from desktop to mobile. What's cool here is that it's already optimized to handle this kind of logic. So, it makes it super simple for you to create a responsive application. So far so good. Let's go ahead and go back to plan here and mark this task is done as I like my front end. So,
[06:09] following this, we can manually create task. Maybe the my AA2 we don't want to proceed in this order. we want to do something else with the application. But for now, this is actually kind of spot on of what I wanted to do next. Build newsletter signup API endpoint to capture and store email subscriptions. This is spot on. So, let's go and proceed. I'm going to say start task. So, this step's actually pretty cool. And what this step is doing is part one of what we wanted to do here where we were going to add this email to our database found in our application. This is going the extra mile. Not only is this creating the HTTP callable, the
[06:42] backend function that when an individual puts in an email here, we're going to be able to grab that data and then it's going to take the extra step here of taking that data and then putting it in our database found here. As you can see, we're creating a new doc called subscribers. It's okay, this is actually really cool. So, it's giving us the email. It's giving us the status created at like all the relevant stuff you'd want to see in metadata like the timestamp of when the email was created is doing for us. I'm impressed y'all. I've actually never really seen an
[07:12] application take this step this far. It also looks like data button has gone the extra mile here as well of creating a project overview which is a UI friendly way of looking at your application. So it'll give you all the relevant files to create the UI and then it shows us the specific backend logic here of the API that we are calling. So for this API, this is the subscribe to newsletter and then the back end of newsletter of that database. When I say database, don't make it more complex than it needs to be. This is our way of storing text, our
[07:42] way of storing files. This is functionally how we can reflect data outside of the application itself. So functionally it's currently saying that it works. It's connected. So, let's go to say open preview here. And here's a useful tip when doing this kind of development. If you're in Chrome, rightclick, hit inspect, go to console, and we're going to be able to see what happens when I put in an email here. Also, this looks like a pretty good landing page. I like it. I'm going to put my email here. I'm going to say, let's do this. So, it is referencing that the email was submitted. Let's
[08:13] check the database. Come up here to users and data. And it should be here, but it isn't. So, let me go ahead and show you how to troubleshoot when this kind of situation happens. So what I like to do in these kind of situations is first off give whatever console log you got. So copy that and we'll say this. Okay, we submit the email. Here is the console log. We'll add this line so it has more context here. But I don't see it in the database. Can we get a confirmation from the button and do a cool animation saying subscribed once it's put into the database with a confetti emoji. Two things I want you to know here. First, standard practice when
[08:44] it comes to debugging the front end is looking at that console log, seeing what messages show up. Second, notice how I use the terminology of cool. I didn't have to use specific developer jargon for the animation we're about to see right now. AI is smart enough now where it knows what you mean by make it cool animation. I'm going to hit enter and we're going to let this keep building. What's nice about working with data but an AI is that it'll always give an overview of what it's about to do. First, it wants to install like a confetti library to do a nice little confetti emoji. Next, it's going to actually connect the form to the API and finally give us a confirmation animation
[09:16] like we requested. It has prompted me to say mark as done again. So I'm going to check if it works. Now look at that. If there ever is an error where it can't render the preview, it gives us the ability just to click a simple button here of repair preview and it's going at it. And it repaired it. So let's go and check it out. We're going to say open a preview. Remember inspect console and let's see. I'm going to put in the email here. Then I'm going to hit let's do this. Now before we check if it works, let's just take the extra mile here to make this a live website link. To do so, we're going to come up here to deploy and then say deploy app. In traditional
[09:46] software development, this would require multiple terminal commands, making sure you're logged into the correct backend, making sure that you run the correct script for the front end and deploying it. For data button, though, it's simply just one button, one click, one deploy. Once it's done deploying, come over here to deploy, and you can click this button right here, open in a new tab. Now, I went ahead and tried to sign up my email again. But remember that console log logic? We got an unexpected error. If we open up our console log, you can see the errors right here. And all I did was simply put in that exact error that I saw into this chat and it gave me the
[10:18] solution. Essentially, what's happening here is that since we're not putting authentication into our application, this is where the user logs in and then tries to call this function, that would go all good. That would be sunny days and rainbows. But because this is a newsletter email subscription collector, this is the type of website where anyone from the internet can access it and provide their email to subscribe to your value. So all we need to do is simply what's said here. Go to the three dots in our APIs of newsletter and disable
[10:48] off. Once we do that, I'm going to redeploy and try again. As a general rule of thumb, anytime you make a change in this environment here, redeploy your app. So you can actually see that change functionally happen in the live website URL. With our website fully deployed here, let's try again. So I'm going to hit open and preview here. And standard practice for front-end development, always just inspect console log, especially when you're building out your application. And then let's put our email here. Then we're going to try this. Can we try this? Let's do this. Maybe it works. And it works. And what's really cool here was my original intention was just putting the subscribe
[11:21] with like the confetti emoji data button with the extra mile here of adding this really awesome confetti gif on the entire web page itself. I like it. It's confetti. It's a potty. It's a potty up in here. Let's confirm though it's in the database. So we're going to come up here to users and data. And there we go. We got our email here. Subscribed Corbini.com. I did another test earlier of contact at webcafeai.com. Both are subscribed in our native database. And up to this point, I haven't written a single line of code. Just talking to data button. That's all. Now, here's one very useful tip,
[11:51] especially in the debugging process. You're here, you're getting errors. You can copy from the console log, paste them here. But one thing you can always do to proctor AI to give better results is ask for the AI to give more console logs in either the backend function or the front end. To do this, you would simply use logic like this. Here's the air. Paste the air from the console log and then say give me more console logs. And this is going to write actual console logs in the code itself. So newsletter here. What you'll notice is that everything that says print, these
[12:22] are console logs for a Python function. All you really need to understand is this helps AI debug when an error happens. The more print, the better. Just start printing. So we have successfully finished task two here. So I'm going to hit mark as done. Now, here's what I want to do real quick, just to show you some real quick front end, some front-end jazz. Let's say for this profile image, I want a nice little hover effect. I can just screenshot it, add it to my chat over here, attach image, and then simply ask, can we add a cool hover effect for this part? Two things I want you to know. First thing, cool is coming up again. In theory, I
[12:54] could say, can you make this part enlarge on hover? You know, add a brightness effect, add a glow effect. You can be more specific. Second thing is, notice I'm not referencing any of the code. I simply screenshotted our front end here and just asked for it to contextualize it itself. And watch this. We'll go ahead and start the task. And boom. Pretty cool stuff, y'all. So, now that we have a responsive front end, it successfully adds that email data to our native backend found on our application. Let's send that data out to our newsletter software. So, to do this, we're going to go to plan here and we're
[13:25] going to create a new task. I'm going to say use mailer API and send this email as a new contact there. give context of the overall objective and then in the description you have two options. One, simply search into Google Mailchimp API, Mail Bluster API, Sang Grid API. Go to the API documentation. You'll know you're there when it says in the top left in bold letters API documentation. The first option here is copy the entire link to the documentation. Provide that in the description. But what I like to do sometimes is just kind of click through. What you'll notice here is
[13:57] like, okay, manage leads, create lead. Oh, this is what we need to call. So, I'm just going to copy all this. Quite literally, copy all this. You don't need to know what any of this means. That's the advantage of coding of AI. And then paste it here. And then once I paste it, don't need to format it. I'm going to say create task. Now, one thing you need to know when connecting to thirdparty APIs is you'll need to provide the secret key from that API. This essentially tells Mailchimp and Mail Bluster, hey, you actually own this account and you can send data here. Now, typically the provider's API key will be found in the settings, and there'll be
[14:28] some type of tab called API keys. If you don't know how to find it, search your platform's name and say, "How do I find the API key." Once you're here, you're going to create your API key. I'm going to go and create my API key here and then copy it. Coming back over here, let's go ahead and open up a new chat. And we're going to go and start that task of MailBluster API start task. Now, what's really cool here is I don't even need to stop this task. data button has enough context to realize you need an API key for this and just simply ask me to paste it here. So, I'm gonna do that. As you can see here, please provide your mail blesser API key and then hit send
[15:00] and paste it here. Here we go, though. This is exciting stuff. We are quite literally integrating a third party API by just talking to an AI. We're going to confirm this works together as we're going to go to my real newsletter list and see if the email shows up. Another thing to note, especially when it comes to more complex code like this, is take the initiative, read the chat, understand what the AI is thinking. This is going to help you long term when building out applications to know what to say and know how to handle these more complex operations. So, I went ahead and
[15:30] tested and said it was successful, but let's confirm. If this was successful, this was able to complete this task in like four minutes, which would be really cool. So, I'm going put an email here. I'm going say, let's do this. So far, so good. We subscribed confetti party and what do you know in my real newsletter list as you can see right there it was able to successfully subscribe this email with a nice little subscribe symbol here and now we've successfully integrated a third party API into our data button app. But when you look at that y'all I told y'all we would get to
[16:01] this point. We were able to create what was done here here very fast. I think this new native integration by data button is definitely a gamecher especially if you don't want to take that extra step of dealing with all the complexity when it comes to authentication and database native integration. But for now though this works and this is pretty cool. Nice little landing page collected emails. I'm going to make sure I link other data button tutorials in the description down below. We created a invoice handler together. There's another tutorial where I gave a bunch of context about creating
[16:31] like the next B&B, wireframes, descriptions, all that fun stuff will be in the description down below. But as you already know, those are two random videos. That is my face. and I'll see you in the next