I Turned My Mac Desktop into An Interactive App! — Transcript

Full transcript

1. 0:00What if I told you that the wallpapers
2. 0:02on my desktop change automatically with
3. 0:04the month and they're not only a picture
4. 0:06anymore? They're a working app that I
5. 0:08vibe coded with today's partner,
6. 0:10Lovable. It is possibly my favorite
7. 0:13build in a very long time because
8. 0:16Lovable is unlocking the ability for
9. 0:18people like me to quickly create
10. 0:20valuable, simple apps and products,
11. 0:23business ideas that we can share with
12. 0:25our audience. This is how to turn your
13. 0:27desktop into an interactive business
14. 0:29dashboard and also turn it into a
15. 0:32product for other people. So, in this
16. 0:33video, I'll not only show you how easy
17. 0:35it is to build something like this in
18. 0:37Lovable, I'll take you through the
19. 0:38process super quickly and show you the
20. 0:40results so you can get some inspiration
21. 0:42and do the same. And you can download
22. 0:44one of the results if you want to check
23. 0:46it out.
24. 0:49Okay, so what we have here is my
25. 0:50standard wallpaper. These are actually
26. 0:52wallpapers I've designed. their monthly
27. 0:54calendar wallpapers with a nice vibe.
28. 0:56We're going to create this in Lovable.
29. 0:58Lovable is proving itself to be the most
30. 1:00accessible way to build a fully
31. 1:03customcoded interface for yourself.
32. 1:06Custom app, a custom website, whatever
33. 1:07you want it to be. So, I'd like to
34. 1:09create a app interface that is designed
35. 1:13to sit as the wallpaper on your Mac. I'm
36. 1:17going to give you my collection of 12
37. 1:19monthly wallpaper designs and I'd like
38. 1:22the app to change its backdrop every
39. 1:25month and match to those wallpapers. I
40. 1:27want to create it as an interface where
41. 1:29it's clickable and usable. And we're
42. 1:31going to use something called Plash to
43. 1:33do this. This helps you make any desktop
44. 1:36an interactive website. So, all you need
45. 1:38to design is the actual interface and
46. 1:41web app. I'd like to this to have a
47. 1:43Swiss Apple aesthetic and look as close
48. 1:46to a native Mac interface as possible.
49. 1:49Show information from my calendar for
50. 1:52the day, forthcoming events for the
51. 1:53week, and any tasks that I have for my
52. 1:58business from the task list on this
53. 2:01notion page. And first of all, how about
54. 2:03that for whisper flow? Look, it could
55. 2:04tell I was writing a list and it laid it
56. 2:06out as a list. And then I can just type
57. 2:08that in. I can go to notion. I can copy
58. 2:10the link to my task list and drop it in
59. 2:12here. And I've already created in my
60. 2:15lovable setup a connector. So, we can
61. 2:17add our connector in here.
62. 2:20We've already got notion. You can see
63. 2:22here it is. It's already set up. It's
64. 2:24ready to go. Let's just double check if
65. 2:25we've got our Google calendar. Click add
66. 2:28connection.
67. 2:30It's got so many things in there. So,
68. 2:32we're just going to go with that for the
69. 2:33scopes. We're going to use that to
70. 2:34connect. Let's connect. All right. We're
71. 2:37in plan mode, which allows us to make
72. 2:40the plan first and then action it. And
73. 2:42I'm going to go in here and I'm going to
74. 2:44attach files. This is what my minimal
75. 2:46wallpapers look like. We're going to go
76. 2:48with that. Find the wallpapers. Let's
77. 2:50just select I believe you can only do up
78. 2:52to 10. So, let's do the coming months.
79. 2:55I've attached the first 10 and can share
80. 2:57January and February if you need them.
81. 2:59Okay, let's plan it. Now, while it's
82. 3:01doing that, I'm going to show you a
83. 3:02couple of ways that you can implement an
84. 3:04app like this, both as a private web app
85. 3:06for yourself, but also you can add it to
86. 3:08your Mac doc. So, it becomes essentially
87. 3:11a bit like a native app, and you can
88. 3:13just use the integrated system that
89. 3:15Apple provides, which is called Safari
90. 3:17add to do. Now, the honest caveat here
91. 3:19is that this route is not a real widget.
92. 3:22It's got no notification center, no
93. 3:24widget stack, but it does just work.
94. 3:27Think about the possibilities. A
95. 3:28personal dashboard that is your
96. 3:30wallpaper that gives you all the
97. 3:32information you need. Mind-blowing. It
98. 3:35looks like a personal dashboard. Should
99. 3:37the app just be for your own connected
100. 3:38Google Notion accounts, no login screen,
101. 3:41or support multiple users signing in? Do
102. 3:45we think we start with just mine and
103. 3:47then upgrade it to a potential app that
104. 3:50we could ship and let others use? And
105. 3:52it's going to plan it out for me. So,
106. 3:54it's shared the plan. Great. Let's
107. 3:56approve it and see what it does. So a
108. 3:57while back there used to be code and no
109. 4:00code. Now we're doing kind of well no
110. 4:03code coding. We can select the connector
111. 4:06link to project. It's now linking my
112. 4:09connected notion account. And of course
113. 4:11you could connect anything else so I
114. 4:12could soon connect Slack. Oh, I had an
115. 4:15idea. I'd love to also have a little
116. 4:18unread Slack notifications. Can we do
117. 4:21that? Now if you add instructions while
118. 4:23it's working, Lovable will cue them up.
119. 4:26Now, this is a nice way to as you see it
120. 4:28do things, perhaps you want to jump in
121. 4:30or you forget something, you can add it
122. 4:32into the queue. And if I click this
123. 4:33little arrow, we can see the process
124. 4:35it's working through. This just gives
125. 4:37you an understanding of how much is
126. 4:39going on. You can see the thoughts of
127. 4:41your AI. So, what's nice is if you ever
128. 4:43want to understand the way it's thinking
129. 4:44or if your instructions or prompts are
130. 4:48getting the results you want, this can
131. 4:50be a fun thing to do while you wait.
132. 4:52Now, it goes without saying when you're
133. 4:53doing anything like this, coding,
134. 4:55creating access to your information, you
135. 4:57need to be happy with the level of
136. 4:58security. Lovable does have built-in
137. 5:00security checks and details that it can
138. 5:03manage. But with any of this stuff, do
139. 5:05your own research and make sure that
140. 5:07you're happy that the information you're
141. 5:09giving to third party providers, to AI
142. 5:12interfaces, is a reasonable risk for
143. 5:15you. So, you know, just say that said.
144. 5:18And on security, if you really do want
145. 5:19to restrict who can use it, you can jump
146. 5:24to workspace only, but that would
147. 5:26require you to run a business account. I
148. 5:30think this is a really good thing to set
149. 5:33up. Require basic security scan before
150. 5:35first publish and it means that you are
151. 5:38being careful with the project before
152. 5:40you publish it. Okay. Well, this is
153. 5:42pretty mad. Look at that. It's taken the
154. 5:45design and it's listed stuff into it.
155. 5:48That is so cool. The desk interface is
156. 5:51live. Open your tasks page and add the
157. 5:54lovable connection. Great. So, let's
158. 5:55just first of all go do that. So, we're
159. 5:57going to go over to notion. We can go
160. 5:59into the top right corner. We can go to
161. 6:01connections, add a connection, lovable
162. 6:05prod,
163. 6:07add to this page. Great. So, now it's
164. 6:09working on our next idea as you can see.
165. 6:11And I can I'm now approved to connect to
166. 6:14it. So I mean this is looking pretty
167. 6:16exciting. I'm just going to hide that
168. 6:17for now. Let's now connect Slack. So if
169. 6:20you want to connect Slack and interact
170. 6:22with it as you. You need to create it as
171. 6:23a personal connection. Connect as you.
172. 6:25We're going to use the basic permissions
173. 6:27for this. Great. That's connected. Link
174. 6:29that to the project. This looks
175. 6:31fantastic. We can see which one we're on
176. 6:33and we can see all the listings. The
177. 6:35moment doesn't read very well. So what
178. 6:36I'm now going to do is So you can just
179. 6:38list what you think your changes are.
180. 6:40I've just trusted Whisper Flow because
181. 6:42it's that good. And we'll send it off.
182. 6:44All right. So, I've been tinkering with
183. 6:45this and it's starting to look really
184. 6:47good. We've got a little a task list
185. 6:49that opens up today, tomorrow. This is
186. 6:52all looking really nice. We can see
187. 6:53what's going on. A Slack view where DMs
188. 6:56will show up. I've also now got a
189. 6:58minimal a maximal view which just
190. 7:02reveals stuff which is rather good. I
191. 7:04need to fix that. It's not cutting
192. 7:06things off here. And I would love the
193. 7:08idea to give as a kind of an opposite
194. 7:11month thing cuz the idea of my wallpaper
195. 7:13packs is that the color links to the
196. 7:16time of year, but this is kind of
197. 7:18western calendar. Is there a way to flip
198. 7:21this so that there's a version that
199. 7:24would work for Australians where this
200. 7:25one works for the Brits? Maybe we have a
201. 7:29hemisphere button. Maybe it's a little
202. 7:31image of a globe. That'll be
203. 7:33interesting. So, I'm really giving it a
204. 7:35challenge now. But we've created that.
205. 7:37While it goes and does that, so Flash is
206. 7:39now installed, we can add a website here
207. 7:41and you can either pick a local website
208. 7:44and just choose it like you've already
209. 7:46got it in here. So you could save your
210. 7:48app just as pure code which is rather
211. 7:50cool. So I could actually load up from
212. 7:52my clawed code setup uh a website that
213. 7:55I've loaded. Pretty cool. I've created
214. 7:58or you can just select the URL and type
215. 8:00it in here. So we'll do that in a sec.
216. 8:02Look at that southern hemisphere. Oh,
217. 8:05come on. That is epic. Well done,
218. 8:08Lovable. Look, it auto detects from your
219. 8:10time zone on first load and remembers
220. 8:12your choice. That is absolutely
221. 8:14brilliant. So, we're ready to publish
222. 8:17it. So, we are published. You can edit
223. 8:20the settings visibility. You can make
224. 8:23these private if you want. So,
225. 8:25ultimately, it's either going to be
226. 8:27better for me to adapt this so that it
227. 8:30is just for me. I'd need a business
228. 8:33account on lovable to do that. So, it
229. 8:34gets a bit more spenny, but
230. 8:38but potentially I think I just give a
231. 8:41signin option, but I'm going to just do
232. 8:43the login gate now multi-user later. So,
233. 8:46let's add that so I can log into it. And
234. 8:48I will show you how this works on the
235. 8:50desktop. So, we're going to copy the
236. 8:53URL. You can now go to desktop view.
237. 8:56We're going to go to Clash, add a
238. 8:58website. I'm going to drop the URL in.
239. 9:00There it is. and we're going to add it.
240. 9:02Click here, browse mode, and we can
241. 9:05interact. Look at that. How crazy is
242. 9:09that? I can now interact with my desktop
243. 9:11and use it. And then by the looks of it,
244. 9:14I can go to and it takes you to the
245. 9:16calendar. This is totally amazing. Reply
246. 9:18to beex. If I want to select here, I can
247. 9:21pick a date. I can jump to the task and
248. 9:24it takes me to it in notion. Oh my god.
249. 9:27And most excitingly, check it off. and
250. 9:29it'll probably disappear because it's
251. 9:30filtered. I mean, it's amazing. I'm
252. 9:33loving that. And we've got this separate
253. 9:35view which opens up. I think it looks
254. 9:38super clean. Pretty damn good. So, that,
255. 9:41my friends, is how you create yourself
256. 9:42an interactive wallpaper dashboard on
257. 9:46your Mac. And not only is this a great
258. 9:47personal use case or a personal work use
259. 9:49case, it just looks fantastic. But my
260. 9:51favorite part of this is this can now
261. 9:54become a business idea, a product idea.
262. 9:56So when you come up with a great idea,
263. 9:58you can share it with other people. So
264. 10:00let me just show you how far I've taken
265. 10:02it to finish this video off with this a
266. 10:05version to deliver my wallpapers as a
267. 10:07paid product.
268. 10:11Because look, I've now turned this into
269. 10:13something that you can sign into. So, we
270. 10:16can link this to a sales page, give
271. 10:18people an authorization, and people can
272. 10:21sign up for the product uh via the
273. 10:25integrated Google signup section. So,
274. 10:28right here, I can continue with Google,
275. 10:31sign in with my email account, allow,
276. 10:33and we're in. And you can sign out. Look
277. 10:35at that. Totally wild. I'm going to do
278. 10:38one more thing. Create a new one.
279. 10:41going to create a way for me to deliver
280. 10:42my wallpaper packs to you that
281. 10:44automatically change and automatically
282. 10:46update depending on which side of the
283. 10:48hemisphere you're on. So, let's just
284. 10:50attach the files. Find the files and
285. 10:52we're going to go with the MacBook ones
286. 10:53and we'll do the first four.
287. 10:56You'll need all 12 before you can create
288. 10:59the two hemisphere sides. These are
289. 11:02designed for northern hemisphere. Click
290. 11:05build.
291. 11:08All I now want to do is make this
292. 11:10sellable. So the app should have the
293. 11:12option for users to sign in and access
294. 11:14it with their license. Now on my
295. 11:16previous build with Lovable for my uh
296. 11:18Aentic Business Accelerator cohort
297. 11:21program, we use their built-in Stripe
298. 11:24and Paddle integration. Super easy and
299. 11:26really brilliant. And we could use that
300. 11:28here. But I want to just see if it's
301. 11:29possible to link it up to my current
302. 11:31payment platform, which is Lemon
303. 11:33Squeezy. So, I'm just going to say it
304. 11:35should have an option for users to buy a
305. 11:37license to access and use this really
306. 11:40cheap for the year just to have the
307. 11:41wallpapers and we update the wallpaper
308. 11:43delivery the app it can improve and they
309. 11:46can just load it with the free flash
310. 11:48integration. So, let's see if it will do
311. 11:50it. So, I think if you're building a
312. 11:51business web apps and vibe coding allow
313. 11:54you to do subscriptionbased models even
314. 11:56if we're talking like $15 for the year
315. 11:58to have all of the wallpapers. It's it's
316. 12:00really simple and really beautiful. And
317. 12:02then each year we do a new design and
318. 12:04people just get them automatically
319. 12:05because the website is their wallpaper.
320. 12:08I kind of love it. I'm going to go and
321. 12:09create a new product. New product. And
322. 12:12we'll call this Living Wallpapers.
323. 12:15Living Wallpapers is an automatically
324. 12:17updating monthly wallpaper pack. I'll
325. 12:20clean this up later. It's going to be a
326. 12:22subscription. Standard pricing. Price
327. 12:25per unit. I'm going to make it $20.
328. 12:27Repeat every year. Generate license
329. 12:29keys. activation limit. Let's give them
330. 12:33the activation of three activations.
331. 12:35That's three devices. Save as a draft.
332. 12:37So, this is from the original version.
333. 12:39This is what the design people will get.
334. 12:42But what I'm also going to do at some
335. 12:43point is update it so that we also get
336. 12:46the solid version, which I think would
337. 12:48be really nice. Okay. I spent a couple
338. 12:50of extra hours working on the
339. 12:51productized version, and I've got to
340. 12:53tell you, it's super cool. So, you can
341. 12:55see I've gone through loads of
342. 12:56iterations around signin pages, uh,
343. 12:59information. Let me show you the
344. 13:01results. And this is the current
345. 13:03wallpaper pack that is just fully
346. 13:04designed by hand and is just a pack that
347. 13:07you can download and change manually.
348. 13:08We're going to go up to flash and click
349. 13:11enable. And you can see Lovable has
350. 13:13coded me a login page which shows the
351. 13:17getting set up guide. And then they can
352. 13:19go and sign in. And this is the sign-in
353. 13:21page. And all you would do is you would
354. 13:22go in, add a website, drop the URL into
355. 13:26here, and give it a name and add it. It
356. 13:28then turns up here. you get this and you
357. 13:30can see it's kind of previewing the
358. 13:32options. So I can now sign in. I gave
359. 13:34I've already logged in with the code and
360. 13:37there it is. All you need to have on it
361. 13:38on is browsing mode. If you take it off
362. 13:40that it's not clickable. It just works
363. 13:42as a normal Mac. But when I want to edit
364. 13:44the desktop I can click browsing mode
365. 13:47and then we have a little menu over here
366. 13:50where if we click on the menu we can see
367. 13:53my active license can sign in and out.
368. 13:56We have southern and northern hemisphere
369. 13:58modes. Look at that. We have date. I
370. 14:02need to change the name of that. It
371. 14:03should say date and month, but I'll edit
372. 14:05that. And we have gradient and solid
373. 14:07versions of the pack. And my favorite
374. 14:11bit of this is where the other designs
375. 14:13moved their letters and numbers around.
376. 14:15You've got three options for any of
377. 14:17them. So, you've got a lot of options to
378. 14:20jump between different modes and then it
379. 14:22will automatically update the date and
380. 14:24the look as you want it. I think it's
381. 14:27absolutely brilliant. I've paid for
382. 14:28monthlywallpapers.com.
383. 14:30Can't believe that was available. You
384. 14:32can just go to publish and you can add a
385. 14:34custom domain and Lovable will take you
386. 14:37through the process. There it is.
387. 14:38Monthlywallpapers.com. And now I just
388. 14:41need to go and do the setup over at my
389. 14:43domain host and we're away. How cool.
390. 14:46So, all that's left to do is test this
391. 14:48out. And well, that's for you to do
392. 14:52below. Go and download this. I'm going
393. 14:54to sign out and you will find this page
394. 14:57over at bettercreating.com. How about
395. 14:59that? If you are excited by lovable, you
396. 15:02can check them out below. This is
397. 15:03amazing. You can turn your ideas into
398. 15:05reality and most importantly, you can
399. 15:07turn them into products that you can
400. 15:09ship very, very quickly. Next, if you
401. 15:11want to go a little further with your
402. 15:12Mac and desk setup, think about the
403. 15:13hardware and watch this video next or
404. 15:16this one down here for my full guide on
405. 15:18how I built out my entire agentic
406. 15:20business method landing page with
407. 15:22Lovable in one day. It was completely
408. 15:24wild and you absolutely should check it
409. 15:26out over on Systems Made Better.
410. 15:28Ceasing.