WEBVTT 1 00:00:01.840 --> 00:00:02.360 All right. 2 00:00:02.360 --> 00:00:02.780 Good morning. 3 00:00:03.100 --> 00:00:03.500 Happy Tuesday. 4 00:00:03.700 --> 00:00:06.020 We are back on for our Tuesday live stream. 5 00:00:06.560 --> 00:00:10.320 We're doing our internal team training, and we're just live streaming it so you guys can 6 00:00:10.320 --> 00:00:11.940 learn kind of our process. 7 00:00:12.300 --> 00:00:13.580 I've got the rest of my team on here. 8 00:00:13.720 --> 00:00:17.740 Maybe we'll bring them on if we have some Q&A at the end, but we do these every Tuesday 9 00:00:18.120 --> 00:00:23.840 and just talk about how we're leveraging ShapeUp, how we're leveraging AI, how we are working 10 00:00:23.840 --> 00:00:24.520 with clients. 11 00:00:24.520 --> 00:00:31.040 We have been an agency for since 2010 and have made a lot of mistakes and have recently 12 00:00:31.040 --> 00:00:36.060 been really refining our process and dialing in our systems, and so I wanted to just hop 13 00:00:36.060 --> 00:00:36.420 on here. 14 00:00:36.600 --> 00:00:39.780 We're doing these trainings every Tuesday, and so we're going to start sharing them more 15 00:00:39.780 --> 00:00:41.140 and more on publicly. 16 00:00:41.680 --> 00:00:47.700 So today, we're going to do like a workflow tour, so a series, so I'm going to start it 17 00:00:47.700 --> 00:00:48.040 out today. 18 00:00:48.040 --> 00:00:50.920 I'm going to take a recent project and just go top to bottom. 19 00:00:51.360 --> 00:00:53.180 How did I start the project? 20 00:00:53.180 --> 00:00:55.640 How did I go through each of the steps of the project? 21 00:00:56.140 --> 00:01:00.440 One of some of the tools I used, we'll talk about Notion, talk about ShapeUp, talk about 22 00:01:00.440 --> 00:01:01.600 breadboarding, task grids. 23 00:01:01.720 --> 00:01:02.700 We'll talk about... 24 00:01:02.780 --> 00:01:05.000 I'm using ShipFast from Mark Lau. 25 00:01:05.500 --> 00:01:11.100 I'm using Superbase, Cloud Code, GitHub, DigitalOcean, so I'm just going to walk through all these 26 00:01:11.460 --> 00:01:15.060 little steps, and we'll have this in a nice little blog post as well, so if you hit the 27 00:01:15.580 --> 00:01:18.980 description eventually after this has been live, you'll see like a little blog post with 28 00:01:18.980 --> 00:01:20.940 links to everything to help you out. 29 00:01:20.940 --> 00:01:22.520 So hopefully, you'll learn something. 30 00:01:22.640 --> 00:01:26.880 You can always drop comments and things as we go, so it'll be very, very practical. 31 00:01:27.060 --> 00:01:30.920 So let me share my screen, and this is the app. 32 00:01:30.960 --> 00:01:33.360 I'm going to kind of show you like the finished product. 33 00:01:33.700 --> 00:01:36.580 So everything is sort of set up here. 34 00:01:36.720 --> 00:01:40.600 We're still refining some of the marketing copy, and you would go in here, and you'd 35 00:01:40.620 --> 00:01:46.560 register, and you'd hit a dashboard, and here, let's see how it goes. 36 00:01:46.600 --> 00:01:49.580 So we can go here and we hit upload, and you pick a file. 37 00:01:49.580 --> 00:01:54.540 So I'm just going to grab, let's grab this one here, and I can give it a name, and I 38 00:01:54.540 --> 00:01:59.860 can just say this was from, let's say, Keith, and it pulls the date from the file, and then 39 00:01:59.860 --> 00:02:04.900 what will happen is it'll go off, and it will start to send that to, we use Whisper for 40 00:02:05.060 --> 00:02:11.960 AI, and it's got a little like player down here, so you can see this, and then, yeah, 41 00:02:11.960 --> 00:02:18.100 just in a few seconds, this is only like maybe a two-minute audio, it gives you back a little 42 00:02:18.220 --> 00:02:22.240 summary, and then it's even references, like if someone shared like a scripture or something, 43 00:02:22.320 --> 00:02:27.780 it pulls those out as a little summary, and then you can just read the words here, and 44 00:02:27.780 --> 00:02:31.520 it breaks it up by sentence, which is really nice, and time codes it, which is cool. 45 00:02:31.580 --> 00:02:35.400 So a lot of little things happening here, we actually time code every single word, so 46 00:02:35.400 --> 00:02:41.340 we can create these really nice layout transcripts here, and the thing about this is you've got 47 00:02:41.380 --> 00:02:46.780 like a block of text that's coming, or audio rather, and that's kind of hard to find something, 48 00:02:46.780 --> 00:02:49.640 especially if you can imagine this is like 10 minutes long, it's kind of hard to go in 49 00:02:49.640 --> 00:02:54.560 and find things, so what we've made is this idea, so you can come in here and like highlight 50 00:02:54.720 --> 00:02:58.580 a section, and you can click in here and say, hey, that's for like related to finances, 51 00:02:58.900 --> 00:03:04.000 hey, like this right here is related to family, and then these little highlights get created 52 00:03:04.000 --> 00:03:09.600 at the top, and when you go back to the dashboard, you can see all of your highlights, and if 53 00:03:09.600 --> 00:03:14.620 you click on the play button, it actually plays the audio from that little section, 54 00:03:15.660 --> 00:03:19.960 which is kind of cool, so it just jumps to that part of the audio, plays that audio, 55 00:03:19.980 --> 00:03:25.960 and you can obviously filter things here, so we built this whole app from start to finish, 56 00:03:26.020 --> 00:03:31.320 all the shaping was about 36 hours, I did have it shaped as a two-week project, so for us, 57 00:03:31.360 --> 00:03:37.000 we work in kind of 25-hour weeks, and I'm still in the like final stages of getting the landing 58 00:03:37.000 --> 00:03:41.700 page up, and a few little fixes going in, so there's a little bit of margin here, but this 59 00:03:41.700 --> 00:03:48.260 is a little side project, and I really enjoy our process so much that even on a side project 60 00:03:48.260 --> 00:03:52.340 that's nights and weekends, and I'm just doing it for the fun of it, I'm still using our 61 00:03:52.340 --> 00:03:56.640 process because it actually works, and you can kind of see this is a great example of 62 00:03:56.640 --> 00:04:01.580 what a side project looks like, it's like pretty intense first week, okay, four hours 63 00:04:01.580 --> 00:04:06.320 the next week, seven hours, then kind of dabbled, and then nothing, right, for like a bunch 64 00:04:06.320 --> 00:04:11.000 of weeks, and then picked, well, this was, must have been July, I think, and then this 65 00:04:11.000 --> 00:04:15.700 comes in, I think, in here, late end of September, beginning of October, just did another little 66 00:04:15.700 --> 00:04:21.220 push, and then we got it done, so this is, you know, this process works, whether you're 67 00:04:21.220 --> 00:04:26.200 doing it, you know, back-to-back two weeks, or I've spent a couple months here, I still 68 00:04:26.200 --> 00:04:31.940 kind of track it as, you know, one two-week project, and the important thing here, as 69 00:04:31.940 --> 00:04:35.720 we'll talk through our process as well, is we set that time limit at the beginning, 70 00:04:35.800 --> 00:04:39.320 I didn't just start working, and then see where it is, I said, you know what, like if 71 00:04:39.320 --> 00:04:43.920 I spend 50 hours over the next couple months on this, and launched it, that's a good amount 72 00:04:43.920 --> 00:04:50.660 for me, I don't want to spend 150 hours on this, like I just don't have that in my week, 73 00:04:50.880 --> 00:04:55.440 or in my year, honestly, to give that, so we set the week, kind of figure out what's 74 00:04:55.440 --> 00:04:59.640 it worth to me to give someone this time to, and then I kind of time boxed it that way. 75 00:05:00.000 --> 00:05:02.020 Let me walk through the process here. 76 00:05:02.860 --> 00:05:05.300 First up, of course, we started in Notion. 77 00:05:06.060 --> 00:05:07.400 We created this document. 78 00:05:08.260 --> 00:05:11.160 We had a video last week on the template 79 00:05:11.160 --> 00:05:15.460 that we use for Notion and how we use this template 80 00:05:15.460 --> 00:05:16.540 and kind of check things off. 81 00:05:16.540 --> 00:05:17.640 But basically, what comes out of this 82 00:05:17.640 --> 00:05:20.640 is we describe the problem, a few little sentences. 83 00:05:21.740 --> 00:05:26.480 So in the prophetic faith Christian world, 84 00:05:26.580 --> 00:05:29.180 people get these little audio recordings, 85 00:05:29.180 --> 00:05:31.920 or people give verbal encouragement 86 00:05:31.920 --> 00:05:33.900 or give what we call a prophetic word. 87 00:05:34.060 --> 00:05:36.580 It's just something they feel like the Lord is telling them 88 00:05:36.580 --> 00:05:37.460 for this other person. 89 00:05:38.140 --> 00:05:40.960 And constantly, you're just pulling out your voice memo app 90 00:05:40.960 --> 00:05:42.100 and you're just storing all these. 91 00:05:42.140 --> 00:05:45.800 So these tend to get lost in that person's app. 92 00:05:45.880 --> 00:05:47.760 And that just lists all the problems 93 00:05:48.040 --> 00:05:50.680 that this whole thing creates and why this is important. 94 00:05:51.260 --> 00:05:52.960 And so we said, hey, it would be great to have, 95 00:05:53.680 --> 00:05:54.740 this is sort of the outcome. 96 00:05:54.860 --> 00:05:56.140 Again, I'm not talking about solutions. 97 00:05:56.160 --> 00:05:58.240 I'd get a little solutiony right here, 98 00:05:58.240 --> 00:05:59.720 getting specific with Google Auth. 99 00:06:01.040 --> 00:06:02.620 But this was a side project. 100 00:06:02.920 --> 00:06:04.900 So I'm going to take some penises. 101 00:06:04.980 --> 00:06:06.200 But these are just kind of dropping my thoughts. 102 00:06:06.320 --> 00:06:08.820 Here's kind of, I want it to sort of end up this way. 103 00:06:09.340 --> 00:06:11.460 And the reason I said Google Auth is I 104 00:06:11.460 --> 00:06:12.720 wanted it to be like a one-click. 105 00:06:13.340 --> 00:06:13.680 You're in. 106 00:06:14.060 --> 00:06:16.380 It's not complicated to have to remember a new password 107 00:06:16.380 --> 00:06:17.560 or anything like that. 108 00:06:18.560 --> 00:06:19.880 Things are transcribed with AI. 109 00:06:20.080 --> 00:06:21.080 And I said it'd be cool if we could 110 00:06:21.080 --> 00:06:23.160 create some sort of meaningful phrases 111 00:06:23.160 --> 00:06:25.640 to pull these things out, like these different tags. 112 00:06:26.580 --> 00:06:29.180 And then I also listed out the two-week project. 113 00:06:29.340 --> 00:06:30.360 That's where I decided, hey, I think 114 00:06:30.360 --> 00:06:31.740 this is two weeks worth of my time. 115 00:06:32.280 --> 00:06:34.620 Not doing, I said, automated tagging. 116 00:06:34.740 --> 00:06:37.200 I did pull this out because this got a little complicated. 117 00:06:37.260 --> 00:06:38.960 And sometimes you have things in the outcome 118 00:06:39.160 --> 00:06:40.900 that we literally just were like, you know what? 119 00:06:41.020 --> 00:06:41.980 I'm just pulling this guy. 120 00:06:42.020 --> 00:06:43.900 And I'm not dropping it down there. 121 00:06:44.540 --> 00:06:47.000 So you can actually just move things and make that change 122 00:06:47.360 --> 00:06:49.440 as you get into it, because some things end up 123 00:06:49.440 --> 00:06:50.360 being a little more complicated. 124 00:06:51.740 --> 00:06:53.760 We weren't allowing a microphone. 125 00:06:53.920 --> 00:06:54.820 There's no mobile app. 126 00:06:54.820 --> 00:06:57.800 I said there's no place where you can hit a button 127 00:06:57.800 --> 00:06:58.480 to start recording. 128 00:06:58.540 --> 00:07:00.060 It's just uploading an audio file. 129 00:07:01.440 --> 00:07:05.360 I actually said any kind of linking or stuff like that. 130 00:07:05.640 --> 00:07:08.160 Not uploading anything but an MP3, MP4. 131 00:07:09.680 --> 00:07:10.780 There's no analytics. 132 00:07:10.920 --> 00:07:11.940 So I just kind of listed out things 133 00:07:11.940 --> 00:07:14.640 just to kind of cut away at what this project was. 134 00:07:15.280 --> 00:07:17.620 So with that, it's keeping really crisp. 135 00:07:18.580 --> 00:07:21.280 Couple of bullets is the idea. 136 00:07:21.800 --> 00:07:25.320 And then we got this from Shape. 137 00:07:25.320 --> 00:07:26.680 So I'll link some things here as well. 138 00:07:26.720 --> 00:07:27.660 You can check out Ryan Singer. 139 00:07:27.820 --> 00:07:30.800 You can check out ShapeUp, learn more about the idea of framing. 140 00:07:31.720 --> 00:07:32.960 Then we moved into breadboarding. 141 00:07:33.740 --> 00:07:35.060 So very simple system. 142 00:07:35.160 --> 00:07:36.880 It's just like there's a thing that's orange. 143 00:07:37.080 --> 00:07:39.380 And that thing has other things inside of it. 144 00:07:39.800 --> 00:07:41.620 And when you want to break something out, 145 00:07:41.640 --> 00:07:42.960 you just take the navigation. 146 00:07:43.160 --> 00:07:44.880 You break it out into a new thing. 147 00:07:44.880 --> 00:07:46.260 And that has things inside of that. 148 00:07:46.640 --> 00:07:47.760 And so when you click Get Started, 149 00:07:48.080 --> 00:07:49.480 you can kind of see the flow here. 150 00:07:49.540 --> 00:07:50.400 We're going to be login. 151 00:07:50.400 --> 00:07:52.580 We have a magic link, Google Auth. 152 00:07:53.540 --> 00:07:55.540 When you log in, you're going to see just a bunch of words. 153 00:07:56.100 --> 00:07:58.160 And if it's a paid user, unpaid. 154 00:07:58.420 --> 00:08:00.840 I did get all the billing and everything set up with this. 155 00:08:00.880 --> 00:08:02.560 And I'll show you how to do that in a second. 156 00:08:03.740 --> 00:08:05.520 But let me back up for just a second, 157 00:08:05.540 --> 00:08:06.860 because I should have started with this. 158 00:08:06.980 --> 00:08:09.340 This is really key, because you can see in 36 hours, 159 00:08:09.360 --> 00:08:11.280 I basically created an entire product 160 00:08:11.500 --> 00:08:15.120 that I could sell and make money from using this process. 161 00:08:15.240 --> 00:08:17.720 And so if you have an idea for something, 162 00:08:17.720 --> 00:08:19.880 you want to put a couple of weeks towards it, 163 00:08:20.240 --> 00:08:21.780 this is actually a sellable project. 164 00:08:21.860 --> 00:08:23.120 You can go put your credit card in here. 165 00:08:23.520 --> 00:08:24.760 It bills it, gives me money. 166 00:08:25.980 --> 00:08:27.160 This is like a sellable tool. 167 00:08:27.220 --> 00:08:29.500 So this is important, because a lot of times 168 00:08:29.500 --> 00:08:30.440 you have ideas for things. 169 00:08:30.440 --> 00:08:31.940 And we're like, oh, one day I'll sell this. 170 00:08:32.440 --> 00:08:34.679 This actually is including all the billing and the business 171 00:08:34.679 --> 00:08:35.340 side of it as well. 172 00:08:35.440 --> 00:08:37.840 So let me just jump back, because that's important. 173 00:08:39.340 --> 00:08:42.380 So you're not like, it's kind of a full way to test it. 174 00:08:42.380 --> 00:08:44.340 That's probably a whole other video on launching 175 00:08:44.340 --> 00:08:45.240 little mini projects. 176 00:08:45.240 --> 00:08:47.860 But anyway, so unpaid user, we're 177 00:08:47.860 --> 00:08:49.220 prompting to upgrade to premium. 178 00:08:50.100 --> 00:08:52.660 And here's where you can see some shortcuts, 179 00:08:52.760 --> 00:08:53.800 because I was like, upgrade to premium. 180 00:08:53.820 --> 00:08:55.260 And that just doesn't go anywhere. 181 00:08:55.820 --> 00:08:59.560 So there's some missing pieces as I was building and coming 182 00:08:59.560 --> 00:09:00.060 back and forth. 183 00:09:00.120 --> 00:09:01.880 But what was really funny about this process 184 00:09:02.800 --> 00:09:05.440 is every time I got stuck in the app 185 00:09:05.440 --> 00:09:07.140 and things felt weird and awkward, 186 00:09:07.640 --> 00:09:09.160 I would kind of go in this little loop. 187 00:09:09.260 --> 00:09:10.860 And I was like, I'd eventually reach 188 00:09:10.860 --> 00:09:13.140 for this tool of breadboarding again. 189 00:09:13.140 --> 00:09:15.840 We had this weird, weird flow where 190 00:09:15.840 --> 00:09:19.340 you would, when you were in the audio here, you could see. 191 00:09:19.700 --> 00:09:20.740 Let me go back to the app. 192 00:09:21.100 --> 00:09:23.300 When I clicked Upload, it goes right to the file. 193 00:09:23.640 --> 00:09:27.060 You can't really see that, but it pops up my Finder window. 194 00:09:27.400 --> 00:09:30.200 I choose the file, and then this thing comes up. 195 00:09:30.280 --> 00:09:33.460 So for some reason, because I'm leveraging some AI tools 196 00:09:33.460 --> 00:09:36.060 to build this, I would click Upload, 197 00:09:36.080 --> 00:09:38.720 and it would open this pop-up with a little button that 198 00:09:38.720 --> 00:09:39.520 says Choose File. 199 00:09:39.780 --> 00:09:42.200 This is a very simple thing, but it's 200 00:09:42.200 --> 00:09:44.300 you click Upload Audio, and then you 201 00:09:44.300 --> 00:09:46.660 would land on a new screen where it's asking for a title, 202 00:09:46.920 --> 00:09:48.160 it's asking for a speaker, and it's 203 00:09:48.160 --> 00:09:48.940 asking for a date recorded. 204 00:09:49.160 --> 00:09:50.760 And for some users, they're just not 205 00:09:50.760 --> 00:09:51.980 going to know what to do with that. 206 00:09:52.460 --> 00:09:54.580 And what actually happens is when you give it the audio, 207 00:09:55.000 --> 00:09:57.000 it creates the title from the file name. 208 00:09:57.020 --> 00:09:59.120 It creates the date recorded from when it was recorded. 209 00:09:59.580 --> 00:09:59.980 So 210 00:10:00.000 --> 00:10:02.840 So just by coming back to some breadboarding, 211 00:10:03.880 --> 00:10:05.600 I drew out, again, you kind of draw, 212 00:10:05.740 --> 00:10:07.100 like, OK, here's what it is right now. 213 00:10:07.400 --> 00:10:10.960 And as I'm just the act of me drawing out what it was today, 214 00:10:11.300 --> 00:10:13.400 I immediately said, why on earth am I 215 00:10:13.720 --> 00:10:17.900 like putting this modal before the file picker? 216 00:10:17.920 --> 00:10:20.800 So you would hit Upload File, and then it 217 00:10:20.800 --> 00:10:21.620 would bring up this modal. 218 00:10:22.000 --> 00:10:24.360 And then you'd have to hit Upload again, select the file, 219 00:10:24.420 --> 00:10:25.520 and you'd come back to the modal. 220 00:10:25.620 --> 00:10:27.380 And then you would fill out some stuff and then hit Submit. 221 00:10:27.380 --> 00:10:30.420 So it's a small change, but this is 222 00:10:30.420 --> 00:10:34.580 what makes the app feel very fast, is that I hit Upload, 223 00:10:34.660 --> 00:10:35.960 and I'm immediately choosing a file 224 00:10:35.960 --> 00:10:38.000 from my computer, which was much, much faster. 225 00:10:38.780 --> 00:10:40.760 Then after I've got the file, I then 226 00:10:40.760 --> 00:10:42.120 would see the modal, and then all the fields 227 00:10:42.120 --> 00:10:42.800 would be filled out. 228 00:10:43.040 --> 00:10:45.500 So simple little UX flow, but these things, 229 00:10:45.840 --> 00:10:48.260 it's a great example of how you don't want 230 00:10:48.260 --> 00:10:49.320 to trust the AI to build it. 231 00:10:49.640 --> 00:10:51.900 Because the first draft of this, I was like, 232 00:10:51.900 --> 00:10:52.580 this is pretty cool. 233 00:10:52.620 --> 00:10:53.200 It actually works. 234 00:10:53.280 --> 00:10:54.080 The file gets uploaded. 235 00:10:54.220 --> 00:10:55.620 I'm pretty happy with this. 236 00:10:55.620 --> 00:10:58.100 And the more I use it, it just felt off. 237 00:10:58.380 --> 00:10:59.960 And so I came back. 238 00:11:00.180 --> 00:11:01.300 I breadboarded what it was. 239 00:11:01.360 --> 00:11:03.340 And then I started moving things around. 240 00:11:03.840 --> 00:11:05.240 I did take some shortcuts. 241 00:11:05.840 --> 00:11:09.940 And I actually just, when I get stuck, 242 00:11:10.080 --> 00:11:11.600 you reach for some paper as well. 243 00:11:11.660 --> 00:11:14.840 So this is actually me drawing the exact flow out 244 00:11:14.840 --> 00:11:19.540 on some paper and just getting really just, I was like, 245 00:11:19.540 --> 00:11:21.100 why is it this to this, this? 246 00:11:21.240 --> 00:11:23.400 And I started to see it, and then I came back 247 00:11:23.400 --> 00:11:28.740 and pulled it into FigJam here and figured it out. 248 00:11:29.060 --> 00:11:30.620 And then the same thing of here is there's 249 00:11:30.700 --> 00:11:35.420 some logic where you would, when you were finished doing this, 250 00:11:35.440 --> 00:11:37.480 you would hit Save, and then you would just 251 00:11:37.580 --> 00:11:38.840 be staring at the dashboard. 252 00:11:38.960 --> 00:11:41.360 And then over here, it would say Processing, Processing 253 00:11:41.360 --> 00:11:42.140 on the left. 254 00:11:42.380 --> 00:11:45.380 And it was just a weird flow because it 255 00:11:45.380 --> 00:11:46.480 didn't look like it did anything, 256 00:11:46.540 --> 00:11:48.560 unless you saw the little processing animation 257 00:11:48.560 --> 00:11:49.100 over there. 258 00:11:49.580 --> 00:11:52.120 And so same thing, I said, hey, let's just 259 00:11:52.120 --> 00:11:55.200 take them right into the page and then 260 00:11:55.200 --> 00:11:56.820 have a processing screen there so it 261 00:11:56.820 --> 00:11:58.060 feels like something changed. 262 00:11:58.560 --> 00:12:01.020 Because it only took about 10 to 15 seconds most of the time 263 00:12:01.020 --> 00:12:02.060 to transcribe it. 264 00:12:02.720 --> 00:12:04.960 And then when it was ready, we could actually see that. 265 00:12:05.000 --> 00:12:06.220 And then you would see the sidebar and everything. 266 00:12:06.400 --> 00:12:09.900 So just much, much more improved user flow 267 00:12:09.900 --> 00:12:11.800 just by drawing a bunch of rectangles here, 268 00:12:12.200 --> 00:12:12.960 kind of seeing it. 269 00:12:13.000 --> 00:12:15.000 And you're like, well, it kind of becomes obvious. 270 00:12:15.140 --> 00:12:16.720 When you draw it out in this much detail, 271 00:12:17.900 --> 00:12:21.800 and I would say this much detail is kind of, to me, 272 00:12:21.800 --> 00:12:25.880 the right amount of detail to get to fix user flow stuff. 273 00:12:26.100 --> 00:12:28.740 It's not a wireframe, which is important. 274 00:12:28.860 --> 00:12:30.020 So OK, let's get back onto it. 275 00:12:30.260 --> 00:12:33.160 So breadboarding, I've kind of talked through all this. 276 00:12:33.220 --> 00:12:35.140 There's some more resources on that, shape up. 277 00:12:36.260 --> 00:12:41.540 And then here, we went into a task grid. 278 00:12:41.840 --> 00:12:44.040 So even on a personal project, it's 279 00:12:44.040 --> 00:12:46.640 very helpful to do a grid like this, 280 00:12:46.640 --> 00:12:49.120 where you've just got sections of the app 281 00:12:49.120 --> 00:12:50.380 that we knew had authentication. 282 00:12:50.380 --> 00:12:51.860 I had to do some setup stuff. 283 00:12:51.980 --> 00:12:53.640 There's setting up the transcription piece, 284 00:12:54.040 --> 00:12:56.240 the whole flow for the audio upload, 285 00:12:58.020 --> 00:13:00.240 transcript details of actually looking at the transcript, 286 00:13:01.640 --> 00:13:04.180 and then saving what we called snippets or highlights. 287 00:13:04.740 --> 00:13:05.840 Then there's still the landing page. 288 00:13:05.880 --> 00:13:07.500 So this piece is still being worked on. 289 00:13:07.820 --> 00:13:09.140 And it's just little things as you get through. 290 00:13:09.240 --> 00:13:11.380 It's like, oh, man, I've got to write a privacy policy, 291 00:13:12.640 --> 00:13:14.100 get any to get the copy approved. 292 00:13:14.160 --> 00:13:15.640 And there's some mockups that have to be exported. 293 00:13:15.780 --> 00:13:19.040 So I'm in the final kind of 10 hours of wrapping this thing 294 00:13:19.040 --> 00:13:19.260 up. 295 00:13:20.120 --> 00:13:23.100 And then billing had its own flow here 296 00:13:23.100 --> 00:13:25.420 of how I wanted it to work, where you would be able to 297 00:13:25.560 --> 00:13:27.740 upload a few uploads as a trial. 298 00:13:27.840 --> 00:13:29.660 And then it would prompt you after three 299 00:13:29.820 --> 00:13:31.580 to then upgrade to a premium. 300 00:13:32.340 --> 00:13:33.820 That was kind of the flow I came up with. 301 00:13:33.860 --> 00:13:35.860 And then I just stuck this thing here. 302 00:13:35.960 --> 00:13:38.940 We use this little tilde nomenclature 303 00:13:39.560 --> 00:13:42.460 to show things that we'll do one day. 304 00:13:43.860 --> 00:13:45.820 So you put this in front of that. 305 00:13:45.820 --> 00:13:49.020 It's kind of like a nice to have if we have time for it. 306 00:13:49.260 --> 00:13:50.300 It's like, hey, maybe. 307 00:13:50.820 --> 00:13:51.620 I think of it like a maybe. 308 00:13:51.840 --> 00:13:52.720 Maybe we'll do this. 309 00:13:53.400 --> 00:13:55.840 And so I threw in a bunch of little things here. 310 00:13:56.180 --> 00:13:58.200 Initially, I was like, I'm going to use storage for files. 311 00:13:58.580 --> 00:14:00.300 I want to be able to upload a photo 312 00:14:00.520 --> 00:14:03.440 and have it pull all the text out of the photo. 313 00:14:04.260 --> 00:14:05.220 All cool ideas. 314 00:14:05.500 --> 00:14:07.640 I just shoved it to the future. 315 00:14:07.780 --> 00:14:09.660 And that way, I kept my scope. 316 00:14:09.780 --> 00:14:11.920 And then if I ever want to do another part two to this, 317 00:14:12.440 --> 00:14:15.300 but from a business product launch thing, 318 00:14:15.300 --> 00:14:16.780 if you guys are launching side projects, 319 00:14:16.920 --> 00:14:19.320 which I hope you all are experimenting with projects, 320 00:14:20.840 --> 00:14:21.760 this is very helpful. 321 00:14:21.800 --> 00:14:26.020 Because I have to keep that same 50-hour time box limit. 322 00:14:26.720 --> 00:14:28.780 Because this is where these projects could just 323 00:14:28.780 --> 00:14:30.180 sit there for months and months and months. 324 00:14:31.240 --> 00:14:33.740 Because you just kind of keep adding as you see stuff. 325 00:14:33.780 --> 00:14:35.320 And you haven't actually made any money on it. 326 00:14:35.380 --> 00:14:37.260 You haven't actually validated the core idea yet. 327 00:14:37.520 --> 00:14:39.500 So you want to get it to where people can start paying you 328 00:14:39.500 --> 00:14:41.420 as fast as possible in the app. 329 00:14:41.480 --> 00:14:43.680 If the thing you're solving here, which is like, 330 00:14:43.680 --> 00:14:44.300 oh, I've got a problem. 331 00:14:44.360 --> 00:14:45.520 I've got all these audio files. 332 00:14:45.980 --> 00:14:47.580 And I need a way to kind of search them nicely 333 00:14:47.840 --> 00:14:49.040 in some sort of dashboard. 334 00:14:49.240 --> 00:14:50.780 That's sort of the problem we're solving. 335 00:14:51.520 --> 00:14:53.780 Everything else we can add on as we go. 336 00:14:55.920 --> 00:14:58.380 And then we ran into some quirky things here. 337 00:14:58.380 --> 00:14:59.620 You can see there's like, 338 00:15:00.000 --> 00:15:01.800 large uploads if they're over 80 megabytes, 339 00:15:01.920 --> 00:15:02.840 if they're over an hour, 340 00:15:03.280 --> 00:15:04.980 I ran into all kinds of like weird things. 341 00:15:05.020 --> 00:15:08.500 So right now I've just kind of scoped out like the long files 342 00:15:09.180 --> 00:15:10.540 because everything worked great 343 00:15:10.540 --> 00:15:11.780 with my little two minute test. 344 00:15:11.780 --> 00:15:13.080 And then I started putting in like, 345 00:15:13.180 --> 00:15:14.780 oh, what about like a 45 minute recording? 346 00:15:14.880 --> 00:15:16.860 What about something that's not compressed? 347 00:15:16.980 --> 00:15:20.700 Like what if I upload a 500 megabyte uncompressed wave file? 348 00:15:20.800 --> 00:15:21.740 Like what happens then? 349 00:15:22.700 --> 00:15:25.500 So lots of rabbit hole stuff here 350 00:15:25.500 --> 00:15:27.680 that can suck a lot of time. 351 00:15:27.680 --> 00:15:29.000 And so I kind of just, 352 00:15:29.100 --> 00:15:30.920 I'd say it's kind of a known thing 353 00:15:30.920 --> 00:15:32.060 I'm not gonna touch right now. 354 00:15:32.560 --> 00:15:33.940 So that's my task grid. 355 00:15:34.360 --> 00:15:35.120 And it helped me when, 356 00:15:35.380 --> 00:15:37.280 what's nice about the task grid is you kind of zoom out 357 00:15:37.380 --> 00:15:41.560 and you can quickly see that this is actually done as well. 358 00:15:41.680 --> 00:15:45.200 So we can mark like these big check mark things, 359 00:15:45.240 --> 00:15:46.760 that's done, this is done. 360 00:15:46.780 --> 00:15:48.420 And then there's two kind of things here 361 00:15:48.540 --> 00:15:49.600 that are in progress. 362 00:15:49.660 --> 00:15:51.820 So you can kind of quickly just see high level, 363 00:15:51.900 --> 00:15:53.280 like where's Bruce at with this project? 364 00:15:53.740 --> 00:15:54.680 Everybody who's watching this calls, 365 00:15:54.780 --> 00:15:55.960 like I've never shown anyone this, 366 00:15:56.060 --> 00:15:57.100 but you could look at this 367 00:15:57.100 --> 00:15:58.980 and kind of get a sense of where we're at 368 00:15:58.980 --> 00:16:00.020 and what's left to do. 369 00:16:00.940 --> 00:16:02.100 So it's just a nice thing. 370 00:16:02.580 --> 00:16:04.360 You can use whatever tool you want, 371 00:16:04.380 --> 00:16:04.980 you can put on paper, 372 00:16:05.160 --> 00:16:07.340 you can put on Asana, 373 00:16:07.500 --> 00:16:09.420 you can put it wherever you want, Notion. 374 00:16:09.780 --> 00:16:12.940 To me, I have not found a thing that fits my style here 375 00:16:12.940 --> 00:16:14.520 because it's just enough detail 376 00:16:15.040 --> 00:16:17.040 where sure I could have a lot of notes 377 00:16:17.040 --> 00:16:18.460 and things about each one of these. 378 00:16:19.380 --> 00:16:20.760 And so that's where it kind of breaks down. 379 00:16:20.880 --> 00:16:22.720 But for me doing a personal project 380 00:16:22.720 --> 00:16:24.200 where I'm the only developer on this 381 00:16:24.200 --> 00:16:25.900 and the only one decision maker, 382 00:16:25.900 --> 00:16:29.400 it was just enough to like note things that for my own, 383 00:16:30.040 --> 00:16:30.760 to keep things fresh. 384 00:16:31.640 --> 00:16:33.140 So that worked well. 385 00:16:33.700 --> 00:16:35.400 So a couple of rules on this, 386 00:16:35.560 --> 00:16:39.760 just make sure you're using like a verb title 387 00:16:40.840 --> 00:16:43.620 or starting with a verb like fix 388 00:16:44.400 --> 00:16:48.060 or create Google auth sign in. 389 00:16:48.720 --> 00:16:51.280 Try not to avoid like whole feature sets 390 00:16:51.280 --> 00:16:52.640 that are just like a bullet point. 391 00:16:53.060 --> 00:16:55.580 Try to break those into like simple action verbs 392 00:16:55.580 --> 00:16:57.920 so when you sit down, you can just start doing that. 393 00:16:58.060 --> 00:17:00.980 Okay, next, something I used here, 394 00:17:01.080 --> 00:17:03.620 which I highly recommend is Mark Lau, 395 00:17:04.140 --> 00:17:05.160 which you should all be following. 396 00:17:05.839 --> 00:17:06.980 I think he's down here. 397 00:17:07.040 --> 00:17:08.200 This guy, he's on X, 398 00:17:09.119 --> 00:17:10.980 kind of one of the main guys 399 00:17:10.980 --> 00:17:12.960 in the sort of indie hacker space. 400 00:17:13.920 --> 00:17:17.260 And so he has the template, which has Tailwind, 401 00:17:17.460 --> 00:17:19.480 it has Next.js, it has Stripe hooked up, 402 00:17:19.599 --> 00:17:21.740 it has Superbase hooked up, 403 00:17:21.760 --> 00:17:24.579 it has all the auth for Superbase. 404 00:17:24.579 --> 00:17:26.880 So when you open this project for the first time, 405 00:17:27.339 --> 00:17:31.080 you already have like kind of a dashboard, a landing page. 406 00:17:31.300 --> 00:17:32.460 It's pretty awesome. 407 00:17:33.440 --> 00:17:34.700 And so I bought this, 408 00:17:34.780 --> 00:17:37.280 you can use it for as many projects as you want, 409 00:17:38.040 --> 00:17:39.380 but highly recommend it. 410 00:17:39.380 --> 00:17:41.340 I mean, totally worth a couple hundred bucks 411 00:17:41.340 --> 00:17:45.380 because it saved me, I would say 20 hours maybe of stuff. 412 00:17:45.680 --> 00:17:48.200 And so he just ships a ton of these little features. 413 00:17:49.520 --> 00:17:51.460 And yeah, like I said, if you're not following him, 414 00:17:51.520 --> 00:17:52.380 go follow him on X 415 00:17:52.380 --> 00:17:54.380 because he essentially just make, 416 00:17:54.500 --> 00:17:57.160 he's a one man dev team 417 00:17:57.160 --> 00:17:58.960 that just creates all these little products 418 00:17:58.960 --> 00:18:02.320 and he shares what he's making for each one. 419 00:18:02.840 --> 00:18:05.780 And he's made like 20 or 25 projects 420 00:18:05.780 --> 00:18:08.480 and like three or four of them are like hitting well, 421 00:18:09.360 --> 00:18:11.160 but he's doing great. 422 00:18:11.240 --> 00:18:12.600 So he made this little template 423 00:18:12.600 --> 00:18:14.360 cause he kept making new little startups. 424 00:18:14.780 --> 00:18:15.900 So definitely check that out. 425 00:18:17.260 --> 00:18:18.700 Superbase, pretty obvious. 426 00:18:18.700 --> 00:18:22.820 We set up all the auth in here. 427 00:18:23.160 --> 00:18:26.080 And I did set up the MCP server for Claude 428 00:18:26.080 --> 00:18:29.400 to be able to manipulate Superbase. 429 00:18:29.480 --> 00:18:31.080 That's one of the like most powerful things 430 00:18:31.080 --> 00:18:34.160 about this workflow is that the Claude 431 00:18:34.160 --> 00:18:36.760 can actually talk to this and look up rules. 432 00:18:36.880 --> 00:18:39.040 And there's like in a row level security 433 00:18:39.040 --> 00:18:39.980 that has to be set. 434 00:18:40.060 --> 00:18:41.060 And sometimes we'd run into like, 435 00:18:41.140 --> 00:18:42.120 I try to upload a thing 436 00:18:42.120 --> 00:18:44.080 and it would not let you do certain things. 437 00:18:45.080 --> 00:18:47.600 And so very simple. 438 00:18:47.600 --> 00:18:49.480 Like we had the snippet idea, 439 00:18:50.280 --> 00:18:51.920 we added categories, users, words, 440 00:18:52.000 --> 00:18:54.180 and then it was like a relationship view there. 441 00:18:54.580 --> 00:18:56.980 So pretty simple setup. 442 00:18:57.540 --> 00:19:00.040 And then what else did we do here? 443 00:19:00.160 --> 00:19:01.320 Yeah, we do have Google auth. 444 00:19:01.440 --> 00:19:03.520 So when you're signing in, 445 00:19:04.460 --> 00:19:06.780 very simple, sign up with Google. 446 00:19:07.280 --> 00:19:08.300 It's one click. 447 00:19:08.360 --> 00:19:10.240 This was very quick to get set up. 448 00:19:11.200 --> 00:19:13.500 Didn't have any issues with this. 449 00:19:13.560 --> 00:19:15.500 And you can see here when I start a new account, 450 00:19:15.500 --> 00:19:18.100 you get these three free uploads 451 00:19:18.100 --> 00:19:22.140 and then it actually does prompt you to go to do that. 452 00:19:22.220 --> 00:19:23.120 Well, there's a great example. 453 00:19:23.280 --> 00:19:24.680 I think this is cause I have like seven 454 00:19:24.900 --> 00:19:26.520 Bruce Van Zales in there. 455 00:19:26.860 --> 00:19:28.440 But click upgrade premium, 456 00:19:28.660 --> 00:19:30.240 you're in the Stripe checkout flow 457 00:19:30.840 --> 00:19:32.300 that comes back, 458 00:19:32.300 --> 00:19:34.840 comes back, upgrades the user accounts, all that. 459 00:19:34.860 --> 00:19:36.180 So it's working pretty well 460 00:19:36.180 --> 00:19:38.460 where people can actually put a real credit card in. 461 00:19:39.240 --> 00:19:40.120 There we go. 462 00:19:40.380 --> 00:19:42.660 And then the Claude code piece, 463 00:19:43.600 --> 00:19:44.820 I won't get into this 464 00:19:44.820 --> 00:19:48.580 cause this could be a whole few hours on its own. 465 00:19:49.980 --> 00:19:51.540 But let me see here. 466 00:19:52.140 --> 00:19:52.380 Let's see. 467 00:19:54.560 --> 00:19:57.860 So I'll just show you quick my flow there. 468 00:19:57.860 --> 00:19:58.460 You can see it. 469 00:20:00.000 --> 00:20:02.400 I have like a little instructions. 470 00:20:02.760 --> 00:20:04.300 So I put all my dev notes in here. 471 00:20:04.640 --> 00:20:08.540 And you can see this kind of breakdown of all the details 472 00:20:10.460 --> 00:20:12.420 and just kind of some of the things that it works. 473 00:20:12.420 --> 00:20:15.020 I have it make notes about things as I go along. 474 00:20:15.780 --> 00:20:20.100 Some of the features had like a project requirement doc. 475 00:20:20.300 --> 00:20:23.120 I think the very first one I started, I did create this 476 00:20:23.720 --> 00:20:26.320 just to get that first version going to where it would have 477 00:20:26.320 --> 00:20:29.460 specific things of what fields we wanted in the tables 478 00:20:29.740 --> 00:20:31.260 and just got me kind of started. 479 00:20:32.680 --> 00:20:35.140 And the hardest thing, I think we just had something simple 480 00:20:35.140 --> 00:20:37.920 where you'd hit upload to give audio 481 00:20:37.920 --> 00:20:40.100 and then it would basically send it to Whisper, 482 00:20:41.020 --> 00:20:41.860 transcribe it and come back. 483 00:20:42.220 --> 00:20:45.820 That was like the first maybe block or like work session 484 00:20:45.820 --> 00:20:47.300 was getting it to do that. 485 00:20:47.660 --> 00:20:49.300 And then everything else has been kind of putting 486 00:20:49.300 --> 00:20:51.420 a workflow around those pieces. 487 00:20:52.760 --> 00:20:53.760 So very simple. 488 00:20:53.780 --> 00:20:55.720 I don't know if there's anything specific to show in here 489 00:20:55.720 --> 00:20:57.620 other than I've got the MCP stuff set up. 490 00:20:58.360 --> 00:21:01.280 I do use my workflow when I'm in here 491 00:21:01.620 --> 00:21:06.460 is actually to pull Cloud into the side here. 492 00:21:06.800 --> 00:21:09.020 And you do in VS Code, I switched back to VS Code. 493 00:21:09.160 --> 00:21:11.500 You can push this and there's this whole thing. 494 00:21:11.540 --> 00:21:12.920 I'm not sold on it just yet, 495 00:21:12.920 --> 00:21:15.820 but it's kind of like a prettier UI of Cloud Code. 496 00:21:17.460 --> 00:21:19.520 And they're trying to be a little bit more like cursor, 497 00:21:19.720 --> 00:21:22.560 but now I'm like, I always use cursor this way. 498 00:21:22.560 --> 00:21:25.940 And then I've been using the terminal so much lately 499 00:21:25.940 --> 00:21:27.700 that it actually feels weird to use this. 500 00:21:27.940 --> 00:21:29.320 So I typically have this 501 00:21:29.320 --> 00:21:31.800 and then I have my terminal runner here 502 00:21:31.800 --> 00:21:33.660 where I can run the app and see my error messages. 503 00:21:33.820 --> 00:21:35.740 And then I always use shift tab 504 00:21:35.740 --> 00:21:37.180 and I put it into plan mode. 505 00:21:37.340 --> 00:21:39.780 We chat, we figure out all the things about it. 506 00:21:39.780 --> 00:21:42.480 And then I just go into like auto approve 507 00:21:42.480 --> 00:21:45.840 once I've got the plan kind of built out. 508 00:21:46.080 --> 00:21:48.460 And we just work incrementally on these features. 509 00:21:49.260 --> 00:21:53.000 And then I would go, that'd be my whole flow. 510 00:21:53.080 --> 00:21:55.420 So let me replace this back with this guy. 511 00:21:57.420 --> 00:22:00.200 And so we'd execute it. 512 00:22:00.500 --> 00:22:02.520 Yeah, I'd highly recommend that. 513 00:22:02.680 --> 00:22:04.060 There's some other resources I'll link to. 514 00:22:04.380 --> 00:22:06.260 And then the key thing here when you're working with AI 515 00:22:06.260 --> 00:22:09.500 is to like push what I call like stable features. 516 00:22:10.300 --> 00:22:11.880 So I would work for a session. 517 00:22:12.040 --> 00:22:13.300 I kind of get it to a point where like, 518 00:22:13.340 --> 00:22:14.720 okay, I feel good about this feature. 519 00:22:14.720 --> 00:22:17.700 Then I would, what I did is I like, 520 00:22:17.780 --> 00:22:20.600 I committed little pieces of it to locally. 521 00:22:20.600 --> 00:22:23.460 And then I actually pushed that up to the main branch 522 00:22:23.460 --> 00:22:24.980 when I felt good about it. 523 00:22:24.980 --> 00:22:27.080 And I would make a note in my commit messages, 524 00:22:27.220 --> 00:22:28.840 like, okay, right here, we're at it. 525 00:22:28.840 --> 00:22:29.740 Like I put a little emoji. 526 00:22:30.280 --> 00:22:32.220 Hey, we're at a stable release right here. 527 00:22:32.580 --> 00:22:34.340 Then I wouldn't be able to remember that. 528 00:22:34.900 --> 00:22:39.500 Because for example, the whole rabbit hole with the upload, 529 00:22:39.560 --> 00:22:41.080 I spent about two or three hours session 530 00:22:41.220 --> 00:22:43.360 and we totally overhauled and refactored 531 00:22:43.360 --> 00:22:45.120 the entire upload piece. 532 00:22:45.700 --> 00:22:48.720 And it like kind of worked and it got way, way, way worse. 533 00:22:48.780 --> 00:22:50.280 Then it, and we just went into the spiral 534 00:22:50.280 --> 00:22:53.500 of two or three hours of pretty much wasted time. 535 00:22:54.020 --> 00:22:55.380 And I got to the end of that session. 536 00:22:55.380 --> 00:22:57.340 I was like, is this something I'm gonna like commit 537 00:22:57.340 --> 00:22:59.900 or did I like the version before I started all this? 538 00:22:59.920 --> 00:23:00.520 And I was like, you know what? 539 00:23:00.640 --> 00:23:02.320 I actually think the version before all this 540 00:23:02.460 --> 00:23:03.480 was more stable. 541 00:23:03.880 --> 00:23:06.620 And I just literally disregarded the three hours of work 542 00:23:06.680 --> 00:23:07.740 and didn't commit it. 543 00:23:07.740 --> 00:23:09.060 And I just came back, you know, 544 00:23:09.100 --> 00:23:10.420 I was left that whole feature off. 545 00:23:10.420 --> 00:23:15.320 So being a little bit more specific and, you know, 546 00:23:15.320 --> 00:23:17.940 controlling it with GitHub is the way to go. 547 00:23:17.980 --> 00:23:21.420 I push this to auto deploy to DigitalOcean. 548 00:23:22.180 --> 00:23:24.740 And so it's, you know, it's 12 bucks a month to do that. 549 00:23:24.840 --> 00:23:25.940 Very simple, easy to connect. 550 00:23:26.200 --> 00:23:28.180 And then it kind of manages all your deployments 551 00:23:28.180 --> 00:23:30.020 and I can roll things back very easily. 552 00:23:31.060 --> 00:23:32.560 We use this for all of our projects. 553 00:23:32.620 --> 00:23:34.680 So I'm pretty happy with it. 554 00:23:34.720 --> 00:23:35.840 And that's pretty much it. 555 00:23:35.840 --> 00:23:37.320 That's the whole workflow. 556 00:23:38.160 --> 00:23:40.180 I was gonna start adding a section eight here, 557 00:23:40.420 --> 00:23:43.520 which was just something that I used to, 558 00:23:44.140 --> 00:23:45.360 when we're doing these apps, 559 00:23:45.980 --> 00:23:47.440 if you're making any kind of app, 560 00:23:47.640 --> 00:23:50.620 like just be quick to share where you're at with, 561 00:23:51.260 --> 00:23:53.160 you know, with your progress and stuff. 562 00:23:53.240 --> 00:23:54.060 So jump on X. 563 00:23:54.960 --> 00:23:56.440 I could just, we'll show you this here 564 00:23:57.460 --> 00:23:59.780 where I went, made a little video. 565 00:23:59.980 --> 00:24:03.660 I use screen.studio, a little app to record this. 566 00:24:03.660 --> 00:24:06.320 And I made a little video that was very early, 567 00:24:06.320 --> 00:24:09.780 stages just kind of showing the process of it 568 00:24:09.780 --> 00:24:11.100 and how everything connects. 569 00:24:13.340 --> 00:24:16.440 And I kind of talked about the problem. 570 00:24:16.820 --> 00:24:18.680 And so just be quick to share things. 571 00:24:19.240 --> 00:24:20.900 You see, we've got like nine comments here. 572 00:24:21.360 --> 00:24:22.840 People are asking if they could test it out. 573 00:24:24.020 --> 00:24:26.280 And I had actually shared something 574 00:24:26.280 --> 00:24:28.020 about two years ago about this. 575 00:24:28.040 --> 00:24:30.540 So I already had a couple of people that were interested. 576 00:24:31.340 --> 00:24:32.480 So just be quick to share. 577 00:24:32.540 --> 00:24:34.780 As soon as you got a bit version, share stuff on X, 578 00:24:34.780 --> 00:24:37.660 share stuff on Facebook, wherever your friends are, 579 00:24:37.760 --> 00:24:38.900 where that audience is gonna be. 580 00:24:39.020 --> 00:24:41.620 And that's a great flow. 581 00:24:41.680 --> 00:24:44.780 So I wanna show you one other thing we did do for this. 582 00:24:45.860 --> 00:24:51.760 And we did have some design help with this 583 00:24:51.760 --> 00:24:53.000 to get some initial mock-ups. 584 00:24:53.980 --> 00:24:59.500 And I'll just say the UI is absolutely beautiful. 585 00:25:00.000 --> 00:25:02.780 I made the mistake of hiring a designer. 586 00:25:04.440 --> 00:25:07.240 And I'm not going to tag who helped us with this. 587 00:25:08.000 --> 00:25:12.520 But the problem when you just go straight to UI stuff, 588 00:25:12.640 --> 00:25:14.160 it's just a reference point. 589 00:25:14.720 --> 00:25:17.780 So we have a whole file here where 590 00:25:17.780 --> 00:25:19.780 you can go in and look at all the cool designs. 591 00:25:20.340 --> 00:25:22.460 And first off, we started the whole thing thinking 592 00:25:22.460 --> 00:25:24.200 we're going to do a mobile app only. 593 00:25:24.200 --> 00:25:26.660 So just right off the bat, it's kind of unusable. 594 00:25:28.100 --> 00:25:29.420 And so what ends up happening, you 595 00:25:29.420 --> 00:25:32.220 can kind of see the way I did design 596 00:25:32.220 --> 00:25:33.860 is like designer's worst nightmare 597 00:25:33.860 --> 00:25:37.100 is I literally had the Figma file open. 598 00:25:37.220 --> 00:25:38.880 And every now and again, I'd glance at it. 599 00:25:39.620 --> 00:25:40.860 It's like a suggestion. 600 00:25:42.300 --> 00:25:45.380 And so you can kind of see we did eventually. 601 00:25:45.840 --> 00:25:48.900 And then when we talked about making a web app, 602 00:25:52.100 --> 00:25:54.120 there's some miscommunication between me and the designer. 603 00:25:54.200 --> 00:25:56.100 And they thought we were making a web, 604 00:25:57.160 --> 00:25:59.380 like an app, so not a web app, like a desk. 605 00:25:59.440 --> 00:26:00.820 I said, hey, let's do desktop. 606 00:26:00.920 --> 00:26:02.260 And they thought desktop app. 607 00:26:02.940 --> 00:26:05.300 And so it was like, oh, that's not a big deal. 608 00:26:05.380 --> 00:26:06.280 It's still got a sidebar. 609 00:26:06.360 --> 00:26:07.180 Still got some things here. 610 00:26:07.200 --> 00:26:08.220 It's actually very different. 611 00:26:08.820 --> 00:26:12.600 This is quite different than how a web app would 612 00:26:12.600 --> 00:26:14.060 look versus an application. 613 00:26:14.220 --> 00:26:14.940 So we kind of went off. 614 00:26:15.080 --> 00:26:16.680 You can see the highlighting thing 615 00:26:17.140 --> 00:26:20.620 and the idea of having some sort of play button at the bottom 616 00:26:20.620 --> 00:26:21.100 is there. 617 00:26:21.400 --> 00:26:23.100 Mine actually ended up being a little cooler 618 00:26:23.100 --> 00:26:26.320 because I added the waveforms and I made it more colorful. 619 00:26:27.260 --> 00:26:29.820 And so these things sort of evolved as to what actually 620 00:26:29.820 --> 00:26:30.180 happened. 621 00:26:30.340 --> 00:26:31.960 And there's a bunch of screens here 622 00:26:31.960 --> 00:26:33.280 that just never got designed. 623 00:26:33.820 --> 00:26:35.580 Mainly the whole mobile app got put on pause. 624 00:26:36.000 --> 00:26:39.680 And then there was all kinds of UIs for settings 625 00:26:41.260 --> 00:26:43.840 and tagging new categories and stuff. 626 00:26:43.900 --> 00:26:45.060 So none of that got used. 627 00:26:46.240 --> 00:26:47.440 Really simplified it all. 628 00:26:47.900 --> 00:26:51.900 And then we did, at one point, do a quick redesign. 629 00:26:51.900 --> 00:26:55.740 And so I started pulling things in and sort of taking 630 00:26:55.800 --> 00:26:57.180 screenshots of what I had. 631 00:26:57.560 --> 00:27:00.060 And I would just use this to quickly mock up quick ideas 632 00:27:00.060 --> 00:27:03.700 because I was having trouble with some of the UI stuff. 633 00:27:04.000 --> 00:27:06.860 But there's these beautifully created designs here. 634 00:27:06.860 --> 00:27:09.040 And then these designs got pixel perfect match 635 00:27:09.040 --> 00:27:10.000 to what happened. 636 00:27:10.140 --> 00:27:10.860 It was not that at all. 637 00:27:11.140 --> 00:27:13.940 If anything, it was a little bit of, hey, conceptually, 638 00:27:14.060 --> 00:27:16.800 here's what an app could look like kind of got me inspired. 639 00:27:17.460 --> 00:27:19.660 And then we didn't use any of this. 640 00:27:19.780 --> 00:27:21.320 I would not have done this. 641 00:27:21.320 --> 00:27:24.520 This was not worth the money to do this. 642 00:27:24.600 --> 00:27:26.020 This was not the thing holding me back. 643 00:27:26.120 --> 00:27:28.460 And for most people who are like, oh, I need the designer 644 00:27:28.460 --> 00:27:30.580 because I'm only a developer, no. 645 00:27:31.720 --> 00:27:35.660 Your Claude designer is going to get it to where it's usable. 646 00:27:35.700 --> 00:27:37.520 It's not going to be winning design awards. 647 00:27:37.600 --> 00:27:39.900 But it is going to be usable and make it user friendly. 648 00:27:42.480 --> 00:27:44.500 And it's definitely good enough to get going. 649 00:27:44.960 --> 00:27:47.540 And then you can, it's better to have, I'll say this, 650 00:27:47.540 --> 00:27:49.760 it's better to have a well thought out, 651 00:27:49.760 --> 00:27:52.640 breadboarded app than to have a beautiful UI 652 00:27:52.640 --> 00:27:55.240 that's getting hundreds of thousands of impressions. 653 00:27:55.560 --> 00:27:59.220 Because ironically, our designers, who's great, 654 00:27:59.280 --> 00:28:03.460 very talented, I couldn't design what he did myself. 655 00:28:03.680 --> 00:28:07.020 But they did get hundreds of thousands of impressions on X 656 00:28:07.020 --> 00:28:08.240 and they shared our designs. 657 00:28:08.400 --> 00:28:11.480 And those designs didn't actually physically work 658 00:28:11.500 --> 00:28:12.560 with the flow. 659 00:28:12.720 --> 00:28:14.380 It was beautiful. 660 00:28:14.820 --> 00:28:17.300 And that's just a great example of how it was extremely 661 00:28:17.300 --> 00:28:18.460 popular on social media. 662 00:28:18.460 --> 00:28:20.600 But when it came to actually using the app, 663 00:28:20.740 --> 00:28:22.800 it didn't actually work for the flow 664 00:28:23.060 --> 00:28:25.060 and for the type of app we were trying to build. 665 00:28:25.200 --> 00:28:28.540 So there was this kind of like, it was like the concept car 666 00:28:28.600 --> 00:28:30.980 where you put out a concept car 667 00:28:32.040 --> 00:28:34.040 and that concept car never gets built, 668 00:28:34.100 --> 00:28:35.860 but it's cool because it stretches you 669 00:28:35.860 --> 00:28:37.600 and it kind of gets you thinking a certain way 670 00:28:37.860 --> 00:28:38.920 about the concept. 671 00:28:39.140 --> 00:28:40.960 And then we went and actually built the real thing. 672 00:28:42.120 --> 00:28:45.760 So just to get off my soapbox about designers and stuff, 673 00:28:45.760 --> 00:28:47.980 because I know a lot of people, if you go on X, 674 00:28:47.980 --> 00:28:52.440 the designers are the ones that get all the excitement on X. 675 00:28:52.440 --> 00:28:53.160 It's so visual. 676 00:28:53.920 --> 00:28:56.560 So rather have something work and be fun and easy to use 677 00:28:56.560 --> 00:28:58.100 that people pay for, that's actually 678 00:28:58.100 --> 00:28:59.960 what's going to make a successful project. 679 00:29:00.060 --> 00:29:01.180 So that's my whole workflow. 680 00:29:01.840 --> 00:29:03.260 And we'll pause for a second. 681 00:29:03.420 --> 00:29:05.020 I'll just say, I don't know if our team has questions. 682 00:29:05.080 --> 00:29:06.040 You can drop them in there. 683 00:29:06.500 --> 00:29:08.740 I can bring you guys on, or we can go ahead and end this. 684 00:29:10.100 --> 00:29:12.720 I'll give you guys a really good, yeah. 685 00:29:14.460 --> 00:29:15.260 OK, sweet. 686 00:29:15.520 --> 00:29:16.340 So that's it. 687 00:29:16.340 --> 00:29:18.540 If you guys got questions, if you are interested 688 00:29:18.540 --> 00:29:21.000 in learning more, go check out our channel and our website. 689 00:29:21.160 --> 00:29:22.820 We got more content resources. 690 00:29:23.180 --> 00:29:24.660 And if you're interested in working with us, 691 00:29:24.680 --> 00:29:25.780 hit the link, there's in a description, 692 00:29:25.940 --> 00:29:27.480 we have a link to apply. 693 00:29:27.620 --> 00:29:29.160 If you guys want to join our team 694 00:29:29.160 --> 00:29:31.560 and help us build cool things using ShapeUp, 695 00:29:32.100 --> 00:29:35.920 using AI and just, yeah, just building some 696 00:29:35.920 --> 00:29:37.140 and shipping some awesome products. 697 00:29:37.360 --> 00:29:38.740 So see you guys on the next one.