Vibe code your own invoicing automation app for small biz with AI (zapier + databutton)
Other Videos📅 2025-05-16
Transcript
[00:00] I'm going to show you how to build out a business software that will handle your invoices all automatically. All done through some vibe coding that we'll do here together. Step zero to step done. Our text stack is going to be Zapier and data button. Sound good? Let's jump in. Welcome back y'all. In this video, we're going to be creating a software together and I'm going to make it as simple as possible. The objective of the software is to take invoices like this, drag them into our software, automatically extract the relevant data, and push it towards wherever we want. Today's video is sponsored by Data Button. As you already know, me and data bun have been working together to create some really, really
[00:30] cool videos. So, let's create your business software. To get started, we're going to do new app. Now, when describing the business, we're going to say we are creating an invoice handler. I will provide my invoice PDF and I want the data extracted and formatted. The best part is that if that's not your specific use case in this video, you're still going to learn fundamental things when it comes to creating apps of this context. Eg uploading a video, eg uploading a Excel sheet, CSV sheet. This video is more focused on PDF, but you're going to learn the steps for other stuff. Continue. The next two options give us the ability to put in specific requirements inspiration for your app. For me, I'm going to look at the
[01:02] integrations tab. Now, what I know for a fact of what we need here is going to be a database of fire store. Coming down here is going to be firebased storage as well. Fire store, I want you to think of as our ability to just store data that's like text. Think of like a Google doc like all the text there. That's what we store there. Firebase storage that's for files themselves. Like the actual PDF itself is going to be stored here. If you're a complete beginner and any of this doesn't really make sense up to this point, don't worry. Typically, just opt to use an AI chat for those kind of questions you may have, but I want you
[01:33] to think of any type of web application or just website or software. It's usually a cake. And one part of the cake is like the nice part, like the the coding on the outside, like when it looks really good and you want to eat it. That's going to be what we call front end in this kind of development. The back end is like the inside of the cake. You know, like maybe you get like a fudge cake, all that fudge in the middle. That's the back end. That's the stuff you don't typically see on the outside when the cake is just being shown to you and they're like, "You know what? This cake right here costs 50 bucks, 10 bucks if you want to add a name and a birthday." But that's the
[02:04] idea. So, one thing data budded does that real software companies typically do with software engineers is the ability for tasking. And this is pretty cool. So, what we can do here is it already created out a pretty good standard operating procedure to how to build set application. So, I'm going to start here just creating the landing page and the upload button. So, I'm going to come here and say start task. What this allows us to do is to ensure that it doesn't just mess up on a task. We can ensure before we confirm it on our end and mark as done, it actually looks good and we are confident in the value that it provides, the quality, the
[02:35] UI, etc. Especially in this context. So once the task is done, we're going to get prompted here, could you please take a look at the landing page in your app preview and let me know if it meets your expectations? We come up here to preview, let it load in, and here we go. So we come down here. I already gave it a nice little name, Invoice IQ. I scroll down and you can see we have the ability to actually upload the invoice here. Pretty nice. So now that that's done, I'm going to check it as done. But in theory, I could say, you know what, it needs a little bit more color or less text, etc. But for now, that looks good for me. Done. So for current app right here, we have the ability to just have a
[03:06] nice little UI. Let's add the ability to actually upload our invoice to Firebase Storage. So I'm going to go to create invoice upload functionality with Firebase Storage. Hit start task. Now, in reality, what this is going to ask us to do is basically provide our Firebase credentials. Do we have access to Firebase? So, actually before we keep proceeding with that, I'm going to pause this task and we're going to add our Firebase. You're going to simply go to firebase.com, create an account. This is a Google product. We're going to say create Firebase project. Project name. I'm going to say invoice. This will be specific to whatever your project is. For now, I don't need analytics because end of the day, this is going to be an
[03:37] in-house business software. We don't really need to know if there's traffic coming into it because we'll be the ones using it within our company. Best part about using Firebase as well is that most of what you're going to functionally do, you won't really be charged, but you can check out the documentation when it comes to that. Just type in Firebase pricing on Google. A lot of it's pay-per-view, but they give a ton of free quota for different tasks. So, now that we've created that, we're going to come over here to web here and we're going to create our web app. So, we're do invoice register app. And this is the information that was being requested earlier, this Firebase config. So, I can go and just copy this
[04:09] and we'll hit continue to console. So if your Firebase app created, we'll add the credentials here pretty soon. Let's go ahead and proceed with my y3 which is the functionality. So I'm going to say continue with my y3 and I have my firebased credentials. Mia3 is identified right here. Coming over here, I'm going to copy this right here and I'll paste it here and hit enter. While that's going, we're going to enable two things. Over to build here, we're going to enable fire store database and the fire store. So fire store database. Click it.
[04:39] create database. This all can be default. For now, we'll do in test mode to confirm everything works. We're going to hit the rate. This was a database as I mentioned earlier where we're going to do textbased data. Storage is where we can actually store the PDF itself. So, I'm say upgrade project here and you'll need a billing account, but this is paid per use, right? So, unless you like are storing a ton of PDFs, like thousands of PDFs, you probably won't get charged. But look into the specifics on Firebase cost. Set your budget. So, if you are a little worried that it might go over, I'll set it to 25 and hit continue. There we go. We have our storage enabled. Get started. Pretty standard
[05:11] stuff. Use all the defaults. Start test mode. Once that is created, let's jump back over to data button. Now, one thing you'll notice which is really nice about this task workflow is that we'll get a bunch of chat over here. We'll get simplified versions of what's even happening. For example, integrate the invoice upload form component into app.tsx landing page, replacing the placeholder button. User can now select and upload PDF files directly from the homepage, which makes it so you don't have to read through all this. You'll typically get prompted with done. Let's see if this actually works. Preview. I'm
[05:42] going to scroll down here and let's choose our file. I've chosen my PDF and let's see if this works. Okay. Wow. Really, really, really cool stuff here. Data button. Okay. That's amazing. Super simple functionality of just me saying a request of uploading PDF to an app. And we actually did that. Invoices. And we have our invoice here. Click it. Oh, this is cool. This is next level, y'all. All right, so this is amazing. I love this already. We have functionally
[06:13] now have the ability to actually upload PDFs to our back end of our app all through text. Now, the next really cool thing is that can we actually format the data that is found in the PDF. So, coming back over here, I'm going to say done because it successfully did that. Now, I'm going to ask it directly here because I know actionably the next step would probably be just to extract the data from this PDF and then store it in storage or Firebase store. So, I'm going to simply ask this. Okay, this is great. It all works. Now, with this upload PDF, can we extract all the text and store
[06:44] this text data in Firebase database? Hit enter. We don't always need to follow the exact steps here. We can sometimes ask for custom steps here. Now, I'm really curious on how this is going to approach this. So to do this, it actually wants to start with my ya4. We'll do that. Proceed. It did ask some preference questions here, but typically you can default to the AI's assumptions and you still will get good outputs. Now, while that is working on creating the text extraction part of this entire interface, we are going to be jumping over to Zapier to process this even
[07:14] further. We're going to be using a tool within Zapier called a web hook, which I'll explain, but it's going to be pretty simple for us to really leverage this kind of data anywhere. What you'll also notice in the development process is that sometimes it'll be installing packages. This is very standard when creating web apps or software is that there's going to be certain what they call dependencies which give us the ability to do extra capabilities with an application. A really simple one and I know you're familiar with is Stripe. Like anytime you do a checkout that right there, Stripe itself is what we would call a package that we would install if we wanted to have the ability
[07:46] to do monetization in this context. when looking to create custom tasks like I did before, sometimes we create new stories like we see right here. So, what I wanted to do was actually extract the data from the PDF from the front end. This will be actually more cost effective in the long term. So, we don't have to put too much pressure on the back end. And as you can see right here, we got a fully listed formatted process data went through in order to achieve this. Now, mind you, we are coding files that like 5 years ago would have been pretty complex for someone to do. So, this may take a couple minutes, but let's see if it works. Goal being that
[08:17] we essentially upload a PDF and extract the data and store it in fire store. All right, scrolling down here. We're going to choose a PDF. PDF selected. Upload PDF. Nice. So, we got our second PDF. Good. And it didn't store the data. Well, that's fine. Let's go ahead and give more context. So, I'm screenshot this. Coming over here, I'm going to simply put we uploaded the PDF, but see no text data being stored in fire store. And then give more context. We're providing an image. Go. And we're going to hit send. When coding with AI, sometimes provide images of the airs you're facing. makes it a lot easier and gives more context to the AI. Also, when
[08:47] dealing with application development, here's a good rule of thumb. Right click, inspect, come up here, go to console, and if any errors are happening, as you can see right here, copy them and place them in the data button chat. When working with code, console logs are everything as that's our way of getting clarity when we run into issues like this. When it's ready, you'll get a nice little block here saying it corrected the error and is ready for retesting by the user. Preview. Let's try again. Upload PDF. And here we go. We got the nice little data path, extracted invoice data, a
[09:17] little unique identifier, and then you can see our extracted text here to confirm this is the correct text. We got 750 USD due in November 20th, 2023. And as you can see, 750 USD due in November 20, 2023. So, pretty good there. Now, as a human, this data looks a little bit crazy, hard to read, but as AI, you're able to understand this right away. I guess some of the perks of being artificial intelligence, you're a robot. But so far in this tutorial, you have learned how to successfully upload files and on top of that actually store real data in a database. Pretty cool stuff here. So I'm going to go ahead and mark
[09:48] this as done. And let's proceed to the next step here. I want to show now how we can really easily integrate our app here for our business into other apps found on the internet. To do this, we're going to create a zap together. And with this zap, it's going to be a web hook. So we're say news app. But if you're not familiar with Zapier, it's just automation platform. This would allow you to use any type of data that is created here and access other apps. You can also natively integrate the apps here as well. But for example, here we're going to set a trigger here of web hook and choose the event of catch hook. Continue. Continue. And we have our web
[10:19] hook URL. This is how we're going to receive the data. So I'm going to copy it and let's start a new thread and ask data for some help. I'm going to say okay with the extracted text data, can you send this data to our Zapier web hook here provide the web hook and hit enter. What I'm going to do is I'm going to ensure that we keep all existing logic and just add this web hook as an extra layer. I'm going say keep all existing logic as is and just add the Zapier web hook as an extra layer to send the data to. Enter. It's going to ask if I want to create a task on the board. I'm going to say yes. It'll provide a step-by-step guide of exactly what its plans are. I come down here and say yes, create task. Best part two here
[10:49] is that data button is in compliance with best security practices by making it a secret so that our web hook here isn't exposed to the public. Obviously, I'm going to delete this web hook. You can try to hit it if you want to. It doesn't exist. And when prompting to do secrets like this, you'll get a nice little message here. We can simply paste our URL again and hit send. With the PDF sent, we have our extracted data here. Now, here's the best part. With this data, we can do anything we would want. So, in this example, I could integrate a CHBT block. Let's do an event of conversation. We're going to say invoice data parenthesis and then provide the data from the previous step. And what we
[11:20] can do here is that let's say we simply want to push this to a Google sheet and get the relevant data. So, we're looking at an invoice here. We're going to get things like the customer's name, the overall cost for the contract, maybe we go as far as the type of work being done in the contract, everything that we actually care about. So, we can go and do output data, customer name, project cost, work to be done. Obviously, add more if you need more information there. Format output as three lines, no text before, after. For a model, we'll go with GBC40. Memory key for consistent outputs. Continue and test this step. And here we go. So, we got our three
[11:50] lines here. Now, what's really cool about this is we can take these lines and let's actually format them. So doing a formatter block here in Zap year formatter. We're going to do action event of text because we are going to be manipulating text here. We're going to continue here. We're going to transform this as new line and this will make more sense. We're going to split the text here so that we can grab each data point and put it in the relevant column. So we're going to do split text. The input will be the previous output which will be the reply here. The separator will be new line. And the way we do that in this dictation is just this new line. And if you're like Corbin, how the heck did you
[12:21] know you got to do that? Just simply go to the help article here. Explain field. Segment index is going to be all our separate fields. This is very important here. Continue and test step. So now we have each data point as its separate little data point that we're going to be able to leverage later in a Google sheet. Now in theory, if you don't like the customer name, James Brown, project cost, the amount, and work to be done, website development, SEO work. In this previous step here, we can add to the prompt to simply remove that. Simply adding the line output just the data requested with no title like customer
[12:52] name. Watch this. And there we go. We have it formatted where we can just grab the specific data point. So coming here we'll retest this step and we're good to go. So let's do that Google sheet first. Let's create it. So I went ahead and created a very simple sheet here. I put in customer name, project cost, work to be done. Add more if you need more depending on what you trying to extract from these invoices or whatever PDF you're extracting from. From here I'm going to simply go to actions and hit Google sheet. In Google sheet here, we're going to create a new row. Create spreadsheet row. Make sure you select your correct account. For me, the spreadsheets invoice data. That's what I titled it. Worksheet sheet one.
[13:22] Continue. And here is where we're going to go ahead and put our data. So, we got a customer name from that column here from a text formatter. We'll put in James Brown. Project cost. Same situation. 750 USD for this specific invoice. And work to be done output three. Now, the reason we did the formatter block here, as you can tell now, is if I did add here and just went with the reply, all that data is together. And we need to obviously separate it by a new line. So I can continue and test this step. You'll notice that our data will be formatted correctly and added all automatically
[13:52] through an SLO data button app and our integration with Zapier. Last step here will be simply publishing our Zap and we're good to go. And any data that comes from our data button app will automatically be placed in that Google sheet. But as you can assume, you can take that same type of logic and that thought process and apply it to other apps within the ecosystem. whether you want to alternatively not add it to a Google sheet but maybe add it to a Slack channel within your company. Now you have business software you can start leveraging in your business and everything you've learned in today's video can be applied to other context when it comes to developing little cool
[14:23] tools that you can use day-to-day. It's pretty cool. So make sure leave a like if you feel like you learned something in today's video. Those are two random videos over there. That is my face and I'll see you in the next