YT YouTube2Text

YouTube2Text → Transcripts → Build SaaS with AI | Part 4 | Edit Prompt & Add Firebase

Build SaaS with AI | Part 4 | Edit Prompt & Add Firebase — Transcript

by Sabrina Ramonov 🍄 · 6,082 words · 842 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00my name is Sabrina Romanov and this is
0:01part four of my video series build SAS
0:04with AI and in this video and the next
0:06couple videos we're just going to focus
0:08on adding more features adding a
0:10database getting the app to a point that
0:13is launchable but first I want to talk
0:15about my process for adding new features
0:17especially New Logic features typically
0:19when building an app there are three
0:21concepts to think about number one the
0:23data model number two the UI what the
0:25user sees and number three the workflows
0:28or logic uh if this happens then this
0:31other thing should happen when the user
0:33clicks this button then that triggers
0:36this other stuff so a lot of if then
0:38kind of thinking so in the last video we
0:40focused on building out the UI a little
0:43bit of logic in terms of putting in a
0:45text calling open AI to repurpose that
0:48text and then displaying that text back
0:50to the user uh we didn't talk about the
0:52data model we left that out now we're
0:54going to start introducing a database
0:56and see what that looks like and then
0:58mostly in this video and the next couple
1:00videos we're going to be implementing
1:01logic features so when the user does
1:04this this should happen and here's my
1:06step-by-step process for adding a new
1:08logic feature so number one actually
1:10applies to any feature creating a new
1:11branch in git if you haven't heard of
1:13git it's basically a version control
1:15system so that you can easily save your
1:17work try out building new things if you
1:20mess that up you know you can roll back
1:21to the last stable version and then if
1:24you're happy with your changes you can
1:26merge it back to your main version and
1:28so I really like using get it's is it
1:30necessary no but highly recommend it
1:33especially with AI driven or AI assisted
1:35cating it's kind of inevitable that AI
1:38will mess up some code and depending on
1:40how many changes were made and how aware
1:42you were of the changes being made it
1:44could be difficult to precisely reverse
1:47everything without breaking something
1:49else accidentally so it's really nice to
1:51have a version control so you can just
1:53go back to the last stable version and
1:55try again number two be ultra specific
1:58and clear this is kind of a common theme
2:01when working with AI the more specific
2:03and clear your instructions are the
2:05better answers you're going to get
2:08number three identify all relevant files
2:11so cursor Ai and other AI they produce
2:13better results if you can narrow down
2:15the context to a handful of files that
2:18they should be editing instead of
2:20passing in your entire code base and
2:22this concept is true outside of code so
2:25chat GPT for example it it does well
2:28with a couple examples but if you feed
2:30in like tons and tons and tons of
2:31examples max out its context window it
2:34usually performs poorly because it
2:35doesn't know what to prioritize among
2:38all of that data it doesn't have to be
2:40perfect but try your best to identify
2:42the relevant files that cursor AI should
2:44be looking at and then number four I'll
2:46show you how to add those files as
2:48context within cursor it's super easy
2:50you just tag each file with an add sign
2:52and then there's auto complete then you
2:53submit the prompt the cursor and then
2:55review the code changes and test test
2:58test even if you're not technical look
3:00at cursor's explanation for what it
3:02changed and try to follow along in the
3:04code base and then the last step once
3:07everything looks good is to merge your
3:09experimental Branch your feature Branch
3:11into main branch so even though I
3:13haven't done a tutorial on it I will add
3:15a link to the blog post accompanying
3:17this video to step-by-step guide to set
3:19up G for Version Control I recommend
3:22learning it if you are ever going to
3:24touch a piece of code even if it's just
3:26a python script to do some web scraping
3:28so the first feature I'm going to
3:29Implement is the ability to edit a
3:32prompt that's already been submitted and
3:34regenerate the output with a new prompt
3:36so for example we'll have like default
3:38prompts in there for each social media
3:40platform LinkedIn Twitter will have a
3:42different prompt obviously but the user
3:44might want to tweak the prompt you know
3:46make sure it's closer to their own voice
3:48make sure it's a certain format whatever
3:50it is so when they edit the prompts I
3:52want to have one click to regenerate the
3:54output with the edited prompt so number
3:56one create a new Branch so open up your
3:59terminal whe whether it's warp a default
4:00terminal or cursor also has its own
4:03terminal make sure you're in the
4:04directory of your project so CD is the
4:06change directory so go into your project
4:09mine is temporarily called remix then
4:11I'm going to say get Branch feature
4:13sledit prompt and this is my typical
4:16naming convention for features so I'll
4:18do create a new Branch feature sledit
4:20prompt versus like a cleanup chore I'll
4:23do like chore sledit D prompt versus
4:26like fixing a bug I'll do bug fix slash
4:28whatever the bug fix is and that's
4:30totally up to you that's just kind of
4:32how I do things okay so once you create
4:34that branch check out means we're going
4:36to switch to that branch and it will
4:38autoc complete now you should see this
4:40get and then it should actually say the
4:43branch you're on so get feature sledit D
4:46prompt you can see in earlier history it
4:49said get main so that's the main branch
4:51and then we've branched out to this
4:53experimental Branch the next step for
4:55the feature is just to Think Through
4:57like what it is do your best to list out
4:59step-by-step instructions so this is
5:02kind of my attempt so when the generate
5:04content button is clicked so that's over
5:06here in the app when generate content is
5:08clicked The Prompt should be returned
5:10from open AI so that the user can edit
5:13it so here so currently if I click edit
5:16prompt it's actually blank so we don't
5:18know what prompt was submitted to open
5:21AI but what we want is when the user
5:23clicks on this we want the prompt that
5:25was submitted to be populated here so I
5:27can easily tweak it okay so when the
5:30user clicks edit prompt The Prompt used
5:33to generate the content should appear in
5:35the model and then when the user clicks
5:37save and regenerate this button the app
5:40should rerun content generation calling
5:43open aai with a new prompt and display
5:45the new content over here in this
5:48component generated content and again
5:51the more specific you are like I want to
5:53show this text in this particular
5:56component whatever it is generated
5:58content side Side Bar whatever it is the
6:00more specific you can be the better
6:02answers you're going to get from AI
6:04whether it's cursor Cloud artifact
6:06whatever you're using the last thing I
6:08want to clarify is I use the existing
6:11prompt in generate content as the
6:13default prompt so when a user signs up
6:15we should have a default prompt in there
6:17so that using this app doesn't require
6:20you to put in a prompt in the first
6:21place we'll have like really high
6:23quality prompts for each social media
6:25platform out of the box okay so the next
6:27step in our process is identify all
6:29relevant files so when the generate
6:32content button is clicked okay well like
6:34where is that generate content button um
6:37so it would be here right in content
6:39generator and you can kind of like wing
6:42it from the name I mean content
6:43generator and generated content are like
6:46the main things in the app so those are
6:48going to be the things you want when the
6:50user clicks edit prompt okay that
6:52corresponds to prompt edit modal right
6:55like that's the popup where they can
6:56edit the prompt and so we'll want to
6:58include that file as well route. TS over
7:02here the open AI Library obviously we
7:04want to change this so that it takes in
7:07the new prompt that has been updated and
7:10so this is really where making sure
7:11you're familiar with your own code base
7:13really helps in identifying the relevant
7:16context the relevant files for cursor AI
7:18to look at and the more you can narrow
7:20it down instead of feeding in your
7:22entire code base the better answers you
7:23will get from cursor AI okay and then
7:26I'll show you how to add files as
7:27context to cursor but here's how it
7:29looks like with like everything combined
7:31and then I added these two things as
7:33well so add robust logging to help
7:35troubleshoot issues I just like to do
7:37that and then I also want AI to ask me
7:40clarifying questions because especially
7:43if you're not a software developer or
7:44product manager there's there's probably
7:46like nuances here and you want to make
7:48sure that the AI understands what you're
7:50asking for so I like to append these two
7:52requirements to each New Logic feature
7:55prompt let's go ahead and copy all this
7:56and then we're going to have to actually
7:57manually tag the files I'll show you how
7:59to do that oh and real quick I almost
8:02forgot the settings um so I have been
8:05playing around with cursor settings so
8:08I'm actually still on the free trial and
8:10I've built like five apps with it which
8:12is great um but here so go to models I'm
8:14just trying to force cursor to use clae
8:173.5 onet I even put in my anthropic API
8:20key and stuff and then also over in beta
8:24I enabled long context chat which uses
8:27Cloud's 200k token context window um it
8:30is slower obviously if you're feeding in
8:32you know lots and lots of files but we
8:35just want to enable it just in case we
8:37do do that we don't want to run into any
8:39issues so go ahead and do that in your
8:41settings as well let me copy paste this
8:44and then we actually need to tag each of
8:45these files so it looks like this at
8:47sign and then just start typing the file
8:49name rout okay and this looks like lot
8:53but I mean first of all in most features
8:56we're implementing it's going to involve
8:58like at least one or or two of these
8:59files once you get used to it it's not
9:01too bad and then to confirm that it's
9:03included in the context it should look
9:05something like this and then you'll also
9:07see the context listed here so when it
9:09says cursor will use that that's the
9:12context it's going to use for our
9:13request okay so let's go ahead so for
9:16this just hit enter you don't have to
9:18hit command enter again because command
9:19enter feeds the entire codebase in as
9:21context whereas we actually want to
9:23narrow down the context when we're
9:25implementing a feature at a time so here
9:27I just hit enter and then first first
9:29cursor should ask me a bunch of
9:31clarifying questions we're going to go
9:32ahead and answer those yep so here are
9:35the clarifying questions let me expand
9:37this here are the answers to the
9:40clarifying questions yes each platform
9:42individually each platform of its
9:46platform optimized prompt okay currently
9:50the prompt state is not being used
9:51should we repurpose this to store the
9:53glob promp okay so again we're going to
9:55clarify platform specific prompts when
9:57the user clicks edit prompt for specific
9:59spefic platform should be showed the
10:00plat okay so all these are related
10:02update only the content for the specific
10:05platform being edited so so what that
10:07means is like if I'm repurposing content
10:09for Twitter LinkedIn and Facebook but I
10:12only want to change the prompt for
10:13Twitter then it should only update the
10:16content for Twitter because that's the
10:17prompt that I'm changing where exactly
10:19should we add logging let's do both I
10:22like more logging are there any specific
10:25error scenarios we should handle and log
10:27apart from General API ER let's say I'm
10:30not sure we want to log as much as
10:35possible to help us troubleshoot issues
10:37should we Implement any rate limiting or
10:39error handling no hit enter and then
10:42it's it's already has the context of
10:45this conversation of this particular
10:47chat and it's using the same files so
10:49now it's going to outline the plan for
10:51implementing this feature here's the
10:52plan technical or non-technical I
10:54recommend you read this try to
10:56understand what it's doing you can ask
10:58questions too you can ask follow
10:59questions like what do you mean by doing
11:01this update the content generator prompt
11:03blah blah blah update the generated
11:05component Pass the full prompt as a prop
11:06to the component modify prompt edit
11:08model so it displays the full platform
11:11specific prompt update the API route and
11:13open AI okay so here it's going to first
11:16start with content generator so let's
11:17apply it to this file and you can again
11:20you can see the changes it's making you
11:22can accept or reject individual changes
11:24so green is stuff it's adding red is
11:26stuff it's removing so go ahead and
11:28accept that and before I forget I just
11:30reopened my terminal here just make sure
11:32you in the correct Branch feature sledit
11:35D prompt okay and you can see here we've
11:38only edited one file which is correct
11:40okay now let's update generated content
11:43okay now it's modifying prompt edit
11:45modal Okay click accept now it's
11:48updating the routes and then updating
11:51open AI okay I don't like that it just
11:53removed my super long prompt but that's
11:55okay we can add it back with a actual
11:57platform specific prompts the last thing
11:59I'll mention just double check what
12:01model you're using here so for our
12:03purposes I actually just want to use GP
12:0540 mini next step is to test this
12:08implementation thoroughly how do I run
12:10the app let's say we forgot how to run
12:12the app okay if you haven't already done
12:14this we should have done this from the
12:15previous video but go ahead and do it
12:17anyway if you haven't and then here npm
12:19runev okay so you can see here it's
12:21starting then we'll go to Local Host
12:233000 okay this is my old one here I'm
12:27just copying content original content
12:30okay select the platform let's open up
12:33the console log so right click inspect
12:35go to console so if there are any errors
12:38on the client side we can see here and
12:40then click generate content since we
12:42added a bunch of logging you can
12:44actually see like all the logging here
12:46which is pretty cool I'd really
12:48recommend getting comfortable scan logs
12:50and stuff so here there was a request
12:53API request and then this is generating
12:56content for Facebook which is what I we
12:58selected and then this is the prompt
13:01here is the actual input that was sent
13:04to the in API so input content and then
13:07here's the input prompt and now this is
13:09sending post requests to this endpoint
13:11API generate content and then here is
13:14the generated content you can tell with
13:16all the emojis that's not the version I
13:17wrote so this is kind of the same
13:20functionality as we left off in the last
13:21video so now we're going to edit this
13:23prompt right so this is good this is
13:25what we want so remember before it
13:27didn't even show us the prompt to edit
13:29now this is showing the prompt that was
13:31used to generate that output and we can
13:33edit directly here so let's do something
13:35really drastic like write a 200
13:38character tweet from the input and then
13:42click save and regenerate okay so
13:44nothing seem to change here but let's
13:47check the logs and see what happened
13:49okay so here's our latest called
13:50generate content with prompt okay so we
13:53know that the front end actually did
13:55capture the updated prompt right a 200
13:58character tweet from the input um the
14:01input stayed the same it's just copy
14:02pasted from my blog post and then here
14:04is the generated content which does look
14:07like a tweet so this generated content
14:09is you know drastically different from
14:11this long form post over here so that
14:14means everything is working except we're
14:17not seeing the generated content
14:19displayed but that's good so we got
14:21everything working so far we just need
14:23to display the new generated content now
14:26what I'm going to do is commit this
14:28since it's working status so again I'm
14:31going to link in the newsletter
14:32accompanying this I'm going to link to
14:34an awesome G tutorial if you've never
14:36set it up before but basically the
14:38workflow is like you make a bunch of
14:39changes you add those changes you commit
14:43with a message like describing what you
14:45you've changed so so now users can edit
14:49the prompt submitted to open AI so we
14:53know that part's working the only part
14:55that's not working is displaying the new
14:57output right so that's why I kind of
14:59want to commit it we have a unit of
15:01something that is working fine and we
15:04just need to add something else and so
15:06this is a good practice the less
15:08technical you are I would say commit
15:10more frequently because you you want to
15:12make sure you can roll back to that
15:13stable working version if you use like
15:16GitHub or something you can actually
15:17push this to a remote repository in my
15:21case it would be G push origin uh
15:24feature sledit prompt so that's our
15:26branch and then I'll be able to see it
15:28in GitHub okay and then here I'm just
15:32going to click on that link and I use
15:34GitHub for Version Control another one
15:36is bit bucket that's popular so here's
15:38the repo remix and you can see now two
15:42branches right here's our feature sledit
15:44prompt branch and you can see it's one
15:47commit ahead of main meaning like I made
15:49all of those changes committed it to
15:51this experimental branch and the goal is
15:54like once we're good with this feature
15:56then we'll merge this branch with all of
15:59its commits to the main so that's it
16:02that's all you have to do so now let's
16:03say like you make a bunch of other
16:05changes and you mess stuff up and you
16:07want to go back to this point we're
16:09currently at all you have to do is get
16:11stash okay so let's say we like try
16:13implementing displaying content and for
16:16some reason just like messes up other
16:17code you can roll back to this exact
16:19point where we're at yeah let's keep
16:21everything in this Contex so now I want
16:23to say I see the updated prompt being
16:27sent to
16:29T and I see the generated output with
16:33the or let's say the new promptings and
16:35I see the generated output with the new
16:37prompt is correct but I don't see the
16:41generated output being displayed in the
16:44generated content component again be as
16:47specific as possible and then I still
16:49like to
16:50add even for a minor thing like this I I
16:53wanted to ask me clarifying questions
16:55okay then hit enter remember to not hit
16:58command ENT because that'll do the
16:59entire code base now it's asking me a
17:01bunch of clarifying questions here are
17:04answers to
17:05your follow up
17:08questions yes I see the content and then
17:12it's also asking to check the network
17:14tab so here this is the network tab on
17:16the front end so you can see two
17:18generate contents here so just click on
17:21that um and this is like the the API
17:24call and then if you click response this
17:27is what the front end received
17:29so so this is the actual tweet tweet
17:31that was updated so new to CHP don't
17:33worry and you can tell it's a tweet
17:34because it's just super short whereas if
17:36you look at the previous call this
17:38response super super long right so we we
17:41know they're two different prompts yes I
17:43see returned in the in the logs and call
17:47it and the network tab two are we seeing
17:51any console errors no no cons errors
17:54three is the issue occurring for all
17:56platforms or only for specific ones I'll
17:59say all
18:00platforms for when you say you don't see
18:03the generat is the generator not
18:04updating at all or is it showing
18:06outdated content so here I don't think
18:10it's updating at all oh well it is
18:12showing updated content I'm not sure I'm
18:14not sure I'm not sure if it updated I
18:18see outdated content five are we certain
18:21that set gener content function I'm not
18:24certain number six is there any specific
18:27State Management Library
18:29on being used in this project Redux mob
18:33X or we riing on reacts State and I
18:36believe we're flying solely onx you
18:41state avoid just in general avoid
18:44introducing more libraries unless
18:48absolutely necessary that's just in
18:50general are there any requirements for
18:52persisting the generated content between
18:54pach reloads or browser sessions no I
18:57don't think we need to do that should we
18:59Implement any visual feedback yeah yes
19:01that would be very nice okay let's hit
19:03enter I just love it when the AI ask
19:06clarifying questions because it always
19:07asks things that like you didn't think
19:09about even if you don't need it like
19:11right now you can keep it in mind for
19:13future versions to improve the user
19:14experience this works much better than
19:17just being like it doesn't work and you
19:18fix it because then then the AI may not
19:21know where to start it'll try like all
19:23sorts of things and rewrite different
19:25parts the more specific you are what
19:27what's missing versus what's working
19:28well already so don't touch that the the
19:30better answers you're going to get the
19:32smoother experience you're going to have
19:34Okay so let's apply these changes accept
19:37generated content okay accept oh we're
19:40going to create a new file called
19:41loading spinner. TSX which probably
19:44honestly was unnecessary but I I'm just
19:47a sucker for loading Spinners
19:50okay yeah just make sure you've saved
19:52all the files okay okay and then let's
19:55test it out opening up our console log
19:57just in case there's any issues
19:59okay this is generated prompt edit
20:02prompt write a 200 character from the
20:06input okay and there we go so it updated
20:08the generated content and now we see the
20:11tweet and we had a really cute loading
20:13spinner too so we're pretty much done
20:15with this first feature and so just to
20:17recap what we completed we already had
20:19the functionality where it repurposed
20:21this content through an API called the
20:23chat GPT um but what else we want is to
20:26edit the prompt that's being used and
20:28then regenerate the content from one
20:30click and so now if I do this again
20:32right let's say write a 10 point bullet
20:35list a 10 item bullet point list from
20:40the input something like that save and
20:42regenerate now now it shows the loading
20:44spinner and it should regenerate the
20:46content again okay see perfect so yeah
20:49this works pretty much exactly as we
20:52want and the purpose of this feature is
20:54like for me if I'm repurposing my own
20:56content for example this YouTube video
20:58and I want to send it to my newsletter
21:01Facebook like a Tik Tok video script
21:03whatever I kind of want to see
21:05everything in one place and have my
21:07default high quality prompts do the
21:10first pass but then I might want to want
21:11to tweak The Prompt and I want to do it
21:13on a platform specific basis and I want
21:15to do it all in one place for me it's
21:17important I see the original content
21:19compare it with a generated content and
21:21then make sure I don't lose any
21:23important information like for me I want
21:25that level of control and so yeah so
21:28this feature can be marked done so let's
21:30go ahead and commit it and everything so
21:32here do contr X let's do exit and then
21:37you can do get status this shows you
21:39what changes you made what files will be
21:41added so I do get-- capital A so that
21:44adds all of the changes and then get
21:47Commish DM is the message and the
21:50message is display generated output to
21:54user okay and then we're going to push
21:57this again to our branch
22:00prompt okay and that's pretty much it
22:02now since we're done with this feature
22:04you have two choices you can either
22:05merge this Branch to main because you're
22:09you're kind of done with it and it's
22:10good to go and then from Main you can
22:12create a new Branch for the next feature
22:14we're going to implement or you can keep
22:16adding changes to this branch and just
22:18merge it to main later when you're done
22:20I personally like to create a new Branch
22:23for each new feature but just for the
22:25sake of this video series I'm just going
22:27to keep everything in this branch brch
22:28and then commit everything to main at
22:31and then merge everything to main at the
22:33end just so we don't spend a lot of time
22:35on it but my personal workflow usually
22:38is you know new feature new chor new bug
22:40whatever it is I have a separate Branch
22:42for each of those so the next thing
22:43we're going to do set up Firebase is our
22:46database so go ahead and create an
22:47account if you haven't yet again in my
22:49newsletter I'll have the link to
22:51everything here firebase.com click get
22:55started and then basically here's the
22:57prompt to generate the initial
22:59scaffolding for the Firebase integration
23:01so so we're going to put this in here at
23:03the end of The Prompt it's really
23:05important to explain step by-step how to
23:06set up a new Firebase project from
23:08scratch so just as a best practice if
23:10I'm integrating a new API or anything
23:13external I like to include this at the
23:15end of The Prompt to make sure I
23:18understand how to go through setting it
23:19up go ahead and copy this and go to
23:21cursor and we're going to create a new
23:24chat okay because we don't want all the
23:26context from the previous chats made it
23:28note here to make sure you run it with
23:30the entire codebase as context okay so
23:33here copy it paste it to do command
23:35enter so run with entire codebases
23:37context and you can confirm it here when
23:40it says Global context like that that
23:42means it's running with the entire
23:43codebase here are the paths through the
23:45newly created file so we're going to
23:47have to go in and create these files uh
23:49so let's do that first and then we'll go
23:50to the next part so app SL utils file
23:55.ts okay and then apps let hooks I don't
23:59believe we have a hooks directory no so
24:01we're going to create Hooks and then
24:04we're going to create a file called use
24:07Firebase and then app SL components new
24:11file Firebase
24:14provider okay cool now let's go through
24:17the step-by-step process of setting up a
24:19new Firebase project from scratch so I
24:21go to the Firebase console so that's
24:23console. firebase.com click on get
24:27started with a new project add project
24:30so let's call this project remix accept
24:32the terms okay continue okay I do have a
24:37Google analytics account you can skip
24:39that if you don't have an analytics
24:40account so yeah we'll just follow the
24:42instructions here once the project is
24:44created click on add app and choose web
24:47platform which is this one okay nickname
24:49is called remix uh we don't need
24:51Firebase hosting right now so just click
24:53Register App you'll be presented with a
24:55configuration object which we'll use in
24:58our code okay so here install the
25:01Firebase SDK by running npm install
25:03Firebase so go to your terminal run npm
25:06install Firebase now we will create the
25:07scaffold for Firebase integration here
25:10I'm just going to ask it to clarify
25:11which files for steps one 2 3 your
25:14answer that should be created because
25:17remember in the previous step we kind of
25:18already created the file so we just want
25:20to make sure it's aligned with what it
25:22wants us to use so we're going to do
25:24util slf Firebase first so that's number
25:27one okay let's go to to step one this is
25:29the Firebase configuration file util
25:38firebase.com
25:46so that's going to be this component
25:49Firebase provider click accept Okay and
25:52then update app SL file layouts okay cck
25:56accept hit save and create a n local I
25:58believe we already have one for open API
26:01key okay so I don't want to reveal mym
26:04local because it has my open API key but
26:06what you're going to do is copy this add
26:08it to n.l and obviously replace all of
26:12these variables with the with the stuff
26:14from your project and if you go back to
26:17the Firebase website that's where you
26:18can see it you can see like the Firebase
26:20config here are some tips to add
26:22features that use Firebase as always
26:25like be concise and clear in what it is
26:27you're trying to do with a feature ask
26:29for the overview of the data model that
26:32it's going to create based on your
26:33feature request for new features I only
26:36use Firebase context to drive the output
26:39instead of like including the entire
26:40codebase as the context and then for
26:42existing features I like to include
26:45previously implemented crud features and
26:48like give that as an example to AI so it
26:50can follow the same format the same
26:52structure so I'll say something like for
26:54this new feature follow the same crud
26:56structure as this other feature
26:58specified in this other file something
27:01like that and then yeah do your best to
27:03Think Through the data model like each
27:05user can they have multiple prompts yes
27:07what are the fields that a prompt should
27:09have probably like a text field and a
27:12created at the Tim stamp so think about
27:14like the objects in your data model like
27:16a prompt is an object a user is an
27:18object the relationship between those
27:20objects a user has multiple prompts Etc
27:24and the next feature we're going to be
27:25working on is crud for promps so being
27:27able to create read meaning use the
27:30prompt sending it to open AI update a
27:33prompt and delete a prompt so if you're
27:35not technical crud just is acronym for
27:37create read update delete and this
27:40feature like I said it allows users to
27:42create a prompt read the prompts which
27:44means using it sending it to chat gbt
27:46for repurposing content update the
27:48prompt to make them better and delete
27:50prompts you no longer want that's a typo
27:52I'm just fixing a typo here we're going
27:54to use these files as context use
27:56firebase.com
27:58TS so here's the prompt for implementing
28:02crud for prompts think about the
28:04relationship so can a user have one only
28:06one prompt many prompts in our case each
28:09user will have many prompts you'll have
28:11like a whole prompt library and you can
28:12pick and choose which prompt you want to
28:14use for each platform each prompt
28:16belongs to a user output functionality
28:18into a separate service file designed to
28:20interact with the Firebase data and all
28:22that means is we're asking for a
28:24separate file that is then going to
28:26interact with the data from our database
28:28base and before producing the code think
28:30through it step by step and output the
28:32data model so you can review it before
28:34it goes ahead and does it and you'll
28:36want to review that data model and make
28:37sure it represents relationships you're
28:39thinking of correctly and then as usual
28:41before start working on this feature ask
28:43me any clarification questions go over
28:45to cursor I'm going to start a new chat
28:47so the context is fresh and then I'm
28:50going to tag the files use fireb base.
28:52TS and then fire base. TS okay so you
28:57can remove it from here that was just
28:58kind of a placeholder for my blog post
29:01now here are the clarifying questions
29:04here are answers to your questions so
29:08number one what specific field should be
29:11included in a prompt so I like the
29:13fields that mentioned yes include Fields
29:15like title content you might want to
29:19name a prompt like a shorthand like
29:21tweet 60 or tweet no Emojis or whatever
29:24and that title would be separate from
29:25the prompt itself do we need to imp any
29:28sort of sorting or filtering for proms
29:31yes are there any limits no limits
29:33Implement any validation no real time
29:37functionality such as live updates no
29:40out of scope are there any specific air
29:42handling no I'll just say not sure
29:45actually do we need to implement any
29:47pagination for retrieving prompts
29:49especially if a user has many prompts
29:51let's say no for now okay we'll probably
29:55want to implement that later though
29:56first let's think through the steps and
29:58design the data model so here's a
30:00collection called prompts okay with
30:02documents representing individual
30:04prompts each document will have a
30:06reference to the user that created it
30:08the data M looks like prompts prompt ID
30:10and then the title of the prompt content
30:12created at update at and the user
30:14reference to the user who created it and
30:16then here are the steps for implementing
30:17cred operations create a new file
30:19Implement blah blah blah now let's start
30:21implementing the code so what I do want
30:23to do since I forgot to ask is to
30:26clarify what the file and the file paths
30:29clarify the file names and file paths
30:32for files that must be created I'm just
30:36asking that in the same chat so again it
30:38already has the the context of this
30:40conversation okay so we're going to
30:42create a new directory called
30:45Services create a new file called prompt
30:48service and this file will contain all
30:51the functions for crud as it relates to
30:53prompts okay let's go ahead and apply
30:57this to a new file
30:59and this is going to hitting this will
31:01Implement all this code create a prompt
31:02function read Implement read Implement
31:04update Implement delete Implement
31:06sorting and filtering okay it's still
31:08creating and what we're going to do so
31:10when you implement another crud like
31:12feature like this what you can do is
31:14pass this file as context to cursor and
31:17say like I said over here in my
31:18newsletter for this new feature follow
31:21the same Crow structure as the prompt
31:23feature specified in this file prompt
31:25service.ts and what that does it's a
31:27temp almost so it gives cursor a very
31:29clear idea how you want a new crud
31:32feature to be created and it's
31:33consistent with a code base all right so
31:35just to recap what we walked through
31:36today showed you some cursor settings to
31:38force it to use cloud 3.5 sonnet my
31:41process for adding New Logic we
31:43implemented a new feature where you can
31:45edit the prompt and regenerate the
31:46output we added Firebase as our database
31:49and then we created the crud routes for
31:52being able to create read update and
31:53delete prompts next up we will build
31:56like a little table where users can see
31:58the prompts that they have update them
32:00create new ones delete them and we'll
32:02also build out user authentication so
32:04people can actually sign up and then see
32:06the prompts that they created my name is
32:09Sabrina Romanov if you like this kind of
32:10stuff hit like hit subscribe drop a
32:12comment below look forward to hearing
32:14from you

About this transcript

This page contains the full transcript of Build SaaS with AI | Part 4 | Edit Prompt & Add Firebase by Sabrina Ramonov 🍄, generated from the public captions YouTube serves with the video. The transcript has 6,082 words across 842 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.