today we're doing a super exciting build of a full app with cursor we're going to see how fast we can do it I'm going for 20 minutes and if you don't know cursor is the AI code editor a lot of people are talking about it is it really living up to the hype I personally think yes been using it for maybe two months and uh loving it really speeds up workflows especially when you're building things from scratch whether a whole app or just new components for your app and various things of that nature so in this video I'm going to give you an overview of what we're going to build why we're building it and then I'm going to try to fully launch this app and deploy it um I'll show you how I'm doing everything and hopefully it won't be too boring and uh yeah we're going to see how fast it will go so let's get started so I've been trying to build kind of like influencer marketing apps for close to two years haven't had a huge hit with it but the problem is definitely real which is influencer marketing it can work really well but for most brands it's very difficult because the current tools are inefficient they're expensive and Etc so I'm playing around in this space continuing to increase my knowledge try different things and um one opportunity I've seen recently is that a lot of businesses like they already have their customer list like say you're Shopify store you have a record of everyone's email who's ever bought from you and in other cases you might have an email subscriber list so what I'm thinking is like these people are kind of the best Advocates or Affiliates for the brand and of course you can just email them all a referral bonus an email offer uh or another type of uh offer for referring a friend however however um when it comes to this list not everyone's created equal so you might have people who have bought from you who are like big social media influencers they have followings on Instagram Tik Tok YouTube and with these people you might want to send them like let's say a free uh set of bonus products or um pay them a little bit to be an advocate for your brand and it's great because you know they genuinely love your products because they already bought from you or subscribed to you and know you without you paying them so basically if you can find these people and then you know do what you want on once you have this data I think that could be huge uh for companies so what I'm thinking is like a super simple software tool which allows you to upload your customer list and then it gives you basically back which of these influencers have large social media followings using an influencer sech API what I'm thinking is it can be credit based so you can sign up get some free credits see how it works and then it's only going to charge you for successful matches and then at least for the MVP you can download the results of everyone who is a match what is their uh follower account platform URL to their profile so you can go from there so I've kind of already set up the project just because that part is very boring and not interesting uh basically I created a new directory with vit I set up my Firebase project which you can do with a Firebase console and turned on Google off um I set up Firebase locally meaning I just linked my project to my uh repo my Firebase project and I also added my uh Secrets already to aend file because yeah there I can't put those on YouTube so and then yeah I'm also going to just use an existing stripe account that I have uh just because it's not worth creating a new one for a practice project but setting up stripe is very easy uh basically if you want to see everything I did here it is here are the commands just set a v linked fir store and moved my uh secrets from a temp folder to my functions folder which are mainly going to use the secrets we can open up our running app it's just a V starting point and uh then we can get into what is our prompt going to be how is cursor going to build this so I've already got I've also gone ahead and written a quite a detailed spec and you're going to say well you know if you're doing all this like it's not really building from scratch and what I'll say is this is like number one I think writing as many details up front it really helps you get the best first shot output with the cursor composer composer being the part of cursor that can edit create and uh span across multiple files because once you have the generated code it's much harder to change and so yeah and you can also have ai generate this for you like if you're not really familiar with your stack already I might be able to fill in some of the gaps that you have in your in your knowledge especially if you're have not been programming for almost 10 years uh like I have so just running through this super quick to find the stack up top kind of like the color scheme the data model we're going to have three Firebase collections one one for people who log in one for um successful matches and saving the influencer data there and then each CSV upload we do and what the status of that upload is like did it succeed did it fail for some reason def find the secret Keys just so cursor knows what they are and then of course we have our provider react context so that's we're going to have most of our state and it basically is just the basic stuff reading from the database Collections and then writing to them and our most important write which is the actual check is going to occur in a cloud function um just so it can run on the back end and we can retry it Etc if it fails now components SL pages is just going to be our pages of our front end so we have a simple landing page with the at the slash path we have a login page just going to use Google login dashboard is going to display our entire table of influencer matches and then have some filtering I don't know if that's going to work and then also have a place where you can upload which is going to have a drop zone you can drag and drop files in and I've made this really detailed because this part I think is quite important and cursor can mess it up if I'm not explicit um then just the nav bar pretty straightforward there and then finally the Firebase functions AKA are a backend tasks biggest one being the uh after you upload what is the logic so I've kind of basically written out the code I would write in plain text because I don't want it to miss anything um even even did a request to our API just explicitly because it can't really know that without me providing a doc Source similar and then yeah just error handling basically everything you can pause it and read through here if you're interested and then the other web hookes are just for Stripes so generating a checkout session to buy more credits or in addition to that a uh web hook which when the checkout is successful it will upload our user table with those credits and then finally if you want to see like your building history you can do a hosted portal in stripe uh rather than saving that to our own database just more secure to keep it in stripe and the UI is more familiar for people so with all that being said let's just paste in this in a cursor and see what happens really really quick though before we do that I want to just recommend if this AI stuff is completely new for you a uh free pdf that I've been recommending a lot recently it is the AI for business Builders guide from HubSpot it's just a really I guess good starting point and even if you think you know AI it just helps you a lot with prompting when to use apis and an overview of AI agents which are getting quite popular and you're seeing like huge valuations with AI agent apps so basically it covers all these things at a high level and gives you some new terminology some new techniques to try especially with your prompts it's actually my favorite part is the prompting section because you can understand iterative prompting better exemplary prompting where you give your AI like some examples of outputs and what those examples could be for the best results as well as um trying to get just better one shot prompts in general they're some simple small tips but they actually really personally helped me when I started using a cursor more so yeah if you're thinking about building an app or a side project using AI tools or actually integrating your AI into that app specifically then this business Builder guide is worth checking out it's completely free just visit the link below and shout out to HubSpot for providing this resource and sponsoring this video all right let's copy paste our entire prod so I'm just taking it from notes we're going over to our cursor I have a different app open here so let's just close that and then let's open well other way we can do it is just cursor and open like that all right so we're just going to check yep everything is as we can see a starter V repo and then I'm just going to literally copy paste as is here one more thing I want to add code this entire app without stopping don't add any todos do everything reason I'm adding that cursor can be a little bit lazy and just say so you would do this and then the rest of the ones You' kind of go from there let's try to get it to do it on the first try other thing I mentioned in my other video you can use 01 or you can use Claude Sonet I found sonnet to be a little bit faster uh and pretty good still so I'll just use Sonet for this one so let's see how long it takes to run starting at 222 and in the meantime we could do some other I guess um I don't know stuff with our config setup on on fire base Etc but we've already taken care of that so no worries okay there's going to be certain parts of this video that I speed up just cuz it's a little bit boring but I'm going to try to keep everything real time like no cutting as much as possible and if you want to see the real amount of time this took just check the clock in the top right hand corner so this is when I ran the first prompt it's around 224 and then you can just add the additional time onto that it's done running it's 224 so I think it took about 2 minutes which is cool cuz it created a ton files so we saved everything and we already know it's not going to work because it did not install the dependencies for us so actually we can also say provide a list of npm dependencies we need to install and then it will do that and there's one other thing I know we need to do which is to add our Firebase config okay so it gave us what we need to install in each directory so let's first do these in the main directory about 10 dependencies here and then we can do the same in functions frankly at the same time so let's do that and while that is running let's take our Firebase um project uh configuration from Firebase so we just go to config copy and we uh can control shift f for Firebase config and add it right here okay checking back over okay this might be the one part I speed up because uh my internet is uh a little bit slow here in Japan so I'll just see you in one minute all right finally got it done as you can see it took five minutes just to run that uh and let's restart our server so the dependencies we know are being pulled in so here we go we have our starting point at least and we can already see it's a little bit messed up but I already know the reason it's because our V has some default CSS that we just want to delete so we'll delete this file and we'll also delete this file because we don't need these default Styles okay now we're full withd we can get started and we can sign up with Google since we enabled Google off with Firebase already it should hopefully just work just slow internet took a long time and okay now we are in so unfortunately did not do a redirect but we can check believe we called it dashboard by visiting directly also gave us a loading State that's cool um and I have no idea where our menu items are they're here they're just not visible so we just have to change the sty on those let's just go through the issues as we see them so yeah the first one is going to be this so let's just jump in and get familiar with our directory so we have navbar which my guess is it's here and then let's actually just do a generator on these buttons yeah account uploads and leads and make these visible on ypg so I just hit uh command K we'll see if it fixes it for us no so that is we're getting into the first issue here with um yeah with uh cursor when it doesn't have the full context of everything it doesn't know how to make changes so because it doesn't know the background color it doesn't know what to change the text color to let's try changing the button variant to make always visible on dark background but no border yeah so these are buttons still um probably we just want to change these to text so just doing one more change here there we go and then we can add hover State more padding uh Flex items align Center let's just do margin right8 and then auto complete should help us a little bit here yeah I'm just hitting Tab and then let's just add hover state to these and more or less it worked we might want to add a transition to make that look a little bit better but uh no worries next thing is this sign out menu button is not great so we can just do change to dark color scheme see if that works still no so that issue is I think in this menu item yeah so the hover the non-hover state is messing it up so let's just start it with a dark gray and then it will go to a lighter gray okay so we kind of fixed our menu bar here let's check if all the links work this is not going to work yet because we haven't set up our portal link code and because we don't have any leads yet again this doesn't look great but it's fine for MVP we can go to uploads so I've created a mock data spreadsheet just with with name and email in Google Sheets and I downloaded that already so let's just try the drag and drop and find that from our most recent download so I'm going to drag this in it allows us to map it's not automatically mapping the fields which we should potentially fix and then continue all right so now we're getting failed to confirm upload so we can just debug that by going to here and this is doing a callable function now the reason is our callable functions are not running uh but what what we can do is add a functions emulator in development environment this is just the domain knowledge for Firebase and we can also do mpm run serve to get those colable functions working uh I think that's fine yeah so when node n not production run functions emulator all right so I duplicated some code we can just delete down here and we can do that restart our server now in theory uh callable function should work but we have an error our node version doesn't match so let's just do NVM 16 and then try running it again and then we have an actual syntax error I already know it's with node fetch so um let's just go to our functions file yeah no node fetch is really weird like that like always has this error so I usually just pull this from another repo but let's see if cursor can do it that's not going to work because you need require statements in functions and or maybe you don't I don't remember um so I'm just going to take this this from a different repo cuz previously like a GitHub searched for this issue but um yeah this is just a little bit faster so with the node fetch huh that's not a problem there just see it's this one that we need like this so I'm just copy this and then we'll try this see if that works all right so I refreshed we are no longer getting that error now we have this secret key error and it didn't want to pull this from an environment variable so we can just pull it from our stripe secret key like that and now uh API key config authenticator so it just didn't quite use our environment variables correctly so uh we just want to change that this one's going to come later when we set up our web Hook and the one it's giving us an issue with now is what API key config authenticator yeah so we're going to want to replace all this uh code here so let's just comment this out for now because it's yeah we got to set that up in stripe all right now uh stripe uh wait check out session wait where is this going coming from okay let's just restart okay let's check the stack Trace five stripe okay so we're just not quite doing this correctly and if I check my other repo here just for reference yeah we need secret key but we can actually just move this import into our functions so we can deal with it later okay now we're getting this error our emulator is not running but it should be and now we can check so it should be connected oh fire store emulator that's my bad okay so let's try that again long detour there but let's just see if it works all right same error uh now it's been blocked probably it just doesn't match the name check and confirm okay so basically I created a function that doesn't exist and what we want to do in this case is just go back because we don't actually need a function for check and confirm upload we just want to do this locally so like me just read this check in confirm upload so let's go back to our spec and actually see what we wrote here so the Drop Zone let's see probably just wrote a mistake in here continue should call check in confirmed upload yeah I just referenced a function that doesn't exist so the AI guessed it was a Firebase function but then it didn't Implement that function because I didn't tell it what it was so let's just right here replace check and confirm upload with checking CSV data against what did we call our leads confirmed leads and finding um non duplicated values save this in New Leads and check whether it is less than user credits okay then set a state variable confirm count for the number of non duplicates now we add this new state variable we make sure we have it in our okay yeah it should work and then let's just find where we are checking okay so basically it was just a small oversight that took a long time to fix because we had to read we had to read the code to understand what was happening but that also made us more familiar with our code base so it's no problem all right and now we have the next state so we can uh I think just reverse the order these buttons make them back visible as well and then let's do color scheme teal on this and then confirm upload will call handle upload let's just check what that's going to do first okay so it's going to do do upload from our functions and do upload is in fact not a callable function we only have one that we're going to call directly so instead we want to I actually see the issue here it's not okay yeah it's not using ad doc at all so replace do upload with ADD doc to uploads and then just to give it all the info that it needs we'll make sure that it has all the correct properties now I kind of messed up here because we do need that lead list that confirmed set of emails and I just replaced it with a counter variable so we need to actually bring that back and let's just remove confirm count because that's kind of redundant and then we'll replace all these references with confirm leads length so I'm just uh basically control fing for confirmed count replacing it again with confirmed leads and then saving all right so it reset our state so let's just bring this I'm back and see if our right works and our state updates so name email continue found two new leads and now it is processing so that's cool so let's actually check back here in our database this is Firebase and we do have an uploads record is complete false Etc so uh yeah it turns out yeah the oncreate fun function will only run when um the fire store emulator is running so I guess I didn't know that I don't WR these types of functions enough but I guess what we can do is we can add a retry Handler which in the meantime that that will be a useful feature to have in general but um basically it can just manually call this same logic so what what we can actually do is go into a function and basically take this logic out yeah and then we can do it sort of like this and then we can just use this both in a on create function and a callable function so let's actually check so we need to just upload ID okay let's let's take just upload ID as an argument here and then read from the uploads collection and then alternatively we can add an upload field just in case we've already read from uh fir store in the case of the oncreate function we already have that reference so we can do if upload is uh undefined then read from the uploads table upload equals yeah and then data um okay in this case we will just move all this code inside of here and then we can do this uh we can also do an export on call and auto complete worked nicely there and then if there's an error we can uh also do a return true if it worked and return false if it didn't because callable functions don't have very good error handling like that so process upload now we just want to do a callable function and a retry column so let's just search for one of our column headers and we have action and now it will actually retry for us I don't think this is the right function maybe actually it is uh handle process upload okay it is and then what is our colable function name just process upload so we just need a new function yeah that does this and it's reading our other files so it is in fact just autoc completing everything so let's see if it works uh we might also want a loading State on this button so usually we will do like set loading set loading false at the end and then we just need that as a state variable boom all right moment of truth and let's put that on the process button sorry also this loading State okay so it's called our colable function we can see in the console it uh initialized it didn't necessarily connect so let's check the console and upload is undefined so let's double check and now this is as you can see kind of turning into just normal like uh coding here so probably this is not going to be passing this correctly yeah data upload ID okay um so let's try that again it's not going to succeed or fail so we need to try this again okay okay this is a great progress so at least we are moving forward so now we have in functions a config variable still left in there and let's replace this with uh yeah Bally these values okay saved let's try again we need some sort of a timeout or something on that because it's not upload updating the loading State correctly okay snap is not defined this is uh this is good so oh we can do snap here so I guess we going to have to create a third variable here that we can pass into snap app also and then check here then that should actually do the trick uh all right let's try this again and let's also debug our is loading because for whatever reason you can just log result to see what happens next time let's process check our logs here and we have a failed so let's check our object data false status error okay at least our error updated and we didn't provide we we're not logging correctly in our function so I think this request failed let's just log that and try one more time okay so I think our let may just check the API Dot here because this is now causing the issue post email search for some reason it's forwarding this to XT yeah just had it run API do email- search all right process okay so we got another error but at least it wasn't the going into here if you get what I mean so let's now console log out the data because probably just be shape of the response is not what we expected yeah so we got not matched emails and matched emails data let's just re Check Total matches zero as expected and let's just bring back um okay it's because matched emails is undefined so if data matched emails so we're just going to do that conditionally and then also this conditionally and then Auto completely messed up somewhere so we just undo and here we can't set values as null so I just do empty array and then save all right let's try again okay so we got failed to process we got not L emails but it's unclear exactly where this is um happening so total matches probably because this could be one issue um actually let's check if credits because that should always be set yeah credits is there user data credits we can just in fact see if the lead stable was created that'll give us a little bit of info so we didn't get here um fire so data not uh I don't think we need this we just need this because the emails should already be in the leads collection and I think we're just not logging the error so that would be something standard I wouldn't even think to um add manually like I just do it already so probably why I missed it okay great so it's the server timestamp there's always problems with this thing so I just do new date because the exact time is not super important it can just be whatever time um that we have at the javascri in the JavaScript context so I think this one's going to work have a good feeling yeah there we go so success let's go back to leads which we now need to refresh and uh We've checked two emails so that's actually good that's solid um let's try an example with an email we basically just need to to test all the different um possible scenarios like you know duplicated emails and similar um I have this other app with email addresses in it um don't want to dox anyone but going to take uh this email so hopefully you guys don't spam him but basically I'm going to add this into my CSV redownload it and we can concurrently test duplicated emails as well as the email that should have a matching result so let's try this again so we have our new download and it should create a new upload record uh this selecting manually getting a little bit annoying and then let's just confirm that upload so let's see if it's going to work and process without any input from our side um of course it's not going to run though because we don't have like the oncreate function but it does seem like that one succeeded one issue we have is match not match I mistakenly deleted that so uh basically we can add that back uh here and this is my other repo this is nothing and let's just go back to that table to see what the property name is so we don't need all the uh the full array here so we can just do this and then we can make this a counter like so all right so that will fix it for the next load for leads we have an error this is good because it means there was one added successfully so let's just check what it is in the database so actually we got two records we got a Tik Tok account and we got an Instagram account here so what we can do is we have to slightly change our data model I guess for uh each user or we can just display the let's say one with the most followers so I think let's in fact um do that let's go back over to our dashboard and actually uh okay now let's actually yeah after this filter let's do a math um and we can do basic this lead here then we can look into um cons profile equals lead users find and we'll find the uh user with the highest um basically followers so um just to save some brain effort here we can say find the user with greatest followers all right I'm speeding this part up just because I look really dumb because I couldn't map the shape of the data to what I need to display on the page because it generated me this reduced function and I didn't read it and I thought I knew what it was doing but I didn't so I just kept going back and forth like like I don't know confused um what I should have done is just paste in the object cursor is really good at this you just give it some Json and you say I want to convert it to this and it'll write the code for you so I don't know why I chose to do it myself but yeah no one's perfect okay I didn't say anything in the video or celebrate because I wanted to keep going but at this point the app is fully implemented the core functionality works the only thing missing is the stripe payments as well as the deployment itself those are just normal coding so I'm going to keep showing it I'm going to keep going but I'm going to speed up the video because the AI and the core app is done and for the rest I'll just do a voiceover explaining what I'm doing so the first thing I did as you'll see is add those links both to the influencer profile and email and you'll see the time when I finish is exactly 324 so exactly 1 hour to finish the core app the next thing I did was deploy the app to production so I use fly IO it's the same as versel or any Cloud hosting provider and then I'm jumping over to to implement all the stripe methods and I'm not sure why but I decided to do that fully manually even though the AI could have done it it was just doing a few things the way I'm not used to so I went through the whole thing and you'll see that was kind of a mistake also yeah jumped over to enable the off domain for production allows you to authenticate only on that specific domain and I believe what I'm doing now is testing that and then what I'm going to do next is do the stripe checkout link so that's basically just a a request that you send so I'm enabling callable functions in fir store to securely call that and read from the users table to pass the user data through to generate a checkout session link so I'm reading the docs I'm reading from the users table updating the secrets and it will return me a link which I can do a redirect to so the user can complete their payment so I'm just still changing a bit of code for that uh changing to make sure the secrets are correct and setting the values of a credit now just a little bit of debugging looking back and forth error message okay now it works so um I looked up how to make quantities adjustable so users can choose how many credits they're buying and buy as many as they want and so that's about to be done just again normal coding so there we go you can manually adjust it and we'll update the price and the next thing we're going to do is the web hook so that is basically sending a request to your custom URL when a payment's completed you have to listen for the checkout session completed um event and I while I was doing that at the same time was starting to um do the customer portal implementation now I'm speeding up this part even more and you can see how fast the time is going because the this feature I actually didn't even use it did not work at all um for fixed payments it's really only Built for subscriptions where it'll show you your payment history you can modify cancel your subscription Etc um but basically I just wanted to show you everything I added in this coding session because you can see how much time I wasted here at the end and the clock is just ticking and um also how inefficiently I'm doing it so I guess it's important not to get tunnel vision when you're uh coding because what I should have done is set up the local stripe event simulator and then tested the web hooks there but instead I'm redeploying the functions sending the web hook event and then checking the logs to see what the error is it's just super stupid so I don't know why I did that but anyway I just wanted to show you anyway and also the fact that in the end it didn't even work great and here you can just see me disappointed when nothing displays in the portal however it could be useful in the future if we are Auto charging people some okay so as you guys can see that's led to a pretty much completed app um yeah basically wasted the last hour messing around with us stripe Docks but as you can see everything's working when you buy credits uh the web hook securely updates uh that based on a confirmed payment uh you have the stats summary and then it will automatically be deducting here and then obviously you have your links here and then the download CSV which I just tested it is also working so you can add this to your favorite email tool or similar so as for where this goes from here um I think these post post MVP features could make it very useful particularly Shopify one because then it becomes fully automated no uploading CSV is needed and um I think the emailing people is also quite cool but maybe less necessary because you know you want to customize your offer a lot so hope it was interesting um remember again to check out the AI for business Builders guide link is in the description did you guys like this build because I can do more apps and uh what do you think of overall my opinion you can see some of the pros and cons here really good for starting from scratch if you write a detailed spec but that being said if you don't know how to Rite the spec well if you don't know how to um debug once it generates that code you know adding things like environment variables researching docks maybe cursor doesn't have access to uh you're going to hit a wall pretty quick with actually finishing your app and that's what I wanted to show in this video