YT YouTube2Text

YouTube2Text → Transcripts → Build SaaS with AI | Part 7 | Zapier Webhook, Styles, & Vercel Deployment

Build SaaS with AI | Part 7 | Zapier Webhook, Styles, & Vercel Deployment — Transcript

by Sabrina Ramonov 🍄 · 4,687 words · 651 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00I'm Sabrina ramov and this is part seven
0:02of my series build SAS with AI where I
0:04go from idea to MVP with AI driven
0:07coding using cursor Ai and my new
0:09favorite feature cursor composer and in
0:12this last post of the series we'll work
0:14on publishing ready content through Z
0:17zapier web hook CSS style updates and
0:20deploying the app via versel so what
0:22we're going to do first is set up this
0:24zapier Automation and basically our app
0:27remix is going to push cont content
0:30that's ready for publication push it
0:32over to zapier Via a web hook then
0:34zapier is going to catch that data
0:36figure out what platform it should be
0:38published on and then depending on what
0:40platform if it's Facebook then create a
0:42Facebook post if it's LinkedIn create a
0:45LinkedIn update so the first step here
0:47this is the trigger choose web hooks by
0:49zapier so here look for the trigger web
0:51hooks by zapier it's a premium feature
0:54and then you're going to select catch
0:55hook click continue you don't have to do
0:58anything here click continue
1:00and then when we start sending tests to
1:02this web hook it'll look something like
1:04this you might have to click find new
1:05records but basically here's the
1:07platform that the content should be
1:09published on let's say LinkedIn here's
1:11the text content and then here's the
1:13optional image URL and then what we're
1:15going to do is pass that along the path
1:17let's say continue with selected record
1:19here and then to add a path it's called
1:22paths by zapier I'm not going to
1:23recreate it since I've already added it
1:26just going to close this and delete this
1:29okay once once you've added paths it'll
1:31look something this I just renamed this
1:33path so click rename change it to
1:35Facebook rename this one over here it's
1:38a LinkedIn and then open this path so
1:41you can see what the conditions are so
1:43select custom rules and then only
1:46continue if platform which is the data
1:49sent in through the web hook only
1:51continue if the platform contains
1:53Facebook okay and then for the other
1:55path over here same thing custom rules
1:58only continue if platform contains
2:01LinkedIn and you can repeat these you
2:03can add more paths for different social
2:05media platforms Tik Tok Pinterest
2:07Instagram and so on okay and so let's go
2:10down this Facebook path so if the
2:13platform is Facebook then the last step
2:15is to actually create a Facebook post so
2:18create another zap your step here select
2:21Facebook pages okay and then create page
2:24post and then all you have to do is set
2:26up your account and then feed in the
2:28information from the post right right so
2:30the the text content and the image same
2:33thing with LinkedIn over here so add
2:34another zap step so if the platform is
2:36LinkedIn we're going to use this
2:38LinkedIn out of the box step create
2:40share update which posts a status okay
2:43connect your LinkedIn account and then
2:45same thing take the text content and the
2:47image URL from the web hook that was
2:50passed in and then use that for your
2:52LinkedIn post so that's the zap in a
2:54nutshell and I decided to just do this
2:57for now because I don't want to spend a
2:58lot of time creating all the social
3:00media business accounts and developer
3:02accounts and stuff for Facebook I need
3:03to figure out my business manager and
3:06all of that stuff is is necessary but
3:08it's kind of tedious and I want to focus
3:10on the main core functionality of
3:12remixing content so what our app will do
3:15is when you're ready to publish remix
3:17content you just have to click publish
3:19put in the web hook for your zap and
3:22then it'll automatically send it down
3:23this workflow look at which platform
3:26it's supposed to be published on and
3:27then go ahead and publish it to that
3:28platform so this is a super easy way for
3:30me to allow users to publish content but
3:33also do whatever they want with that
3:35content right because once you send your
3:37content to zap your web hook you can do
3:39anything you want with it maybe you want
3:40to put it in a buffer queue maybe you
3:42want to put it in Google Drive or Google
3:43sheet whatever you want and so that's
3:45why I opted for this path because it
3:47actually allows for a lot of flexibility
3:49with what you want to do with the
3:50content and it's not limited to zapier
3:52either you can put web hook to anything
3:54to zapier make pipe dream your own
3:56custom app whatever you can push the
3:58content to what ever tool you want and
4:00now to actually grab the web hook go to
4:04the web hook trigger and then here's the
4:05web hook URL and next what we're going
4:08to do is implement the publish button in
4:10our app so how our app works you input
4:13some content remix it tweak the content
4:16until you're happy with it and then you
4:19click publish to send it off somewhere
4:21here's the prompt as usual the first
4:23part is boilerplate I removed stuff
4:25related to tailwind and CSS here is the
4:28task itself so use the existing publish
4:31button in our generated content
4:32component when user clicks the publish
4:34button show a modal that is a simple
4:36form asking for a web hook URL that the
4:39content should be pushed to and in this
4:42video I'm going to show zapier offering
4:44that web hook URL as trigger but again
4:46you can push this content to any web
4:48hook any app that supports that we also
4:50want to validate the web hook URL as a
4:52valid URL before the user click submits
4:55and we want to make sure we're creating
4:56a serers side API route to handle the
4:58web hook request rather than sending it
5:00through the client side because then you
5:01run into course issues and then after
5:03user submits the form with a web hook
5:05URL send a payload containing the
5:07generated text the optional image and
5:09the selected social media platform
5:10Facebook LinkedIn whatever so for
5:12example if the user generated content
5:14for Facebook and Linkedin and the user
5:16clicks publish for LinkedIn then the app
5:18should send LinkedIn as the selected
5:21social media platform pretty
5:22straightforward display all errors
5:24handle them gracefully and then show a
5:26success message after successfully
5:29submitting web hook okay so let's open
5:31up cursor type the instructions here add
5:34some context here generated content
5:37probably it's because the publish button
5:39should be in generated content here I'm
5:41just going to add the API folder oh hang
5:45on okay here so answer the questions say
5:48request it each time no yeah let's make
5:51it a separate components send only the
5:55content for the selected platform say up
5:58to you no okay let's try that okay so
6:01here's the plan that it's going to go
6:02through so it's creating a new function
6:04to validate URLs it's creating a web
6:06hook modal component with a simple form
6:08where you put in the web hook URL and
6:10again that enables you to send the
6:13content to anything that has a web hook
6:15that could be zappier make.com your own
6:18custom app whatever uh create a new
6:20airor message reusable component for
6:22displaying error messages probably
6:23unnecessary but let's see how it looks
6:26okay let's paste in content actually
6:28let's try it just with text that's a
6:30little bit faster and then we'll try it
6:31with image and and multiple platforms
6:34Okay cool so here's the prompts I just
6:36added this collapse button okay that's
6:39interesting that's actually kind of
6:40Handy if you are working on multiple
6:42platforms and just want to focus on one
6:44um so yeah let's hit publish so web hook
6:47URL go ahead to zapier and grab it so go
6:50to the web hook trigger and then go to
6:52test and then here's to your web hook
6:54URL then click submit and it says
6:56successfully publish to web hook so now
7:00let's go ahead and check oh only thing
7:03is I can't close the
7:05modal so so that's one thing we should
7:08probably tweak let's go here find new
7:10records okay probably this yep rapid
7:14growth strategy right yeah here rapid
7:16growth strategy blah blah blah okay you
7:19can also check the Tim stamp and that's
7:21it since we didn't send an image and so
7:23here how to test it in zap here is Click
7:25continue with selected record and then
7:27you want to click retest filter right so
7:29this is using the new data so your path
7:32would have continued which is correct so
7:34now if you go over to the LinkedIn path
7:35and click retest it should say your path
7:38would not have continued which is
7:40correct because again we're we're
7:41pushing in a uh Facebook post if you go
7:44to test here platform is Facebook so it
7:46should only go through this Facebook
7:49chain okay so everything's working we
7:51just need to be able to close this model
7:54everything is working including well but
7:58I can't close the model after it says
8:02successfully okay so let's do that we
8:04just want to make sure we can close the
8:05modal and then once we fix that let's
8:07tested on multiple platforms with images
8:09as well so this effect triggers when is
8:12Success becomes true and it closes the
8:14model after 2 seconds let click save all
8:16and let's try it again and yeah so let's
8:18do Facebook post and generate image and
8:20then let's do LinkedIn as well let's do
8:22bullet points and generate an image
8:25click generate content all right
8:27everything looks good here is there
8:28generated content for Facebook and
8:30Linkedin let's go ahead and try
8:31publishing LinkedIn so here's the web
8:33hook click submit and now this model
8:36should disappear yeah automatically
8:38within two seconds after the success
8:40notification now let's go to zapier your
8:43trigger go to test and then click find
8:45find new records request G is pulled in
8:48okay this is the request so LinkedIn
8:50platform here's the content right so
8:52rapid growth achieved and then here's
8:55the image URL let's just check that's
8:57the correct image Yep looks right right
9:00and then continue with selected record
9:02to test the flow so here it's actually
9:04going to the first one and then you need
9:06to click retest filter and it should not
9:09continue on this path because the
9:11platform is LinkedIn so now if you go to
9:14LinkedIn and click retest filter your
9:16path would have continued so and then
9:19you can actually see the test record
9:20over here platform LinkedIn okay and
9:23then what happens once it continues so
9:24it continues on whatever else is down
9:26this path so here we would create a
9:28share update if we or LinkedIn and you
9:30can do other stuff as well right you can
9:32write to Google sheet you can push it
9:35air table now that the data is in zapier
9:38you can do all sorts of things mail it
9:39to yourself send a slack message put it
9:41in notion put it in HubSpot basically
9:44whatever zapier integrates with that you
9:46want to push to you can do that here and
9:49that's kind of the beauty of
9:51architecting it this way because now I
9:53kind of avoid the tedious work of all
9:56the social media Integrations but also
9:58users will be able to push this content
10:01to to whatever they want and so it's
10:02easily extensible even as an initial
10:05version because we have a way for you to
10:07get that data out and push it into a
10:09workflow automation tool and lots of
10:11people use zapier make.com my personal
10:13favorite is pipe dream but zaper is is
10:16great with all of these out of the box
10:17social media Integrations and now if
10:19let's say you want to add another path
10:21you want to add Instagram let's rename
10:23this to Instagram all you have to do
10:26here is update the path conditions
10:28platform text contains Instagram okay
10:33and then here for your action you just
10:36click the Instagram or Instagram for
10:38business publish photo and then connect
10:40your Instagram for business account from
10:42our platform if you choose once we add
10:44Instagram as a platform you'll be able
10:46to publish it it will have the the uh
10:49tag you know platform is Instagram and
10:51it will go down this path okay and then
10:53let's test it real quick for Facebook as
10:55well oh oops that is not the let me grab
10:58the URL
10:59and let's test it again with for
11:01Facebook here just make sure there's no
11:03issues okay yeah before I submitted the
11:06image URL which obviously wouldn't have
11:07worked okay cool and then let's go to
11:10zapier so it should be request H yep
11:14okay yeah platform Facebook here's the
11:16content here's the image URL and again
11:18to test it out just click continue with
11:20selected record and then retest filter
11:22so now that this is Facebook it should
11:24be yes it would have continued for this
11:27test data but if you retest LinkedIn it
11:29should say it would not have continued
11:31which is correct okay all right so the
11:33next thing we want to do is I want to
11:35show you how to update the CSS and
11:38styles so one little hack I to do is go
11:40to dribbble.com that's dribble with 3bs
11:44and it's basically a website that
11:46curates a lot of designers Works they
11:49publish their designs here and you can
11:51see them um this is from Omare aagon and
11:54I just thought it was a really nice
11:55clean looking table with a nice clean
11:57looking sidebar as well and so what I
11:59did is I just took a screenshot of this
12:01over here and I'm going to feed it into
12:04cursor AI to help us just spruce up the
12:06sidebar and our table and I found it
12:09kind of hacky sometimes attaching an
12:11image in composer so for this I'm just
12:13going to use the default cursor AI okay
12:17so let's close this and before we do
12:19that let's make sure we commit get add-
12:22a and then we added push data VI or push
12:25data web hook cool ooh typo so get
12:29commit okay okay so now what we want to
12:31do is open a new cursor AI chat paste in
12:34our prompt basically we're going to tell
12:36AI to analyze the images CSS and styles
12:39especially focusing on the sidebar and
12:42table let me remove the text first and
12:44open a new chat I don't know why cursor
12:47today has been so buggy with putting in
12:49images from files okay there's the image
12:53okay paste it in my text again and then
12:55in terms of context to include want
12:58prompts cable and then the
13:01sidebar and then probably the globals
13:05and maybe the top bar okay and let's go
13:09ahead and do that maintain color scheme
13:13answer the questions yes icons yes let's
13:18say yes some more custom scroll bar no
13:22yes similar font okay okay so let's
13:25apply the changes it's Global CS
13:28updating the side bar updating the top
13:31bar okay updating the prompts table so
13:34it updated the color scheme and fonts
13:36added icons blah blah blah complete the
13:39implementation you'll need to install
13:41react icons do this uh update your tail
13:44end this has to create a placeholder
13:46image but I'm currently too lazy let's
13:49just see how it looks okay o this logout
13:53button should not be all the way there
13:56but o this though I definitely the
13:58design a lot more yeah I don't have a
14:01placeholder Avatar here the only thing
14:03really I'd fix is moving this log out
14:06button making sure it's contained within
14:07the sidebar maybe having a placeholder
14:10Avatar can I just use my own avatar save
14:14image as remix where was I supposed to
14:18put it I think this is where I was
14:19supposed to put it oh probably in public
14:21okay I move the placeholder Avatar to
14:23public okay sweet there's me I'm John do
14:27okay and then let me move the log out
14:30button everything looks good except the
14:34log out
14:35button the log out button should only be
14:39contained in the sidebar fully contained
14:43in the side carent only so that's a
14:46minor thing but other than that you know
14:48the changes it made kind of alternating
14:50colors here in the table it added icons
14:53on the left side bar we probably also
14:55want to change this back to remix okay
14:58okay so here
15:00accepted this and then I also want to
15:03change the text
15:05everb to remix in the
15:10sidebar components yeah it's literally a
15:14onew change so okay and yeah there we go
15:19so changed it to remix move the logout
15:21button yeah cleaned it up quite a bit
15:22and so so that was great and I think our
15:24app is is pretty much ready to go we
15:28want to deploy it obviously I might want
15:29to remove the Avatar and stuff for now
15:31but it's pretty cool that that it did
15:33that just from looking at a screenshot
15:35so now the last step is to actually
15:37deploy everything to reverse cell but
15:39let's go ahead and Commit This updated
15:41styling prompts table and sidebar okay
15:45and then let's merge everything to main
15:47so check out main get merge feature
15:50slart 7 and then let's also push because
15:54versel will want to use our GitHub repo
15:57let's start a new chat here and let's
15:59just ask how do I deploy this to versel
16:01uh we can chat with the entire codebase
16:03in case it needs to reference anything
16:05ensure your project is pushed so we did
16:07that just now sign up for versell
16:09accounts if you haven't already go to
16:10versell click new project choose the git
16:13provider where your repo is hosted
16:15select the repo add new project uh just
16:19now remix over here
16:22import click on the deploy button yeah
16:25so we can either click deploy and then
16:27change the environment variables or just
16:28just add them here I'm going to click
16:30deploy first and then what we're going
16:32to do is add all the environment
16:33variables so if you go to n local
16:36basically all of the variables there you
16:38need to add to versel as well and then
16:40here I think this is all done
16:42automatically I don't think we have to
16:43do something here okay so deployment has
16:45started so just checking back and I see
16:47some errors in the versel deployment so
16:49I just expanded the errors here copy
16:52pasted it into cursor and it's replying
16:55right now unescaped apostrophe in your
16:58jsx update the page. TSX file okay and
17:02then there was another warning here so
17:06applying it page thatx okay additional
17:09steps to ensure a successful deployment
17:11so run esent locally so let's no errors
17:14just a couple of warnings These Warnings
17:17should be okay though
17:19fixence errors push origin main okay
17:24then we'll try de playing again on
17:25versel and here I just made a new Branch
17:28versel with versell fixes and deployed
17:30it again and now the error is that we're
17:32missing environment variables which
17:34makes total sense because we haven't put
17:35them in
17:37versel settings yeah then go to
17:39environment variables and here where it
17:41says key and value that's where we going
17:43to want to put everything from your dotm
17:45local file so I think off the top of my
17:48heads I think we have open Ai and
17:50Firebase are the main things you want to
17:52put in here okay then once you've added
17:54your environment variables go to the
17:56project and click redeploy okay
17:59you can even import yourm dolo file to
18:02you so that's another option okay and
18:03then when verell is done deploying you
18:05can click visit go to the link
18:07authenticating and then we probably will
18:10have to sign up aol.com click sign up
18:13never save okay there should be three
18:15default prompts here okay that's awesome
18:17let's create a new prompt
18:20oneliner right on line summary of the
18:24inputs okay create okay so there's our
18:27prompt let's click create and then yeah
18:29let's just grab one of my blog posts
18:31again here we're just testing that
18:33everything works as expected do Facebook
18:36and Linkedin let's do that uh let's do
18:38Facebook post and then for LinkedIn
18:40we'll do the oneliner generate image
18:42click generate content and you can see
18:44the UI is what we updated it to be so it
18:47has these nice icons and stuff on the
18:48left sidebar and the prompts table in
18:50the previous screen was nice and clean
18:52all right so it's done generating so
18:54this is our Facebook text contents our
18:56image our LinkedIn content and our image
18:59as well so everything looks it's working
19:02really well and it's deployed on this
19:04publicly accessible URL you saw that I
19:06just created a user and then logged in
19:09and then it populated with three default
19:11prompts then I created my own prompts
19:13and then used that prompt here for one
19:15liner and so that pretty much wraps up
19:17the series so we've gone all the way
19:19from literally just a mockup if I go all
19:22the way to part one right we started
19:25with this mockup simplified it to this
19:28over here here um and actually it's
19:30prettyy close to what we have here so we
19:32have kind of the left side bar the top
19:34bar the input form where you paste the
19:37content you want to repurpose and then
19:39the generated content on the right hand
19:41side with the image the text as well as
19:43the ability to edit the prompt and hit
19:46publish which sends it out to a web hook
19:48which could be zapier make.com or your
19:50own app and so we've gone all the way
19:53really from an idea and some scratch
19:55drawing all the way to a fully
19:58functional MVP deployed publicly online
20:02and of course I'll change the domain for
20:03this so it's easier for people to get to
20:06but in this series really just wanted to
20:08Showcase how to use Aid driven coding to
20:11go from that initial idea big Vision to
20:14an MVP that is small launchable and
20:16feasible and how to get it across the
20:19Finish Line using Aid driven coding and
20:21so I just wanted to wrap up the series
20:23with a couple closing points number one
20:26want to discuss overall impressions of
20:28cursor AI um I really love the user
20:31experience especially with its new
20:33composer feature because it creates the
20:35files automatically edits the files
20:38automatically and even saves the changes
20:39and you can save everything before
20:41applying the changes so you can test
20:43that everything works as expected I do
20:45think cursor is a bit weaker when it
20:48comes to actually producing correct code
20:51suggestions that don't break other
20:53things so I've had more success playing
20:55around with AER do chat and Zed a AI as
20:59two alternatives to cursor but in terms
21:02of user experience and how seamless
21:05working with AI collaborating with AI on
21:07the code I think cursor AI is much
21:09better than AER and Zed however AER chat
21:12and Zed tend to produce better coding
21:15results so just wanted to throw that out
21:17as options if you're not coding
21:19full-time every day in in your typical
21:21job or career cursor AI is going to be a
21:23lot easier and more intuitive for you to
21:26pick up um Zed in particular I love that
21:29you can edit all the prompts and
21:31everything with Vim mode I really just
21:33wish it had a way to apply the code
21:36edits but those are two other ones to
21:38check out I'll type the names here a.
21:40chat and the website is Zed dodev but
21:43it's called Z aai and then I've gotten a
21:45lot of questions in my YouTube series
21:47about does this approach of Aid driven
21:49coding make sense if you have zero
21:51technical or product background and my
21:53answer to that is honestly you're
21:55probably better off starting with more
21:57traditional no code tools such as
22:00bubble.io for web app development ad
22:03dollo for mobile app developments and
22:06also softer. for crud heavy web app
22:09development and also softer. if your app
22:12basically consists of a bunch of forms
22:14and displaying that data it's another
22:16really good option and then when you
22:17pair these no code tools with workflow
22:20automation tools zappier make air table
22:23and pip dream you can definitely
22:25accomplish a lot in terms of MVP fun
22:28functionality and so I definitely want
22:30to shout out to that low code stack
22:33because it's definitely a viable option
22:35and it's what I would honestly recommend
22:37if you have zero technical or product
22:39background now for those of you who do
22:41have some tech or product background AI
22:43driven coding enables you to build more
22:45complex apps whereas with bubble or
22:48adolo or softer you're going to hit
22:49limitations and the type of
22:51functionality you want to build out so
22:53for example I've used bubble.io in the
22:55past plenty and I know that it would
22:57struggle with having a job CU video
23:00generation and video editing workflows
23:03which are ultimately things I want in My
23:05remix app and knowing that ahead of time
23:08you know that's kind of why I made the
23:09decision that I'm going to go with AI
23:11driven coding because when you kind of
23:13hit that limitation in no code tools
23:15it's incredibly painful to find a
23:17workaround or sometimes it's just not
23:19even possible to to do what it is you
23:22want and deliver the user experience
23:23that you want and so that's kind of my
23:25two cents on low code versus AI driven
23:27coding if you're building a pretty crud
23:30heavy app and you have no technical
23:31background check out low code tools
23:34first bubble adalo sofware zapier make
23:36air table pipe dream if you have some
23:39tech or product background a or you know
23:41that you're building an app that's going
23:43to hit the limitations of low code tools
23:45then that's when I would recommend
23:47seriously considering AI driven coding
23:49and the last thing I want to say is many
23:50people have reached out to me wanting to
23:52build apps or that are already building
23:54apps and MVPs but sometimes get
23:56discouraged by the learning curve just
23:58just keep in mind you know a typical
24:00software engineer has a 4-year college
24:02degree in addition to years of Industry
24:06experience obviously it's going to take
24:08you some time to learn the basics and
24:11fundamentals so get for Version Control
24:13it's something that developers we take
24:15for granted but if you're absolutely new
24:17to coding or Tech that may be something
24:19that looks scary to you but I promise
24:22you know you can learn it it's really
24:23all about your mindset and mentality and
24:26just keeping an open mind making a
24:27commitment to continual learning and not
24:30giving up early even though AI driven
24:32coding can get you very far very fast
24:34they're still learning and work involved
24:37and I always encourage you to try to
24:38follow along with what AI is doing to
24:41your code base so that you can ask
24:43better questions start developing those
24:45technical skills ask about stuff you're
24:47not familiar with just have that
24:49interactive conversation all the time so
24:51that you're continually growing
24:52continually learning because that's the
24:54most important thing anyway so in terms
24:56of my plans for this app I want wanted
24:58to spend a week or so testing it out
25:00heavily myself iterate on the core
25:03remixing functionality probably throw in
25:05a stripe integration as well and then
25:07launch it publicly no later than next
25:10week so hope you enjoyed the series
25:12build SAS with AI my name Sabrina
25:14Romanov hit subscribe drop a comment
25:17below

About this transcript

This page contains the full transcript of Build SaaS with AI | Part 7 | Zapier Webhook, Styles, & Vercel Deployment by Sabrina Ramonov 🍄, generated from the public captions YouTube serves with the video. The transcript has 4,687 words across 651 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.