Build SaaS with AI | Part 5 | User Authentication, Firestore, & Prompts Management — Transcript

Full transcript

1. 0:00my name is Sabrina ramov and this is
2. 0:02part five of my series build SAS with AI
3. 0:05where I'm going from idea to MVP using
4. 0:08Aid driven coding and in particular I'm
5. 0:10using cursor AI with Claude 3.5 Sonet so
6. 0:14in the last part we added Firebase
7. 0:16integration and also crud routes to be
8. 0:18able to create read update and delete
9. 0:21prompts that belong to your user and in
10. 0:23this post we're going to continue along
11. 0:25the same vein we're going to use
12. 0:26Firebase authentication to create the
13. 0:28whole user sign up log in log out flow
14. 0:32and then also add a new screen called
15. 0:34prompts which shows all of the users
16. 0:36prompts and it'll have a table where the
17. 0:38user can create additional prompts edit
18. 0:40existing prompts or delete prompts um as
19. 0:43part of this you will need to log into
20. 0:45your Firebase console to create what's
21. 0:47called fire store which is the Firebase
22. 0:50uh database and so just have that handy
23. 0:52and before we get started I want to say
24. 0:54thank you to some YouTube viewers who
25. 0:55pointed out a new cursor beta feature
26. 0:58called composer which is supposed to be
27. 1:01able to autogenerate new files that need
28. 1:03to be created which if you've seen my
29. 1:04past videos it's kind of been a paino
30. 1:07with cursor AI so to enable this just go
31. 1:10over here to cursor settings cursor
32. 1:13settings and then click beta and then
33. 1:15composer I've already enabled it here
34. 1:18and then these were the default options
35. 1:19that were selected so I didn't touch
36. 1:22them okay so the first thing we want to
37. 1:24do is set up Firebase authentication so
38. 1:26to do that go into your console console.
39. 1:29firebase.com google.com and then select
40. 1:31your Firebase project in my case it's
41. 1:33called remix I'm already dreading when
42. 1:36I'm going to change to the name of
43. 1:38everything because I did an SEO search
44. 1:40for remix and there's just so many
45. 1:42things called remix it's it's probably
46. 1:44going to be hard to rank with that name
47. 1:46so I'm going to have to change the
48. 1:47project name um get a new domain and
49. 1:50everything but anyway so on the left
50. 1:52side bar go to build authentication and
51. 1:54then here click get started so what
52. 1:56we're doing here is using Firebase for
53. 1:58authentication and there's a bunch of
54. 2:00different options for now I'm just going
55. 2:01to use email password allow users to
56. 2:04sign up using their email address and
57. 2:05password sweets um you could also do
58. 2:08this but I think it requires an extra
59. 2:10step yeah so we're just not going to do
60. 2:12that for now but it's cool that Firebase
61. 2:14handles it all and then if you want to
62. 2:16add a new provider Google off let's call
63. 2:18this project remix and then my support
64. 2:21email and then just click save okay so
65. 2:23now we have two signin methods email and
66. 2:26password kind of the traditional and
67. 2:28then Google signin so now the next thing
68. 2:29we want to do is actually build the
69. 2:31whole authentication process and that
70. 2:33includes the signup screen the login
71. 2:35screen possibly a button to log out as
72. 2:37well and so this here might look a
73. 2:39really long prompt but it's a lot of
74. 2:41boilerplate that we've used in the past
75. 2:43so everything up here is kind of just
76. 2:45stuff we've used in the past I include
77. 2:47it in every major prompt request just
78. 2:49because I noticed if I include it in
79. 2:51cursor AI rules sometimes it works
80. 2:54sometimes it doesn't work um so here my
81. 2:56rules for AI are pretty generic and then
82. 2:59for really important stuff what
83. 3:00libraries and Frameworks we're using
84. 3:02standards we want to conform by put it
85. 3:04at the beginning of the major prompt
86. 3:06request I just copy pasted this from
87. 3:09from previous requests if you're not
88. 3:10keeping track of the prompts you can
89. 3:12always go up here to previous chats and
90. 3:15you can see all of the chats you've had
91. 3:16with cursor Ai and you can copy paste
92. 3:18from there and then here's the actual
93. 3:20task right so it's it's actually pretty
94. 3:21small when you break down this kind of
95. 3:24large intimidating looking spec um so
96. 3:26your task is to create the signup screen
97. 3:28login screen and use a authentication
98. 3:30process we're going to use Firebase
99. 3:32authentication so basically if a user is
100. 3:34not signed in they should not see
101. 3:36anything in the app not the top bar
102. 3:38sidebar any other screen except for the
103. 3:40sign up and login screens immediately
104. 3:43after authenticating the user should be
105. 3:44redirected to the main page and see the
106. 3:46create screen and in the future of
107. 3:48course you'll want to optimize that
108. 3:50you'll probably have an onboarding flow
109. 3:52with videos explaining how everything
110. 3:54works but again this is just a V1 and
111. 3:57then I wanted to add a log out Link at
112. 3:59the bottom of the sidebar component just
113. 4:01so I can test things I just want to
114. 4:02easily log out try creating a new user
115. 4:05Make sure each user has their own
116. 4:07separate prompts I just want that to
117. 4:09make that super easy and then when that
118. 4:12log out button is clicked obviously it
119. 4:13should log out the current user and then
120. 4:15we append this at the end I've used you
121. 4:17know some variation this for every
122. 4:18single major prompt so here I'm saying
123. 4:21as an expert in nextjs and Firebase
124. 4:23since we're using Firebase
125. 4:24authentication ask me clarifying
126. 4:26questions until you're confident you can
127. 4:27complete the task I was looking over for
128. 4:30previous videos and past errors
129. 4:32definitely use clients that issue comes
130. 4:34up a lot even though I say it here right
131. 4:37use client for components that cor
132. 4:39clients I said sometimes it still
133. 4:41doesn't do it so immediately after it
134. 4:43gives me a bunch of code I'll I'll ask
135. 4:45it to check the following things check
136. 4:47use client typo check all Import pths in
137. 4:50files that have been edited or created
138. 4:52and fix any broken packs this is kind of
139. 4:54a Holy Grail I don't think this one is
140. 4:56very useful but that's okay we'll leave
141. 4:59it in for now
142. 5:00okay and by the way this is just my
143. 5:02companion blog post that's going to
144. 5:04accompany this
145. 5:06video so yeah again just want to
146. 5:08emphasize even though this looks really
147. 5:10long this paragraph here is really the
148. 5:13only thing that's new all this other
149. 5:14stuff is kind of just boiler plate best
150. 5:17practice that I want to make sure cursor
151. 5:20abides by these same things okay so
152. 5:23let's copy this okay and let's chat with
153. 5:25the entire code base so do you have a
154. 5:27Firebase project yes yes
155. 5:30simple sign up and login screens with
156. 5:33modern UI for
157. 5:36relation all form fields are required
158. 5:41yes reset
159. 5:43password not right now don't want to
160. 5:46implement Google sign in yet after log
161. 5:49out should the user be redirected to the
162. 5:50login screen after log out redirect user
163. 5:54to login screen show all error messages
164. 5:58and success notifications to user okay
165. 6:02and then let's go ahead and chat with
166. 6:03the entire code base okay and here's the
167. 6:05plan for implementing the authentication
168. 6:07so create a new file app components off
169. 6:11provider. CSX okay apply the changes
170. 6:15create sign up and login screen so it
171. 6:18didn't indicate the path for the sign up
172. 6:20and login screens it did indicate a
173. 6:23bunch of other things so so I'm going to
174. 6:25apply the other code changes first and
175. 6:27then go back and ask it to clarify what
176. 6:30files we should create what should the
177. 6:31file paths be do I have to create any
178. 6:33new directories or whatever let's just
179. 6:35apply the rest of the changes first and
180. 6:37then I'll go back to number two update
181. 6:40and you can click on this when it's blue
182. 6:42and also if it already has this here
183. 6:44then it's it's already going to be
184. 6:46applied to that file so you don't
185. 6:48actually have to open the file okay dat
186. 6:51see here page that TX okay update layout
187. 6:55okay okay well actually here are the
188. 6:58file paths so I didn't even need to ask
189. 7:00a follow-up question so it's app SL
190. 7:03login okay and then the file is page.
191. 7:07TSX and then new folder sign up and the
192. 7:11file is page. TSX let's go back to step
193. 7:16number two to implement that so create
194. 7:18sign up and login screens this is called
195. 7:21signup screen so we're going to do that
196. 7:24here that's weird it didn't apply it to
197. 7:26the screen so I just closed the screen
198. 7:28and I'm reopening it I don't know why
199. 7:30it's not actually applying this change
200. 7:32that's kind of a weird cursor bug so I'm
201. 7:34just going to copy it and paste it over
202. 7:36here and then this is the login screen
203. 7:39so it's over here yeah I see some
204. 7:41message AI did not predict an origin
205. 7:43file for this I can't read the rest so
206. 7:46again we'll just copy it and then paste
207. 7:48it here let's test it out all right the
208. 7:50Ed client thing I forgot to do the
209. 7:52followup so that's why I did that okay
210. 7:55so let's copy paste I probably should
211. 7:58limit the context to the files that were
212. 8:01created that would be better it says all
213. 8:03components that require cents that
214. 8:04already have used client one potential
215. 8:06issue in
216. 8:07[Music]
217. 8:10sidebar in the layout component we
218. 8:12should import the sidebar yeah okay so
219. 8:16in both the login and sign up pages so
220. 8:20this one is for the login screen it is
221. 8:22linked to the login screen though so if
222. 8:23you actually click this it already knows
223. 8:25which file to change okay same here so
224. 8:29this will be the signup ph. TSX that's a
225. 8:32good idea add error handling and logging
226. 8:35so I just hope it doesn't break anything
227. 8:36else though that's the thing also add a
228. 8:39state for error handling okay and then
229. 8:41add a error message all right and these
230. 8:43changes improve airor handling and
231. 8:46provide better feedback to the user when
232. 8:48content generation fails okay so let's
233. 8:50go back here let's try restarting this
234. 8:53and we're still getting this error right
235. 8:55so it's probably something super simple
236. 8:58let's copy this I'm trying to run the
237. 9:01but I see this error in terminal and
238. 9:04let's add context here so it's Firebase
239. 9:06provider.
240. 9:07CSX and it's trying to access layout.
241. 9:11TSX I'm just scanning the error message
242. 9:13for any other files it actually mentions
243. 9:16okay so instead of chatting with the
244. 9:17entire code PR I'm just going to click
245. 9:19enter so it focuses on these two files
246. 9:21as context okay so update Firebase
247. 9:24provider yeah so oh okay great hang on
248. 9:28update app layout
249. 9:30and here are the main changes so it
250. 9:31added use client so that's why that's
251. 9:33why I try to do that thing where I say
252. 9:35check use client but even that didn't
253. 9:37really work unfortunately um export
254. 9:40Firebase provider blah blah blah okay
255. 9:43try running the app again see get loaded
256. 9:45since I just saw the screen so first we
257. 9:48need to sign up we don't even have an
258. 9:50account test at
259. 9:53AOL.com okay great yes super weird it
260. 9:57just made everything black back okay so
261. 10:00we have a problem here even though
262. 10:02everything loaded uh user authentication
263. 10:04seemed to work the top bar and Side Bar
264. 10:06disappeared so so I'm literally just
265. 10:09going to take a screenshot and also why
266. 10:11did it turn black like that's strange
267. 10:14the UI style turned Dark theme I want to
268. 10:20always keep everything theme navig I
269. 10:23don't see the top bar or sidebar
270. 10:28components
271. 10:30should be persistent in the app in the
272. 10:33in the app
273. 10:34after there is and then let's mention
274. 10:38them so probably want layout top bar
275. 10:42sidebar whatever it's using for CS yeah
276. 10:45the create screen okay so hit enter to
277. 10:48feed in that context okay Global that
278. 10:51CSS for step one give me the full file
279. 10:57with the edit so I can easily apply yeah
280. 11:01it kind of just told me what to do but I
281. 11:02wanted to just give me all the code so
282. 11:06update the root
283. 11:07layout here okay appli that oh here's a
284. 11:11global okay okay jeez that was a bit
285. 11:15scary all right so now we're in let's
286. 11:17check the log out button just works so
287. 11:20if I click log out okay I'm redirected
288. 11:21to log in should not be able to access
289. 11:24the create screen so here I'm redirected
290. 11:26so let me purposely put in a wrong
291. 11:28password yeah so that's good and then
292. 11:30let me put in the correct password okay
293. 11:33perfect all right that's pretty much it
294. 11:35for implementing the user authentication
295. 11:37part of it and again we used Firebase
296. 11:39authentication I truly have no idea why
297. 11:41it just changed the UI from light to
298. 11:43dark theme a little alarming uh
299. 11:45thankfully we do all the styling stuff
300. 11:47at the end that's my usual process
301. 11:49anyway okay so now what we're going to
302. 11:51do is create the prompts table the
303. 11:52workflow I'm envisioning for the first
304. 11:54version and is I'll have my organized
305. 11:57library of prompts and then for each
306. 11:59remix or repurposing flow I I want to
307. 12:02choose the prompt that I want to I want
308. 12:04to choose a prompt for each platform so
309. 12:06I might have a set of prompts that work
310. 12:08really well for LinkedIn a set of
311. 12:10prompts that work really well for
312. 12:11Twitter there might be some prompts that
313. 12:13work well for multiple platforms and so
314. 12:15I kind of just want my organized library
315. 12:17of prompts where I can create prompts
316. 12:19edit prompts delete them add a
317. 12:21description on them that kind of stuff
318. 12:23the next feature after implementing the
319. 12:25table will be when I go to remix cont
320. 12:29content I pasted my original content and
321. 12:31then I want to select for Facebook use
322. 12:34this prompt for Twitter use this prompt
323. 12:36okay so before we do that we need to
324. 12:38create what's called a fire store and
325. 12:40that's basically just your Firebase
326. 12:42database and by the way cursor AI can
327. 12:44walk you through how to do this also if
328. 12:46you want more detail then I'll have in
329. 12:48my newsletter just ask cursor AI how do
330. 12:50I set up a fire
331. 12:52store go to build then look for fire
332. 12:55store database create database okay
333. 12:58secure rules I'm going to start in
334. 13:00production mode cuz I'm going to forget
335. 13:02to update it within 30 days and I don't
336. 13:04really know the details of fir store
337. 13:06rules that's not something I'm super
338. 13:08familiar with so I'm actually just going
339. 13:09to ask cursor how would you update the
340. 13:12Firebase fire store rule so that users
341. 13:14can create edit and delete prompts
342. 13:15belonging to them uh and it it doesn't
343. 13:17really need any context yeah I don't how
344. 13:19to remove this fireless context it is
345. 13:21not relevant at all okay so here I'm
346. 13:24starting here to update the fir store
347. 13:26rules so we need to ensure that only
348. 13:28authenticated us users can create
349. 13:29prompts yes users should be able to crud
350. 13:32their own prompts yes we'll assume
351. 13:34there's a prompts collection where each
352. 13:37document represents a prompt yes and I
353. 13:39think we did that in the previous video
354. 13:41yeah when we created the crud routes for
355. 13:43prompts each prompt document should have
356. 13:45a user ID field so here's the pseudo
357. 13:47code for fire store rules okay allow
358. 13:49update and delete BL now let's Implement
359. 13:51these rules in the yeah this is the main
360. 13:53thing I'm looking for so I can copy
361. 13:55paste here I don't know if I can change
362. 13:57this okay I guess I'll create it for and
363. 13:59then change it oh sweet and it actually
364. 14:01tells you what to do click on the rules
365. 14:02tab replace the existing rules and click
366. 14:04publish so and handy so here's the rules
367. 14:07tab here's the current rules and then I
368. 14:11just copy and pasted it and then yeah
369. 14:14changes can take a minute to propagate
370. 14:17so just keep that in mind if you're
371. 14:18testing and now here's the next feature
372. 14:20we want to implement so again this looks
373. 14:22a lot but all this stuff at the top is
374. 14:24the same boiler plate that we used for
375. 14:26implementing the authentication flow
376. 14:29this section really is what's new what
377. 14:31the spec is for this feature and then
378. 14:34down here just before I ask cursor AI to
379. 14:37ask me clarifying questions and then
380. 14:39this is the context that I'm going to
381. 14:41feed in so complete the following task
382. 14:44we want to create a new screen called
383. 14:45prompts that has a table of all of your
384. 14:49prompts and you can create update and
385. 14:51delete prompts as needed and obviously
386. 14:53you can only see the screen if you're
387. 14:55logged in um I do want basic form
388. 14:58validation so you shouldn't be able to
389. 14:59create a prompt that's empty or update a
390. 15:02prompt and then it's empty and then in
391. 15:04the sidebar we want a prompts link so we
392. 15:07can go see the prompt screen and then I
393. 15:09just gave it an example which is always
394. 15:11a best practice if you want to follow
395. 15:13the same kind of a directory structure
396. 15:15or whatever best practice just give it
397. 15:17an example and feed it in as context so
398. 15:19I did that here I just fed in the
399. 15:21dashboard directory and then when a new
400. 15:23user signs up I want them to have
401. 15:25default prompts already that belong to
402. 15:27them so that you know they don't go to
403. 15:29the prompts library and it's completely
404. 15:31empty so that they can just immediately
405. 15:33start using the remix functionality
406. 15:35without having to create new prompts um
407. 15:37and then when the user goes to the
408. 15:39prompt screen for the first time they
409. 15:40should actually see those three prompts
410. 15:42in the table be able to edit them and
411. 15:44stuff so that way they're not starting
412. 15:46from scratch and don't know what to do
413. 15:48okay so we're going to copy paste this
414. 15:51and let's start a new chats and this is
415. 15:54cool it actually already Auto tagged
416. 15:56most of these files except for all yeah
417. 15:59let's do auth provider the three
418. 16:01Firebase files prompt service remember
419. 16:03from the last video that's all our crud
420. 16:06routes for prompts dashboard I'm feeding
421. 16:08in in as example sidebar CU I wanted to
422. 16:10add a link and then the provider is
423. 16:13there anything else related to that it
424. 16:15should add no guess not okay so let's do
425. 16:19this feed this in as context I just hit
426. 16:21enter instead of command enter okay so
427. 16:23then let's answer the questions to the
428. 16:25best of our ability so should the prompt
429. 16:27screen be a new routes under the app
430. 16:29directory similar to the dashboard yes
431. 16:33okay for the table of prompts what
432. 16:34specific information should be displayed
433. 16:37let's do yes title contents creation
434. 16:42dates updated ads I forgot if there's
435. 16:46description I forget did we add that
436. 16:48field these are the fields in the
437. 16:51collection of a pron so it has title
438. 16:53content so it doesn't have a description
439. 16:55so we should probably add that later so
440. 16:56how should the create update and delete
441. 16:58functional Val implemented so for
442. 17:00example let's say I want to update an
443. 17:02existing prompt should I be redirected
444. 17:04to a separate page or as models within
445. 17:06the promp screen models with promp
446. 17:10screen okay regarding form
447. 17:12validation yes show all error
448. 17:16messages for the default prompts should
449. 17:19we add this functionality to the
450. 17:20existing off process or create a
451. 17:22separate function to check add to
452. 17:26existing appication process specific
453. 17:29design requirements and with a modern
454. 17:33clean
455. 17:35UI of yes sorting and filtering do we
456. 17:38need to add any additional error
457. 17:40handling or loading States for the
458. 17:42prompt screen I don't think so I think
459. 17:44it'll load pretty quickly I'll just say
460. 17:47it's always good to include robust
461. 17:50logging to help troubleshoot issues okay
462. 17:54then click enter so we're going to
463. 17:56create a prompts page so apps slash
464. 18:00prompts new file page TSX oops let me
465. 18:04change the name of that yeah oh hang on
466. 18:07you can actually play this now no never
467. 18:09mind I'm actually not sure how I'm
468. 18:12supposed to use composer I just started
469. 18:14doing the default thing so I don't know
470. 18:16why it's not creating will this create
471. 18:19it if I press PR yeah I don't think it's
472. 18:21going to create it because it says apply
473. 18:23to current file so yeah I need to look
474. 18:25at the documentation for how to use
475. 18:27composer cuz I thought would just create
476. 18:30files for me but that's okay whatever so
477. 18:33create the prompts page so this is the
478. 18:35page oh hang on so before I do all this
479. 18:38I actually should have committed totally
480. 18:41forgot so we added Firebase
481. 18:44authentication I just also committed all
482. 18:47the prompt stuff but these are all empty
483. 18:49so it's fine I just want to create a
484. 18:51saving point in case we needs to roll
485. 18:53back okay so now let's go ahead and
486. 18:56create the promps and yeah just not
487. 18:59working really well for these new files
488. 19:01so ended up copy pasting the file create
489. 19:04the prompts table component that's this
490. 19:06one yeah I don't know what's going on I
491. 19:08I mean I updated cursor right before
492. 19:10this video and then enabled the composer
493. 19:13and now it's just not applying these
494. 19:15changes to the file to the new files
495. 19:17yeah I'm literally just copy pasting
496. 19:19them create prompt modal okay update
497. 19:22prompt
498. 19:23modal the delete prompt model create the
499. 19:27use prompts hook for step six specify
500. 19:31the file name and file path for the use
501. 19:35prompts Hook app SL hooks sluse proms
502. 19:40okay that time it worked in a new file
503. 19:42do you need to implement anything else
504. 19:46before I start testing this new feature
505. 19:51okay few more things so update the
506. 19:53sidebar components so add the following
507. 19:56code okay in the sidebar modify the Au
508. 19:59process to create default prompts for
509. 20:01new users yeah update the signup
510. 20:03function in your off service I don't
511. 20:05know why it's guessing where it is
512. 20:07though apps services oh I don't have it
513. 20:10off service let say I don't service TS
514. 20:14file update your answer starting let's
515. 20:19say analyze my base structure and files
516. 20:24then update dur so here I'm going to
517. 20:26feed in the entire code base just to
518. 20:27make sure picks up whatever files it
519. 20:30needs to I I don't know which file I
520. 20:34should update for step two be explicit I
521. 20:39really just wanted to tell me which file
522. 20:41should I update so I'm kind of confused
523. 20:42why it's not doing that okay update the
524. 20:45app SL sign okay I'm there add the
525. 20:48import for the top of the file okay then
526. 20:52update the handle sign up function okay
527. 20:55let's test that out npm runev open the
528. 20:57console log and then what I want to do
529. 21:00is log out and then I actually want to
530. 21:02try creating a new account oh we're
531. 21:04getting a warning here yeah attempted
532. 21:07import that sounds important okay okay
533. 21:11trying to test but I see this error in
534. 21:14terminal and console Lo okay so go to
535. 21:17this part add the export the imports and
536. 21:20exports are pretty painful if anyone has
537. 21:23tips on how to do that better I would
538. 21:25happily include that in my newsletter
539. 21:27Okay so refresh go to the sign up page
540. 21:30test to okay okay sign up then go to
541. 21:34prompts okay so now here's the fun part
542. 21:37oh I tried to navigate to this page and
543. 21:39this was the error message me when I
544. 21:43navigate to dash page I see the
545. 21:47following error message in terminal and
546. 21:50okay let's specify the context I'm
547. 21:53trying to go to SL
548. 21:55page and then can't resolve update
549. 21:58prompt modal table can't resolve prompts
550. 22:03table create prompt modal update prompt
551. 22:08modal and delete okay yeah I remember
552. 22:12when I made that typo I thought I
553. 22:14changed it though F's currently name O I
554. 22:17forgot that
555. 22:18TSX oh no okay well that was a human
556. 22:22error okay is there anything else so now
557. 22:25I'm refreshing okay good so at least
558. 22:28it's not there error now it's Firebase
559. 22:30error so failed to fetch prompts and
560. 22:31this is usually because it requires an
561. 22:33index actually literally tells you here
562. 22:36but let's just suppose we don't know
563. 22:39what this means so let's go here say
564. 22:42okay that fix work to fire because it
565. 22:44literally says Firebase error so here
566. 22:47and the fix for this is e you actually
567. 22:49just go to your Firebase console and
568. 22:51create an index so that query can run
569. 22:53beautiful thing again with AI it's it's
570. 22:55going to explain all that so if this is
571. 22:57your first time with Firebase or first
572. 22:58time using fir store it's going to
573. 23:00explain what does this mean what is
574. 23:02required so fir store requires an index
575. 23:03for certain types of queries especially
576. 23:05when you're combining filtering and
577. 23:06ordering remember when I sneakily
578. 23:08increase the spec sure let's add
579. 23:10filtering and sorting why not so this is
580. 23:12what happens in this case I was a little
581. 23:15greedy there but I really do want
582. 23:16filtering and sorting so okay let's go
583. 23:19do it click on the link provided in the
584. 23:21aor message so let's go do that and then
585. 23:23you basically create a new index after
586. 23:25creating the index Firebase will take
587. 23:26some time to build it I think it can
588. 23:28take a couple minutes okay so here I
589. 23:31clicked the link that came up in the
590. 23:33console log error and it already
591. 23:35recommends what the index should be so
592. 23:37I'm just going to hit save and we'll
593. 23:39start with that and just keep in mind
594. 23:40this does take several minutes it's done
595. 23:43uh so let's go back to our app and see
596. 23:46if it can fetch the prompts oh okay
597. 23:49sweet so I just refreshed the page and
598. 23:51now you can see so I think I'm logged in
599. 23:53as test2 aol.com and these are the three
600. 23:55prompts that were created as default and
601. 23:57you can actually check check the data so
602. 23:59here if you go to cloudfire store data
603. 24:01tab you can see the terminology is a
604. 24:04collection of prompts and then each
605. 24:06prompt is represented as a document so
606. 24:09this is one prompt graph a concise and
607. 24:10attentionally grabbing tweet that
608. 24:12conveys blah blah blah here's the title
609. 24:14and then here's the user ID that this
610. 24:16prompt corresponds to because remember
611. 24:19when we implemented Firebase
612. 24:20authentication I used test aol.com we
613. 24:23just implemented functionality where
614. 24:25when a new user signs up it creates
615. 24:27three default prompts assigned to that
616. 24:29user so we only created one user which
617. 24:31is test one
618. 24:33aol.com okay so yeah that's working as
619. 24:35expected now let's see can I create a
620. 24:38new prompt let's call it bullet points
621. 24:41create a five bullet point list
622. 24:46summarizing the inputs something simple
623. 24:49so create okay it's here can I edit it
624. 24:52can I say seven bullet point list okay
625. 24:55and then what I'm going to do is log out
626. 24:58back back in and just make sure it's
627. 25:00still there I mean it should be okay
628. 25:03okay there create a seven so we created
629. 25:04a new prompt edit it and I'm sure this
630. 25:07deletes it as well so that wraps up the
631. 25:09prompts table and this is going to be
632. 25:10really powerful because I know prompts
633. 25:12organization is actually a really big
634. 25:14pain Point people are kind of hacking
635. 25:16together Google Sheets or Google doc or
636. 25:19notion um in my case I have the GitHub
637. 25:21repo containing prompts it's kind of all
638. 25:24over the place and so part of my vision
639. 25:26for this is it helps you organize the
640. 25:28prompts that you're actually going to
641. 25:29use and that you've significantly
642. 25:31fine-tuned and improved specifically for
643. 25:34Content creation and content repurposing
644. 25:36what you're going to see too eventually
645. 25:37as we add analytics in V 100 you know
646. 25:41you'll be able to see analytics by the
647. 25:43post what the original content was what
648. 25:46prompt was used in the repurposing
649. 25:48there's a lot of room in that road map
650. 25:50for many cool things you could do but
651. 25:53trying to just launch a version one
652. 25:56right now the next feature we want to
653. 25:57implement and probably the last thing
654. 25:59I'll close out this video on is
655. 26:01selecting The Prompt for each platform
656. 26:03so now we have our Li library of prompts
657. 26:06where we can create edit and delete
658. 26:08prompts now when I go to repurpose
659. 26:10content I want to choose the prompt that
660. 26:13I want to use for each platform because
661. 26:15I probably will want to use a different
662. 26:17prompt for Facebook versus LinkedIn
663. 26:18versus Twitter um so again all this
664. 26:21stuff in the beginning is our boiler
665. 26:23plates up here and the actual spec is
666. 26:26over here so basically I want to update
667. 26:29the create screen in the section over
668. 26:32here where where it says select
669. 26:35platforms so in that section select
670. 26:37platforms insert a drop-down selector so
671. 26:39that the user must select a prompt for
672. 26:42each platform selected it's kind of a
673. 26:44mouthful then I want to position the
674. 26:47platform checkbox right here
675. 26:50horizontally next to the prompt dropdown
676. 26:54selector another way to do this if this
677. 26:56wording is confusing you could probably
678. 26:57drop draw a little mockup and feed it in
679. 27:00as an image that's another approach I
680. 27:01just tend to be very word oriented so if
681. 27:04I had a preference between the two I'd
682. 27:06rather describe it in words because I'm
683. 27:08not actually very visually oriented and
684. 27:11then each user should have the three
685. 27:12prompts that were created when they
686. 27:14signed up and then prompts are not
687. 27:16specific to a platform so users can
688. 27:18select any prompt to use for any
689. 27:20platform um so for example I can easily
690. 27:23Imagine One prompt being used for both
691. 27:25LinkedIn and Facebook but it would be
692. 27:27hard to imagine that same prompt being
693. 27:29used for Twitter but the point is that
694. 27:31the prompt itself is not platform
695. 27:33specific you can choose any prompts you
696. 27:35want for any platform if a user selected
697. 27:37two platforms let's say Facebook and
698. 27:39Twitter then you need to use one prompt
699. 27:42then you need to select one prompt for
700. 27:43Facebook and one prompt for Twitter the
701. 27:45user does not need to select a prompt
702. 27:47for LinkedIn because the user did not
703. 27:49select it as a platform I don't know if
704. 27:52it was necessary to say all this but I
705. 27:54just wanted to be super clear and then I
706. 27:56also wanted to remove this Edit Pro
707. 27:58button since we don't need that anymore
708. 28:00okay and then as usual here I just
709. 28:03removed the act as an expert in Firebase
710. 28:05here I just said act as an expert nextjs
711. 28:07and ask me clarifying questions so let's
712. 28:09go ahead and copy that create a new chat
713. 28:14and then let's add in the auth related
714. 28:17file so off provider think through any
715. 28:19file so prompt service that's the crud
716. 28:21route so you'll need to get all of the
717. 28:23users prompts to populate the drop down
718. 28:25the creates I just fed in the whole
719. 28:28directories content generator where it's
720. 28:30going to generate the content then off
721. 28:32the provider um
722. 29:14let's feed in the hook use promps too
723. 29:17just in case let's use that okay and
724. 29:19then feed this in as context hit enter
725. 29:21instead of command enter Oh and before I
726. 29:24answer its questions I almost always
727. 29:27forget to commit so we added prompts
728. 29:30screen and prompts table okay great so
729. 29:36let's answer the questions as best as we
730. 29:37can should the drop down select for
731. 29:39prompts be populated with all the users
732. 29:42prompts yes all the users prompts do we
733. 29:45need to modify the use prompts hook or
734. 29:47the prompt service to fetch all prompts
735. 29:50or up to you should we update the handle
736. 29:53generated content to use the selected
737. 29:55yes use the selected
738. 29:59prompts for each platform do we need to
739. 30:01add any new state variables so I'll say
740. 30:04up to you should we add any
741. 30:07validation yes a prompt must be selected
742. 30:12for each chosen platform before allowing
743. 30:15content generation six are there any
744. 30:18specific styling
745. 30:19requirements just make it look good
746. 30:23clean and modern seven do we need to
747. 30:26update any types or inter faces to
748. 30:28accommodate the changes in the component
749. 30:30state or bronze to you should we add any
750. 30:34new eror handling or user
751. 30:36feedback yes yes show user feedback so
752. 30:41that users know they need to select a
753. 30:44prompt if they've selected a platform
754. 30:51okay so update the used prompts hook oh
755. 30:55we don't need then it said we don't need
756. 30:57to modify this file because it already
757. 30:59fetches all the prompts okay so content
758. 31:02generator click apply accept oh okay so
759. 31:06this updated content generator component
760. 31:07includes drop down selectors State
761. 31:09Management validation and then using the
762. 31:12selected prompts and adding user
763. 31:14feedback from prompt selection with a
764. 31:16simple alert okay let's try it out it's
765. 31:19probably going to be a bug and that's
766. 31:20okay okay content purer and then what
767. 31:23I'm going to do is I'm going to actually
768. 31:24open one of my blog posts so yesterday I
769. 31:27launched a Tik Tok Playbook basically
770. 31:30consolidating everything I've learned
771. 31:32growing to 100,000 followers in 60 days
772. 31:34I'm just going to copy paste initial
773. 31:36portion not the whole thing okay so copy
774. 31:38paste here this is the original content
775. 31:41select these two okay let's say for
776. 31:44Facebook I want my bullet points which
777. 31:45is the new prompt we created and then
778. 31:47edited and then let's just use this
779. 31:49Twitter tweet prompt it's kind of a
780. 31:51weird styling it's hard to tell it's a
781. 31:53drop down there's just a carrot here I'm
782. 31:55not super concerned with styling until
783. 31:56the very end okay oh sweet okay yeah so
784. 32:00you can tell this is a bullet point list
785. 32:03and it is a summary of my blog post just
786. 32:06eyeballing here and then this one used
787. 32:08the Twitter tweet which is great and so
788. 32:11yeah I mean that's pretty much yeah the
789. 32:12feature that we wanted to implement we
790. 32:14just wanted to be able to to manage our
791. 32:16prompts in our prompts Library over here
792. 32:19and then in the create screen that's
793. 32:21where we can choose the prompts we want
794. 32:23to use for each repurposing flow and
795. 32:26then also what I envision is saving this
796. 32:29as a default right let's say you want to
797. 32:31repurpose a specific type of YouTube
798. 32:33video it's a technical step-by-step
799. 32:35tutorial for that kind of video you
800. 32:37might have one set of prompts for each
801. 32:39of these platforms versus a YouTube
802. 32:41video that's about breaking trending
803. 32:43news that might use a different set of
804. 32:46prompts for each platform versus
805. 32:48repurposing tweet thread that could
806. 32:50potentially use a different set of
807. 32:52prompts for each platform and so I
808. 32:54Envision you being able to kind of save
809. 32:57these pre presets so depending on the
810. 32:59type of content you want to purpose
811. 33:01apply this presets of prompts for each
812. 33:03platform so yeah just for good measure
813. 33:05let's try it again with a different set
814. 33:07of prompts I do Wonder can I if I copy
815. 33:10paste the whole thing make it a little
816. 33:11bigger not do that so let's say for
817. 33:14LinkedIn I want to use my LinkedIn
818. 33:16article and then here I want to do
819. 33:18Facebook post so here I actually copy
820. 33:20pasted my entire blog post and let's
821. 33:22click generate content okay and here's
822. 33:24the final content that took a little bit
823. 33:26longer because the blog post itself is
824. 33:28pretty long it's 4,000 words or
825. 33:30something so here this is the LinkedIn
826. 33:32post I think it's marked on impra the
827. 33:34learning curve prioritized content
828. 33:36quality over sensationalism find your
829. 33:38Niche this is definitely a pretty
830. 33:40accurate recap of my newsletter which is
831. 33:43great and then here's the Facebook post
832. 33:46and for the Facebook post I'm just kind
833. 33:47of using the default Facebook prompt
834. 33:50that chat GPT created with absolutely no
835. 33:53input from us too many emojis but still
836. 33:56not bad this is actually pretty good for
837. 33:58a Facebook post cuz I used to help my
838. 34:00cousin run Facebook ads for their
839. 34:03digital marketing agency and if you
840. 34:05ignore all of the Emojis this is
841. 34:07actually a pretty solid format that is
842. 34:09recommended for Facebook ad post for
843. 34:12example uh this is a weak hook but still
844. 34:15it's your hook and then kind of a
845. 34:17promise related to your hook and then
846. 34:20bullet point list and then just a
847. 34:22reminder I did it all without blah blah
848. 34:24blah and then drill it home here's the
849. 34:27CTA trying to encourage engagement this
850. 34:30part part at the end i' I'd probably
851. 34:32remove but yeah no it's actually this
852. 34:35actually does follow a bunch of Facebook
853. 34:37post best practices just a little cheesy
854. 34:39with all the Emojis and stuff so I would
855. 34:41tweak that but it's a great start so our
856. 34:43MVP is really starting to shape up
857. 34:46basically you can paste text here the
858. 34:48platforms you want to repurpose it to
859. 34:50select the prompt you want to use for
860. 34:52each platform and then in one click
861. 34:54it'll generate all this content edit it
862. 34:56in line here add your unique point of
863. 34:58view your perspective your value ad and
864. 35:01then you can copy paste this directly
865. 35:03into LinkedIn or Facebook or if you have
866. 35:05a social media scheduler buffer then you
867. 35:07would copy paste it into there so the
868. 35:09app is definitely starting to shape up
869. 35:11some of the next things we want to do
870. 35:13probably connect the social media
871. 35:15accounts generate images as well if you
872. 35:17want to do a Facebook post with images
873. 35:19or a LinkedIn post with images we'll
874. 35:21also want to think about here we have
875. 35:22this edit prompt button to regenerate
876. 35:25the output in one click and I'm guessing
877. 35:28it doesn't work anymore since in a
878. 35:29previous prompt we said to remove the
879. 35:31edit prompt button what should it do so
880. 35:33should you edit this prompt regenerate
881. 35:36it should that overwrite the existing
882. 35:38prompt should you save it as a new
883. 35:39prompt those are the kinds of details we
884. 35:41want to think through connecting your
885. 35:43social media accounts adding more social
886. 35:45platforms adding image and potentially
887. 35:47video generation and also just
888. 35:50optimizing the UI I don't love I have to
889. 35:53scroll all the way down I might switch
890. 35:55it to a two column layout where I see
891. 35:56the original content on the left and
892. 35:58then the generated content on the right
893. 36:00that kind of thing but this is getting
894. 36:02kind of to the fun part now that we've
895. 36:04put a lot of infrastructure in place and
896. 36:06you've learned how to set up Firebase
897. 36:08effectively creates a new feature how to
898. 36:11you know interact with cursor AI to fix
899. 36:14things so now we're getting to the fun
900. 36:15part of playing around with the MVP and
901. 36:17seeing what feels good what's the user
902. 36:20experience that we want what are
903. 36:21additional things we want to add that
904. 36:23would really really help streamline this
905. 36:25process for someone who doesn't want to
906. 36:27spend hours putting together zapier
907. 36:29make.com automations so yeah hope this
908. 36:31video is helpful hope this series is
909. 36:33helpful my name is Sabrina Romanov hit
910. 36:35follow drop a comment below subscribe to
911. 36:37my channel