Here's the cleaned-up transcript:

[Mike] (0:03 - 0:06) Hi everybody. Hi everyone.

[Sean] (0:07 - 0:07) Hey.

[Mike] (0:08 - 0:22) It's the website 101 podcast Lunch Bytes. This is the live YouTube thing we do every first and third Wednesday of the month at 1130 a.m. Eastern Time. I'm Mike Mella, one of your co-hosts here.

That's Amanda Lutz. Hi Amanda, how you doing?

[Amanda] (0:22 - 0:24) Hey everyone, how are you?

[Mike] (0:24 - 0:27) And Sean Smith is here just in the nick of time. Sean.

[Sean] (0:27 - 0:29) Hey, how are you guys doing?

[Mike] (0:29 - 0:36) Doing good. I gather you were preparing for something for the show right now. Is that correct?

[Sean] (0:37 - 1:43) Yes, I am. I was inspired to create my own phone app using AI to help me out with that. And so basically I want to just demo what I got done in just over a weekend.

So I spent a day and a half on the weekend on it. And then this morning I made some changes and restructured stuff. It took me an hour, but it's much better now.

So when I was preparing for this, I was trying to figure out how to share my phone on Riverside. And the best way that I was able to find in my limited time is to share my phone to my computer and then use my mouse to control the app. So I can do that.

It's a looks and operates so much more smoothly on a phone. It's like a real app. So don't judge the jankiness or how quickly transitions happen based on what you're seeing here.

It's probably latency issues between my phone and the computer. So I'll share my screen.

[Amanda] (1:43 - 1:59) Before you share your screen, why don't you give us a little bit of a background about why you wanted to go through this process, how you came up with the app idea, how you plan on actually using it?

[Sean] (2:00 - 2:21) Oh, yeah. So it was just originally it was a way for me to keep track of locations that I want to visit again for photography. So maybe I want to go to this place for a sunset and I want to make some notes about what time of year to go because the sun, you know, the sun moves position across the sky depending on when you are.

[Mike] (2:22 - 2:25) So you are an amateur photographer, first of all, for people who don't know.

[Sean] (2:26 - 3:48) We mentioned that on the on the podcast. People may be new people. Yeah.

Oh, yeah. There could be new listeners or maybe they didn't remember, you know, and then other locations. Maybe I find a location, but the weather isn't what I want it to be.

So I can make a note, hey, come back on this day and I'm going to have all these, I'm going to have this saved where I want it. And I guess I could do something like Google Maps and some custom sort of thing. But I also looked at it as an opportunity for me to really figure out how much I can do with AI.

And for the record, I installed Cloud Pro. So I used Cloud Pro on the terminal and gave it some commands and prompts. And one thing I found is that as I was building it, there was a lot of inconsistency in things.

And I had to repeatedly tell Cloud, use reusable components where possible, because it likes to redo things from scratch. So I told it to save a memory. And now when I do something, it's going to remember to use reusable components and things like that.

And I'll give you an example when I show it up of one that comes to mind. So anything else? Yeah.

[Mike] (3:48 - 4:32) If I can just jump in real quick, what you were saying just there about Cloud Code remembering things and not remembering things, it's good practice to type slash init every time you're using Cloud Code, because that will, I'm not telling you, I'm telling the viewer and the where Cloud will remember the details about your project. And you can even get it to continually update that file as you make changes so that it knows you're using Tailwind, you're using Craft in this project, whatever it is, it'll keep a track of it. Next time you go in and ask it to make a change, it will look at that file first and go, oh yeah, this is what we're working with here.

So that's kind of what you're alluding to there.

[Sean] (4:32 - 5:17) Yeah, absolutely. And then you can tell it specifically, hey, remember this, and then it'll specifically update that. Before I share, I just had a little brain fart.

At the beginning, before I did any coding, I entered plan mode and I talked with Cloud for about 20 minutes planning out what I wanted to do with the app. And it wrote out a plan document that I approved and made changes to over time, including completely removing one of the features because I decided I no longer wanted it. It just didn't match with what I was actually doing.

My goal evolved over time as I learned things and played with it on the phone. So if we're ready, I will share.

[Mike] (5:18 - 5:19) Let's do it. Okay.

[Sean] (5:19 - 5:21) All right. And share.

[Mike] (5:22 - 5:34) So for anyone listening to this, we'll probably publish this on our audio feed. So obviously, this would be better to jump over to YouTube when you get a chance and watch the video of this and you'll see Sean's demo. But we'll try to talk you through it.

[Sean] (5:34 - 6:27) All right. So this is the opening screen here. And you can see I've added a few pins.

And if you click a pin, it highlights the title of the pin with a background color. And then I have an edit screen. So I click that.

And I could update the text here. I could add a photo or from my gallery, which I'm not going to open up because there's stuff on there that I don't want to share. And my camera, I don't know if that's going to work remotely while I'm connected like this.

But trust me, it does work. I'll show you a pin where it's attached already. And so these are groups.

And this group is assigned to sites of Toronto. This is all testing data. And let's say I want to add, there is no restaurant here, but let's just add it to the restaurants.

[Mike] (6:27 - 6:32) So these are like categories of the photos that you're taking in this location?

[Sean] (6:32 - 6:45) Yeah. And now there is a favorite here. And that basically sets the primary category.

So right now it's set to restaurants. And if I save this, the pin changed color. Sort of the highlight color.

[Mike] (6:46 - 6:48) Because it's matching the category you picked, the group you picked?

[Sean] (6:49 - 6:57) Because it's the favorite. Now if I change it to blue, set blue as the primary category and save it. There you go.

[Mike] (6:57 - 6:57) Yeah.

[Sean] (6:57 - 7:11) Got it. So you can have, it'll just default to whatever color the category is if there's only one, but you have an option to choose the primary category. So that's the color you want it to display on this view.

[Mike] (7:12 - 7:12) Right.

[Sean] (7:12 - 7:22) And I can go to list view and we can see here that, oh, see, there's pictures of my cat. There's a picture of the CN Tower. We open that up.

[Mike] (7:23 - 7:28) Oops. So the list, what's the list showing exactly? Is it photos you took?

[Sean] (7:29 - 7:32) Oh, the list view is all the pins.

[Amanda] (7:33 - 7:35) All the locations he's pinned.

[Sean] (7:35 - 7:43) Yeah. So if I close this, how did I close this? Go back to map.

[Mike] (7:43 - 7:46) There is a top left, there's an arrow. Maybe that would take you back.

[Sean] (7:47 - 7:49) Yeah. Okay. It's because it's not my...

[Mike] (7:50 - 7:55) Oh, maybe not. Sorry. That was my bad.

No, no. That's fine. We're back in the app.

Here we go.

[Sean] (7:55 - 7:59) I didn't have these problems on the actual app. It's the connection, right?

[Mike] (7:59 - 7:59) Yeah.

[Sean] (7:59 - 8:16) So here, if I zoom in, you can see here, I can't zoom out again, but there's a whole bunch of pins further down, like downtown area. Oops. Going the wrong direction.

[Mike] (8:17 - 8:19) Haven't been to Pickering yet to take photos.

[Sean] (8:23 - 8:52) Yeah. So you can see there's pins down here. Now, actually on the phone, I can use my fingers and zoom in or zoom out, but I just can't do it with the computer, right?

So the list view just shows pins everywhere. And I'm going to go back to list view, and I'm going to open up filters. So I could search, or I can filter by group.

So let's say I want to see all the pins of my cat.

[Mike] (8:52 - 8:53) Oh, very nice.

[Sean] (8:54 - 8:59) Okay. And shots of dawn meal has nothing to do with my cat. It's just a shopping mall.

[Mike] (9:00 - 9:00) Yeah.

[Sean] (9:00 - 9:30) These are just dummy content, right? And then when you've got an active filter, there's an indicator here. And if I go switch to map view, the filters stay.

Cool. So this is all really cool. And then there's a settings tab.

I open this up, and this is where you can add new groups. You can delete groups or edit them. So let's say I want to change cat to, say, kitty cat.

[Mike] (9:30 - 9:32) Nice editing functionality. That's cool.

[Sean] (9:34 - 9:59) And save it. I want to change the color. Okay.

So now it's going to be violet. And these color swatches are tailwind colors 100 and 300. So I'll explain where the 100 and 300 are used in a second here.

Let's go back. So the 300 is used on the pin, and the 100 is used as the background color.

[Mike] (10:00 - 10:00) Yeah.

[Sean] (10:01 - 10:21) Cool. And I had spent some time trying to pick, like, five or six colors myself, and I could never get a set that looked cohesive. And then I had the little idea, like, why would I do it myself when Tailwind puts so much time in to make a cohesive set?

Boom. Done. Solved.

[Amanda] (10:22 - 10:25) I've asked AI to do that for me before.

[Sean] (10:26 - 12:09) Oh, yeah. I was thinking about that, but Tailwind was faster, and I didn't have to describe exactly what I wanted. So.

And, you know, I can reorder. So, like, let's say I want to create a new group, and we'll just call it FruBar, because, hey, we're programmers. Add.

And then it creates it with no color, and I'll just add orange. Boom. Done.

And danger zone. I can delete all pins and photos. Delete all and reset.

So I'm going to do that. Reset everything. And it's all gone.

And then I will import a backup. And this is all on my phone. I did a backup, like, ten minutes ago.

So use this folder. Allow. Replace all.

And everything's back. And there's an option there that if I had added things before I did the backup, or before I added the backup, that it would either replace them or merge. So, I mean, it's, I think it's, like, fully featured.

It does, like, everything that I want. And it took me a couple of days. Like, this is just amazing what you can do.

And I think it might take a little bit longer for somebody who's unfamiliar with programming, or you might have some more visual inconsistencies, because you don't need to tell it, you don't know to tell it to use reusable components or other things like that. Mm-hmm. So, yeah, there's my app in ten minutes that just took me a couple of days to build.

[Mike] (12:10 - 12:13) So I, sorry, you go ahead, Amanda. I see you want to talk.

[Amanda] (12:13 - 12:16) I have so many questions.

[Mike] (12:16 - 12:17) Yeah, I do too.

[Amanda] (12:17 - 12:17) But you can go first.

[Mike] (12:18 - 12:19) Oh, okay. I just have a couple.

[Amanda] (12:19 - 12:21) I hope I can answer Amanda's questions when it's her turn.

[Mike] (12:22 - 12:52) I just got a couple of them. So, well, basically, I'd like to know what, just for our listeners and viewers, you know, knowledge here, what, I'd like you to tell us a little bit about the process you went through to make this in communicating with AI. Like, I noticed you have the danger zone area there, the importing and stuff.

Like, I'm curious to know how you implemented that. Did you say to the AI, look, I want you to say this is a danger zone area when I click this button, or how did that go? Yes.

[Sean] (12:52 - 13:07) That was all me, because there was another app I used to use that had danger zone, and it was for deleting and resetting content. And I thought that was a clever way to- I think GitHub.com does that too.

[Amanda] (13:07 - 13:13) It does? GitHub.com, they call it the danger zone, if you're going to delete a repo. It's a common phrase, Mike.

[Mike] (13:14 - 13:23) I would have thought you would have known that. No, I'm aware. I'm just wondering if he told AI to do it, or if AI just said, this is typically what this is I'm going to put in danger zone.

[Sean] (13:24 - 14:29) There were times where I asked it, hey, what is the best practice for things like that? And then I'd also be asking, hey, I'm thinking about doing this. Is this feasible?

What are aspects that I haven't thought about? You know, like, help me out. Basically, I'm asking it to sit there and brainstorm with me.

And that helped a lot. One area that I had trouble with is that AI would randomly pick these fugly as hell icons that just drove me nuts. And they were completely inconsistent in all color.

I just let that go for a while until I was at a point where I was satisfied with the build. And then I picked icons online that I thought, for the most part, were consistent. And I wanted black and gray.

So like you can see here, map is black because it's active. And if I reset the filters, it goes back to gray to show that it's not active. So yeah, next question.

[Mike] (14:30 - 14:32) I'm good. Amanda, jump in.

[Amanda] (14:32 - 14:57) Okay. I have so many questions. So Sean, you are generally full of knowledge and information and very verbose.

Cut that shit out. I want to have like small, short, concise answers because I want to get through everything that's coming into my mind. It's going to be like a lightning round and then something we can go back to and expand on after maybe.

[Sean] (14:57 - 15:00) All right, cool. You're talking to me like I talk to AI. Give me concise answers.

[Amanda] (15:01 - 15:28) I'm starting to learn to give the proper prompts. Okay. In no specific order, now that you have this working app that you were working on on your machine, would you be able to like open the files and now see the code that created this?

Yes. Would you understand anything? Have you tried that?

Do you understand anything that's happening in there?

[Sean] (15:29 - 15:51) No, I 100% AI coded this. No, I know. But if you opened the code and looked at it, if you have, did you understand anything?

Yeah, I would probably be able to figure it out to a point and I would need some assistance because it is in React Native, which is not my strong suit at all. Okay, again, lightning round. I was being concise and stopping.

[Mike] (15:53 - 15:54) So it's in React. I was going to ask that too.

[Amanda] (15:55 - 16:01) So yeah, that was going to be one of my questions too. React Native. So that's cool.

You can definitely do that. So if you... Go.

[Sean] (16:02 - 16:03) No, no, go ahead.

[Amanda] (16:04 - 16:12) If you, in the future, no longer use cloud code, do you think it would be portable to whatever new AI you're using if you were going to continue doing it?

[Sean] (16:13 - 16:21) As far as I understand how AI works, yes. I would just have to ask the new AI to review the...

[Amanda] (16:21 - 16:21) Read it.

[Sean] (16:22 - 16:33) Yeah. And then they probably, I don't know for sure, but probably can read like the cloud files and convert it to their own or something. I'm sure there's a way to do that.

Don't know for a fact.

[Amanda] (16:34 - 16:41) Okay. Did you pick React Native or did cloud code pick React Native when you told it you were going to make a mobile app?

[Sean] (16:41 - 17:07) Okay, during the planning that I mentioned earlier, I asked it to present a number of different technology options and which one it recommended. And then I looked at it and I can't remember which one it recommended, but the final decision was React. Okay.

I did specify that I wanted all styling done with Tailwind because I know that would make it easy for me to update in the future.

[Amanda] (17:08 - 17:28) Okay, cool. Because I've never used cloud code, all of it was done with the terminal? Yep.

That's interesting. I might like to see that at another time. Obviously not making something this advanced, but one of you with the experience, it might be kind of cool to see how that actually works.

[Sean] (17:28 - 17:33) I would be happy to just do something with you on screen share.

[Amanda] (17:33 - 17:43) So then once you've got all of the files that are doing the React Native, what did you use to build it into a mobile app?

[Sean] (17:45 - 17:58) All right, so we're using something called EAS and it connects to a third-party server that does, as far as I can tell, iOS and Android and other kinds of builds.

[Amanda] (17:59 - 18:00) Is it kind of like PhoneGap?

[Sean] (18:02 - 19:32) I don't know what PhoneGap is. Okay. Just slightly longer than you want, but I'm still going to try and keep it super brief.

Go for it. All right, so we use the service and originally I had to sign up and I did the builds, sorry, Claude gave me a command that compacted everything, sent it to the third-party service, and it would build it there. And then I noticed that my free plan, I was running out of builds.

And it's like not monthly builds, it's 15 builds and you're done. So then I came back to, well, they got to make money, right? And then I came back to Claude and I said, listen, I'm running out of builds, but I'm almost happy where I am.

I just, what am I going to do in the future? And I said, I don't want to spend money. This is a personal app.

I'm not making money. And so he gave me a couple options and I ended up going with GitHub Actions. And so Claude wrote out a GitHub workflow document and it took a number of trial and errors because there were some issues that were causing the build to fail, but we got it working and now it's just going to work unless we add new steps to it.

So it's built with GitHub Actions and it creates a .apk file, which is the Android app file extension. And I just download that and I sideload it on my phone. Okay.

[Amanda] (19:34 - 19:40) So every time you wanted to test it, did you have to rebuild it or did Claude Code also recommend some emulator?

[Sean] (19:40 - 20:46) There, you could do an emulator, but it's a simpler for just, you know, a private app is you will create a dev build. And so I run the build once and it's a dev build and the dev build file is much larger, but it will, when I install my phone and I run the local server, it connects to my phone VS Code and does hot reloading. So, but you, so then you're still doing testing on your phone.

Yeah, and I'm testing it on my phone and the dev build works until I add new native code or like new native NPM files or something. And then I need to, I don't know exactly what causes it, but I need to do it once in a while. I will need to do a rebuild of the dev APK and then it'll work again.

So right now on my phone, I'm using an APK that I made yesterday and it worked today over whatever I was doing.

[Amanda] (20:47 - 21:08) Yeah. Well, I mean, it makes sense that you would need to like stop and restart the service. Like you said, whenever you install a new node module and it adds that to the package.json file, like what's running is running at that moment. So if you add new stuff to the package.json, you would need to like stop it and then restart it. So it has all of the new node information, all the new module information.

[Sean] (21:08 - 21:08) Yeah.

[Amanda] (21:09 - 21:16) That's how many, how many node modules are in your package.json file? Have you looked?

[Sean] (21:17 - 21:18) No, I did not look.

[Amanda] (21:18 - 21:20) All right. I was, I was just curious.

[Sean] (21:20 - 21:23) I've actually never looked, not even when I'm building like a...

[Mike] (21:23 - 21:37) I'm going to guess 210. Jesus Christ. Wild guess.

I know because I, well, I'll get to this after, but I, anyway. Yeah.

[Sean] (21:38 - 21:49) Okay. Node mod. Okay.

My computer's hanging. Node modules. Open that folder.

It says there's 450 folders. Okay.

[Amanda] (21:49 - 22:04) Yeah, but folders, folders doesn't matter. No. No, but because the thing is, so when I teach at Seneca and we use this module called light server to like run this local development environment, it's just one module that we're installing.

[Sean] (22:05 - 22:06) But it's not like dependencies.

[Amanda] (22:07 - 22:10) Yeah. Like how many dependencies and dev dependencies and things like that.

[Sean] (22:10 - 22:12) Okay. So let me see here. It's not that many.

[Amanda] (22:12 - 22:20) Anyway, light server has over 4,000 files in, in many, many different folders. It's not bad.

[Sean] (22:20 - 22:29) Okay. All right. I don't even have to scroll the package.json file. So I misunderstood what you were asking.

[Amanda] (22:29 - 22:35) Sorry. I guess I said it in a weird way. Are they all dependencies or are there some separate dev dependencies?

[Sean] (22:37 - 22:47) There's actually one of the dependencies we don't need anymore. I know that I can remove it myself. But there's two dev dependent, three dev dependencies.

Types React, Tailwind CSS and TypeScript.

[Amanda] (22:48 - 22:53) Cool. All right. I think that's, I think that's all my lightning round questions.

Thank you.

[Mike] (22:54 - 23:01) So Sean, I know you're not a vibe coder. You're an actual web developer.

[Sean] (23:01 - 23:02) Actually, this was all vibe coding.

[Mike] (23:02 - 23:22) Well, this is what, this is what I'm getting at is that for our viewers, who, like, what kind of advice do you have in terms of maybe things you've run into that like, oh, I wish I knew that. I wouldn't have done that thing. Is there anything like that, that you've learned in the course of working with AI to build this app that you should, you'd like to advise people on?

[Sean] (23:23 - 24:36) Specific, being very explicit with your instructions is much better than vague. If you're unsure about something, tell it, look, we're not updating anything. I want to discuss the project.

And you can go through planning. That's, and again, I only spent like three days doing this, so I don't have a lot of experience, but that's what I learned to get over the hump of some issues. One thing that is going to be helpful for me and anybody else in the future is when I started building it, I just let AI choose the development version or whatever, the Android SDK, and we went through, we built it, and I said, okay, I want to test a production build, and it kept failing on my phone.

And so I had to ask it, and it's like, oh, we're using, like, the latest beta release or something on SDK. So I said, why are you doing that? Latest stable.

As soon as we changed the latest stable and rebuilt, it worked. So yeah, when you're doing something like this, ask it to use stable releases only.

[Mike] (24:37 - 24:38) Nice. That's good advice.

[Sean] (24:39 - 24:43) That's good advice, yeah. Because I wasted two hours on that.

[Mike] (24:43 - 24:52) Yeah. So you have a lot of, well, you're in a community of other photographers and that kind of thing. Any plans to monetize this app?

[Sean] (24:53 - 25:47) It's something I got in the back of my head that I might do after I show it to a few friends and see their reaction, and I was also running in my mind that, you know what, the name of the app is called Location Scout. And so it's not just about photography, but I was thinking, oh, you know, I'm planning on going to Prague for vacation in the fall, and I was thinking that, hey, man, I could just, like, make a group for Prague and scout all the locations that I want to sightsee as well as photo. And my wife is interested in potentially using it for golf because she wants to, like, leave notes about the different holes on the courses that she regularly visits.

So it's got actually a fair amount of uses outside of my intended use.

[Amanda] (25:47 - 25:48) And I'm sure there are other ones.

[Sean] (25:49 - 25:56) I have a feature request for you. You're not even using it, but okay. So I have a whole plan list of it.

[Amanda] (25:57 - 26:18) Literally everything about it, but maybe also have, like, the idea of albums so that your photography album would be different than your Prague vacation album would be different than if you also did golfing would be. And so then that way, you're only looking at the data that you want to see. And then you would still have, like, this album would have these groups and this album would have these different groups.

[Sean] (26:18 - 26:32) Oh, so like nested groups. Yeah, that's on the future plan. Awesome.

Yeah. So, yeah. And you can kind of already do that with filters.

So like, oh, I want to see restaurants, and it's only going to show me the restaurants.

[Mike] (26:33 - 26:45) Yeah. But I think Amanda's meaning, like, you might have restaurants that you visit in Toronto, but you have restaurants in Prague as well. They don't need to show up altogether if you're not in Prague sort of thing, right?

You could separate them that way.

[Sean] (26:45 - 26:59) Yeah, I agree. That is definitely something I want to add later. But at this point, I think it's fully featured.

Like, it kind of covers, like, all the basics. And then there's advanced stuff like that, which I am definitely going to add.

[Mike] (27:00 - 27:00) Yeah.

[Amanda] (27:01 - 27:01) Cool.

[Mike] (27:01 - 27:06) Nice. Well, that's really great. That's very impressive.

I'm glad it worked out.

[Sean] (27:06 - 27:10) Good job. Yeah, I'm so happy with this thing.

[Mike] (27:11 - 27:37) That's cool. I used AI recently to build a time tracking app on my computer that detects when I've been idle for two minutes and pops up and says, hey, you're not doing anything. Should I turn off the time tracker?

Or when I come back, it'll say, hey, you've returned to your computer. Do you want me to start tracking? It does all that kind of stuff.

So maybe I'll, if I can figure out a way to demo it without revealing a bunch of stuff on my computer, maybe I'll do that sometime later.

[Sean] (27:37 - 27:41) But I would love to see it, even if we do, like, a private demo.

[Mike] (27:42 - 27:47) Yeah, yeah, absolutely. But it'd be nice to share it on this thing. You know, people can learn from it.

[Amanda] (27:49 - 27:51) Hate to cut it short, but friends, I got to go.

[Mike] (27:52 - 27:58) That's all right. We're a couple of minutes pretty much there. So thank you, everybody, for watching, listening.

[Amanda] (27:58 - 27:59) Good job, Sean.

[Mike] (27:59 - 28:00) We'll see you next time. Yeah. Thanks, everyone.