Build SaaS with AI | Part 2 | Setup Tech Stack & Dev Tools — Transcript

Full transcript

1. 0:00my name is Sabrina Romanov and this is
2. 0:01part two of building SAS with AI in my
3. 0:04first video I covered having a Grand
4. 0:07Vision for your product and scoping it
5. 0:09down to a feasible version one MVP and
6. 0:13in this video before we start getting
7. 0:15into Hands-On coding we're going to set
8. 0:18up the developer tools and the tech
9. 0:20stack um and I'm just going to use the
10. 0:22one that I typically use for MVPs which
11. 0:24is nextjs a full stack web app framework
12. 0:26Firebase for the database versel for
13. 0:28deployment and and something simple like
14. 0:31God Daddy for managing the website
15. 0:32domain in terms of developer tools and
16. 0:34this is what we'll install first I'm
17. 0:36currently playing around with war. Dev
18. 0:38which is an AI powered terminal super
19. 0:40cool um cursor is an AI powered code
20. 0:43editor it's a fork of Visual Studio code
21. 0:45it's streamlines the process of AI DM
22. 0:48and coding or AI assisted coding and the
23. 0:50last item Claude artifacts it's a new
24. 0:51feature from Claude where you can write
25. 0:53a bunch of code and it'll even preview
26. 0:55the front end I would mark this as
27. 0:57optional you can either write most of
28. 0:59the codebase incloud artifacts and then
29. 1:02move it over to cursor or you can write
30. 1:04it initially from cursor um for this
31. 1:06video series I'm going to try just
32. 1:08sticking to cursor AI but I often do use
33. 1:11CLA artifacts as well so I listed it
34. 1:13here so now let's go through the process
35. 1:14of installing each of these starting
36. 1:16with war. let's go to the website and
37. 1:19it's basically a terminal reimagined
38. 1:22with AI has like smart autocomplete you
39. 1:25can even ask questions in natural
40. 1:26language like how do I merge this Branch
41. 1:29to Main or how do I do something like
42. 1:31this expose a Docker Port then it
43. 1:33literally gives you an answer that you
44. 1:35can then immediately run within the
45. 1:36terminal so here just click download for
46. 1:39Mac or whatever operating system you use
47. 1:41unfortunately doesn't have Windows right
48. 1:42now and open it up and it should look
49. 1:44like this okay we're going to go into
50. 1:47Dev and then from here you can type
51. 1:49anything how do I create a nextjs
52. 1:53project nextjs again is the web app
53. 1:56framework that we're going to use so
54. 1:58here's the command to create it and then
55. 2:00it autocompletes it here for you so you
56. 2:02can immediately hit enter to run and
57. 2:04there's a lot of new other features as
58. 2:06well I just started playing around with
59. 2:07war. a few days ago and and really like
60. 2:10it so far but I would say kind of the
61. 2:12most obvious standout feature is being
62. 2:13able to type natural language questions
63. 2:16like how do I do this and you you may
64. 2:18not remember the commands or don't know
65. 2:21the sequence of commands to run and
66. 2:22it'll give you suggestions like here are
67. 2:24exactly the commands that you can run in
68. 2:26the terminal the next tool I'm going to
69. 2:28download is cursor AI it's an AI powered
70. 2:31code editor you can download it for free
71. 2:33so just click download for free and then
72. 2:36it'll download it and it's pretty cool
73. 2:38so you get answers from your codebase
74. 2:40you can even refer to specific files or
75. 2:42documentation you can apply just one
76. 2:45change or apply all changes in a file
77. 2:48you can ask follow-up questions like if
78. 2:49it makes a suggestion to code something
79. 2:51a certain way you can ask followup
80. 2:53question clarifying you know why it's
81. 2:55designing it that way okay so when you
82. 2:57open it up it should look like this and
83. 2:59then then you're going to have to open a
84. 3:01folder containing your project okay so
85. 3:03those are the two developer tools I'm
86. 3:05going to use and now we're going to set
87. 3:07up the the text stack that I typically
88. 3:09use okay so let's go back to war. Def
89. 3:13and let's say how do I install nextjs
90. 3:17now my environment's already set up
91. 3:19where I can run this command and it'll
92. 3:21actually work but if you're watching
93. 3:22this your environment's probably not set
94. 3:24up with node or npm so I might say
95. 3:27something like what is npm like what is
96. 3:29this command okay so it's a node package
97. 3:31manager and it's the default package
98. 3:33manager for node.js so here I just
99. 3:35created a new tab within my warp
100. 3:37terminal and I'm going to ask what are
101. 3:40all the steps and prerequisites to
102. 3:44install nextjs and once you do all of
103. 3:47the setup by the way you only have to do
104. 3:49it once once you set up node.js npm
105. 3:51nextjs and all the other things you can
106. 3:54use this repeatably for any future MVPs
107. 3:57you want to build okay so let's look at
108. 3:59warps answer so to install nextjs you'll
109. 4:01need to follow these steps and meet the
110. 4:02following PR prerequisites for example
111. 4:04install node.js you can download install
112. 4:06node.js from blah blah blah blah a code
113. 4:09editor which we already have so that's
114. 4:11cursor it's our code editor okay so
115. 4:14let's see so let's go with the first
116. 4:15prre and how do I install nodejs okay so
117. 4:19I'm using a Mac install Homebrew if you
118. 4:22don't have it already you can even click
119. 4:24this to actually run it so this button
120. 4:27here says run in terminal so that'll run
121. 4:29the commit command directly and then
122. 4:30once home brew is installed just do Brew
123. 4:33install node again run in terminal and
124. 4:35to verify that they're both installed we
125. 4:36can run both of these commands so run in
126. 4:38terminal you can see uh the commands
127. 4:40down here and then run them and you can
128. 4:43see the versions for node and npm
129. 4:45another quick check is like when you
130. 4:47type something like node it should turn
131. 4:48green that means it's installed in your
132. 4:50system okay so now we've done the first
133. 4:53prere okay installing nodejs we already
134. 4:56have a code editor which is cursor and
135. 4:58then now we're going to install next JS
136. 5:00open the terminal navigate to the
137. 5:02project directory initialize a new
138. 5:04nextjs project using this command all
139. 5:07right now that we've installed all the
140. 5:08prerequisites now we're going to create
141. 5:10a nextjs project I just opened a new tab
142. 5:12in the terminal by clicking up here
143. 5:14command T if you're on Mac and then here
144. 5:16I'm going to ask how do I create a
145. 5:18nextjs project okay so here it autop
146. 5:21populated the command line and I'm just
147. 5:24going to change this to the name of my
148. 5:26app which is remix I'm going to select
149. 5:28all the default settings here yes
150. 5:30typescript yes yes L Tailwind no to
151. 5:33Source directory yes app router no
152. 5:36customize so I actually just clicked
153. 5:38enter on all of them and just selected
154. 5:40the default
155. 5:41options so now LS is to show what's in
156. 5:45this current directory and now you can
157. 5:46see our directory Here remix all right
158. 5:48so we're all set up with nextjs the full
159. 5:51stack web app framework we initialized a
160. 5:53a sample projects using warp if you
161. 5:56enter the directory so CD change
162. 5:59directory
163. 6:00CD remix and then click LS this lists
164. 6:04everything in that directory so you can
165. 6:05see our sample project here the next
166. 6:07thing we're going to do is just sign up
167. 6:08for Firebase we won't be using it for at
168. 6:11least a couple more videos so if you
169. 6:13just Google Firebase on Google this is
170. 6:15what comes up Firebase Google's mobile
171. 6:17and web app development platform go
172. 6:19ahead and click on that and then it
173. 6:21should look something like this welcome
174. 6:22to Firebase and then get started with
175. 6:24the Firebase project you don't have to
176. 6:26do anything besides sign up for it right
177. 6:28now next we're going to sign up for
178. 6:30versel which is what I use for
179. 6:32deployments another popular option is
180. 6:34called Heroku so you can choose
181. 6:36whichever one you like here's Heroku ver
182. 6:40sell.com so it should look like this
183. 6:42click sign up on the right hand corner
184. 6:44just click Hobby and then just go
185. 6:46through the sign up process and then
186. 6:48once you get in it'll look something
187. 6:50like this so you can see here an
188. 6:51overview of all of my different project
189. 6:54for managing the website domain I just
190. 6:56use GoDaddy and when you go to deploy
191. 6:58the app what I usually do at least for
192. 7:01me I like to deploy my apps as
193. 7:03subdomains on my primary website
194. 7:06newsletter sabrina. deev goad is pretty
195. 7:08easy there are other Alternatives as
196. 7:10well all right that's the end of this
197. 7:11video walking through my usual text
198. 7:13stack for MVPs and the developer tools I
199. 7:16use in the next video we're going to
200. 7:18start actually building our MVP taking
201. 7:20the spec we worked on in part one of the
202. 7:23series plugging it into either cursor or
203. 7:25Cloud artifacts to create the initial
204. 7:27code base and then basically go go
205. 7:29through each feature one by one
206. 7:31implement it test that it works
207. 7:33implement it test that it works in this
208. 7:35video I just wanted to talk about
209. 7:37setting up tools for development as well
210. 7:40as my usual text stack so that I can
211. 7:42refer to this video later on once you do
212. 7:45all of this once you don't have to
213. 7:46repeat it you can use this Tex stack for
214. 7:48all future MVPs that you build out my
215. 7:51name is Sabrina ranov hope you enjoyed
216. 7:52this video hit like hit subscribe drop a
217. 7:55comment below if you have any questions