How I built an app from scratch with AI: Session I

本站添加: 2026-06-01

[00:00:08]All right. Well, welcome. I am Scott Johnson. I have a history in cyber security, product management, and entrepreneurial entrepreneurship.

[00:00:18]And uh I am here to do a series of recordings. I don't know how many these will be, but I've been on a journey for an idea that I've had for an application for some time and uh I'm nearing the end of releasing that application as a mobile app. So that journey is that part of the journey is getting really close and it's been an amazing uh experience and uh so I wanted to really document it. I was talking to one of my friends who's also in product management and we were just talking about the process and the agility and how how I went about it and the learning and so this is just part of that effort. I'm going to riff it. I don't have a script. Uh I'm not doing bunch of fancy graphics and things like that. I'm in my home office with my stuff and uh we're just going to go for it. We're recording it. I'm using uh something called OBS and then we'll move that over to Cap Cut and then at the time you're watching this it'll probably be on YouTube. So that's sort of the the process for that. And those of you who have ever seen me give a talk or that I've worked with or for you know that I'm uh excuse me a big fan of quotes.

[00:01:46]And so I thought I would start this uh this time and this journey with talking about or leveraging one of my quote a quote from one of my favorite authors who I actually have one of his books over here that I highly recommend self-reliance some amazing quotes and information uh I think they said or they those noted that Emerson in a sentence provides the insight that most writers provide in a chapter.

[00:02:20]So, uh, and I thought this was a great quote to kind of lead into this journey because when you think about it sort of philosophically and psychologically, Shakespeare will not be made by studying Shakespeare by Ralph Waldo Emerson. And I think it's really poetic in some ways in that and true that we can spend all the time studying AI and uh and I've done some of that. I took a phenomenal course that uh I just finished with uh professor Swani with at the the University of Northwestern um called AI uh driven product strategy. great course, eight weeks. And then I finished another course uh centering around Claude with Next Generation uh product management or the next generation product manager. So again, very hands-on uh with Claude and Joti was the instructor, the leader that she's also a a great uh uh technical and and very strong product leader. And those are great and really I needed to do those to get in the mindset that I could then go do this.

[00:03:39]But just doing the studying and talking about it and theorizing around it doesn't make it happen. And so as the quote says, you can study Shakespeare, but you don't create it. uh one of my one of the great all-time guitarists right Eddie Van Halen uh there was a quote by Stephen Vai another great guitarist he said you know I can I can play everything Eddie ever played I can do it just as good almost in some cases but the difference is he created it and I think that's part of this is that when you think about what you're going to see over the next my joke is I can talk for three minutes or three hours This might be closer to three hours broken up in some segments, but when I kind of go through this, I think it'll give you a sense of um the learning, right? The doing. I posted something in LinkedIn recently where I talked about the doing, right?

[00:04:38]It's in the doing, the learning of how you get there and take an idea and really really move it move it in the direction that you want to take it. And and that ties in with this ancient proverb which really is applicable and that you you truly don't learn to swim without getting wet. And in a an AI world that we're living in where I mean it's just fundamentally transforming everything we do. Um most everything I don't think it's uh transforming doughut making or some things like that. Maybe it might. But uh when you look at just the transformational impact where literally you can start to do things in minutes that used to take weeks. And as I go through this, you'll see and you'll learn um about the agility. I was joking with another product friend of mine at lunch recently and we were talking about I was showing him an example of how I made an update uh uh for the application which again we'll get into in a lot of depth and I said you know I said how long would that have taken us to uh write requirements have user mockups created uh get some feedback and and then iterate and then get some customer validation.

[00:06:07]And he was like, "Oh, that's weeks."

[00:06:10]And I could literally do it in minutes. Now, it doesn't mean it's perfect. And you'll see also Claude makes some mega mistakes. And you need to catch them. You need to be I don't I I I hesitate to use the human in the loop phrase. I don't like that um because it means that you don't have visibility. If you're here, I'll do this so it's lines up. you if you're in the loop, I can't see what's going on. But if I'm on the loop, right, and I can really watch. And so what I was what I did and what I'm continuing to do uh with my setup with VS Code and the Cloud Code extension is even though I'm not a developer, I'm actively watching.

[00:06:52]I'm trying to watch all the things that it's writing and creating based on my prompting. And it will make some mistakes. It does make mistakes. And you have to be aware and be paying attention along the way at a at a deep level. Not you don't I guess you could just say go do it and you you can do that but you need to trust but verify as the old wording uh saying goes but coming back to this ancient proverb I mean you need to get wet and don't be afraid of it. I I so this journey started for me really a few years ago.

[00:07:30]Probably the idea that I had was probably COVID time period. Um maybe a little bit after that. My younger daughter was in graduate school and I talked to her about maybe a class where uh she works with a couple students and creates the the concept that turns into a business for them or what have you. And um they didn't really have that class at the time. So then I thought about just well maybe I could write the requirements and you know I'll pay some developer friends that I have and we'll just go do it. And I started down that path a little bit but it it just wasn't going to work uh with working full-time and everything.

[00:08:15]And then about I guess it was a year ago maybe yeah about a year ago I I I thought I would give it a try. I used one of the the the coding tools and got pretty close. I was able to uh write a bunch of Python air quotes write watch based on my prompting and I got some of the front end created but then I I got stuck on the back end. I couldn't figure out how to marry the two together and I you know I don't think the technology was was far enough along and so I sort of stopped although I had done a few things that actually came in really handy. I think I had installed NodeJS.

[00:08:58]I installed VS Code that time.

[00:09:02]Uh maybe homebrew for the mpm packaging and something else. Oh, I set up a GitHub repo.

[00:09:14]I didn't really know what I was doing with it, but I said you need to have one. So, I set it up and so I had I had that I had those things set up and then I sort of just orphaned it. But it really came in handy once I started kicking things off and was started to get wet again. And I think the biggest change is the technology has just evolved so rapidly where all the places I was getting stuck on the back end with you know the the script or the um the key and um going into the command line or the terminal service and not having the right script to paste over because I don't I don't know how to write all that stuff or just being wrong. And so when you look at the trajectory of how fast things have evolved, it's really powerful. And so going back to the classes that I took, I got really hands-in with mainly co-work and doing some skills. I created like sort of a cool skill for uh opportunity analysis.

[00:10:20]If you wanted to do a job search, you basically take your resume and uh compare that to the job description and it'll give you a a good breakdown and a ranking of, you know, is this is this the right opportunity and score it, which is kind of cool. um with the Northwestern class. Uh we did some really cool case studies and I used kind of a combination of tools. ChatgP Claude uh I used some Gemini with Notebook LM.

[00:10:51]Notebook LM helped create some really cool videos. I experimented with those pretty good stuff, but not exactly what I needed for this. And I initially looked at possibly going with chat GTP.

[00:11:07]Uh but in the end I just felt more comfortable because I'd just taken the class the nextG product management class with Claude and I kept seeing how Joti was using um the Claude code extension and at first I was like ah I know I'm I'm going to stay right there and co-work and for whatever reason it it dawned on me yeah go all in get fully wet dive in not shallow water. You don't want to do that, but dive right in and just go for it. So, um, that's what I decided to do. And, uh, things have evolved very rapidly. I'll come back to what I was going to talk about, but let me let me sort of click over here and just mention what the app is. It's not a I'm in cyber security.

[00:11:58]I've been in cyber security, so it's it's not a cyber app. It's not even a technical app, per se. It's it's a an app called Critter Getter and it really centers on the the problem I have with animals that unfortunately get hit on the road and they just get left there and run over and pummeled and it's a road hazard and the dignity of the animals and also because we've sort of created an ecosystem now with this where you have other creatures that are maybe going there and now they're at risk and you're driving and it it becomes is a challenge. Um, and it it goes back for me just when we look at um my history with animals and um all the way back to my parents were dog breeders. We brought in the first ever Corelian bear dogs which are just an amazing breed. sort of a husky like black and white dog um from Finland and they they helped chase the bears away. So we had those dogs, a beautiful dog and also Norwegian Elkhound. So in any event, I always had lots of animals around us, 10 dogs typically at a time, cats, dogs would just show up from the from the highway.

[00:13:20]deer, turkeys, um, uh, some coyotes, no wolves, uh, geese, ducks, rabbits. We had a the neighbors had some chickens. We weren't on a farm, but we were close to farm country in Nebraska. So, and we saw a lot of unfortunately, you know, hit critters. Um, typically raccoons, some possums, possum psums, uh, obviously squirrels. And my friends, the Dinsky boys and I, we would just always move them off, right? We saw, unfortunately, some dogs and cats that have been hit. And so, we'd always move them off of the road way back when we were kids. It just seemed like the logical thing to do. Now, we weren't on the highway, so we weren't at risk or anything, but it just seemed like, hey, there's a there's a hit critter. Let's slide it off to the side. So, that's what we did. So, maybe the nucleus for the idea came from there. And so, we are going to go through this journey.

[00:14:24]You can see the logo there. I'm going to show you something on that in just a second, but talk about how I built a mobile app from scratch. literally uh I built it. I defined the requirements.

[00:14:39]I air quotes wrote the code. My do one of my daughters did help me with the logo. So, real quick, check this out.

[00:14:46]I'm going to use my OBS uh uh special powers and switch over to another screen. Uh and you can see these were the the first couple of iterations. This was with ChatGP and uh I sort of really did like the first logo, but my older daughter Hunter thought it was a little too cutesy, which is fair because it's not a cute thing, animals being hit. But the the goal and the mission is we can do some good with it. And we'll get into that a little bit more when you see the the demo and how we can donate money to charity and do different things like that. But I really I really liked it.

[00:15:24]And look, I I pay I'm a as a product manager at heart. Um that really gave me a the fundamentals to define what I wanted. I I called out these colors. I don't remember what panatone navy blue that is, but it's in my markdown file for my style guide that I have now that all the coloring we do is going to be sort of this pink. Well, now the right side of the pink. Um, but so then, uh, we modified the lefthand critter. Uh, and I thought it was a really good call out by Hunter that you needed the road kind of weaving through and the marker.

[00:16:01]Brilliant. Um, however, if you look really closely, look at that. Look at that version of the critter.

[00:16:09]Uh, look at its tail.

[00:16:14]I think this is the trust but verify in using tools. the tail is the foot or the foot is like who what possum has a foot tail. So, uh it's really important to to look and validate those things because in the definition of what we wanted to create from a logo perspective, we provided some pretty granular definitions and there were a few other iterations to get the the logo or the critter getter logo that size and then safer roads one critter at a time. and we had some different variations of that, but that worked out. And then trademarking it, of course. Uh, but we didn't notice the tail foot thing. And so, that's a great example of, hey, that's awesome, but it's also wrong because there isn't that. Now, you could probably go with it. But if we go back then to um the actual logo that came out, we went and fixed it. So the great thing with chat GP is couple of prompts, fixed it, documented the panone colors, added that into a style guide sheet so that when we make updates into the app, it follows those colors and doesn't come back with, you know, like bright green or something that I don't really want to have. And uh that that makes I think a a really a really big difference uh from that perspective. And so with the app itself, a couple things and what I'm what we'll do in these sessions and this is part of the beauty of it is when I first created in VS Code the in fact I'll go to it real quick. uh when I first created the definition.

[00:18:03]Let's go to it here. Ah, here we go. Um, so when I first got into VS Code and then I added the Claude extension and then had to do some things to configure that. Pretty straightforward. Although be really careful cuz Claude wants to basically have full uh disk writing and editing rights to your computer. Don't do that.

[00:18:29]I also put in a cloud extension for uh the browser because I was trying to do some things that didn't really work out.

[00:18:35]But again, it wanted like access to every website and next thing you know it's key logging. Oh, let me just key log all your passwords.

[00:18:43]Uh no to that, right? And you know that's why there have been some fears with open claw, right? Giving openclaw access to your disc. If you're going to do that stuff, use a different computer alto together and separate those things out. So anyway, we got that set up and then I was thinking about, you know, where how where do we where do we start?

[00:19:03]And so if I go over here, oops, hold on.

[00:19:09]If I go over here, what I did first is one. So again, thankfully I already had VS Code in code installed. I think I did an update and then was able to add the cloud extension. I think I'm using Opus 4.6, I think. Yeah, pretty sure. I think that's right. Um, and I just said, you know, let's define what it is we want to do. What I what do I want to do? Go. And look, this is a really key thing. Um, let me let me jump back over here.

[00:19:45]You need to have an idea.

[00:19:48]It might not be a great idea, but you need to have an idea because some people might not think this is a great idea, but you know what? I don't care. I, you know, so what? It's my idea. I'm running with it. I'm doing it. And the things I'm learning, whether it becomes s the success that I hope with it, I don't know. I mean, I'm not looking at this as, you know, my retirement fund. I'm really looking at it as this is a a contribution to do something that maybe gives back, maybe saves some lives, save some critters. We donate, raise some money for charities.

[00:20:20]Um, our dogs, uh, a couple of our dogs have been rescue dogs. Uh, Lifeline and the the CAB animal shelter, uh, our Husky Reaper came from there. So, if monies can go to that and maybe awareness because too many people are just not aware of what they're doing when they're driving. Um, and they may not even be on their phone, which a lot of people are, but just be more aware when you're driving. Be on the lookout for critters, you know, and because if you're on the lookout and you're aware, you see that squirrel creeping in. Well, slow down.

[00:20:59]You see a cat that might be getting ready to dart. Well, tap your brakes, you know, and don't just don't just ignore it. Like, you can do a lot. I bet we could reduce the number of critters hit if we by I don't know what percent, 25%. If we're just more aware while we're driving, not to mention other safety with kids and bikes and things like that. So, um, have an idea that you feel really strongly about that you know you can go deep on and just flesh it out. Again, we're getting wet. We're we're in the deep end. We just wade into the water to get wet and learn how to swim. We're like Gatka. Looked up the reference for the movie where we're swimming till we're out of breath.

[00:21:49]Um, we're not saving anything to get back. We're all in the deep end. And it's sink or swim. And that's really the attitude, the positive attitude that you need to bring to it. As Jim Ran used to say, nobody can do your push-ups for you. And in this world, you're going to really see development change. I was talking to uh another uh product manager friend of mine and former counterpart and one of the things he was talking about was how he's surrounded himself with uh with agents that do a lot of the work that uh he used to do an AI pod agent pod and basically he's defined an architect role couple developers QA and so he has a team and he built out those personas and they don't do all the work, but he defines what he wants. And I've sort of done that. I have basically a I have one I have one agent and me and that's it. And uh we're just knocking it out and he has like five that do different things so we can have them working on different tasks, merge all that stuff together. And that is the future. I think I was talking to someone um just the other day and uh he had commented about yeah you know we're dealing with these big enterprises and they want to they want to have a feel or sense that we've got like a hundred people working on this and it's just it's no longer the direction of the world right you literally can have companies like look again what I'm doing right to do this I would need at least three people in the old way maybe five uh but certainly more than one and more than me because I couldn't write all this code and so you literally can have companies that and there are some right now that are hundred million dollar companies with 10 people and they they have their own you know agentic layer of agents that are doing certain things you know and I built a couple agents they're okay like you know peruse my emails every evening and in the morning when I wake up give me a breakdown of high priorities and things that I need to focus and work on. So you can create a lot of those things and I think that's that is the direction that is what is going to evolve and you literally can have companies I have another friend of mine a company called QUM and they're eight people and they're cranking out the work of a hundred probably and they've got some customers they're generating revenue and they probably will never need a thousand people even if they're even if they get big because everyone and then everyone they bring in you have to have the toolkit around you. So this is also the evolution of product managers becoming product orchestrators. So the the person that I was talking about with his five agentic AI team members he's got his toolkit and he is a developer but he also knows the product side. So the combination of that he's got these his own virtual group and you can end up and basically it's a pod and so you create your own pod with that and you can do really incredible things. Um, and so if we go back to what I defined, what I did was I I started, in fact, I just asked I asked Cloud Code, um, hey, I would like a markdown file template that I could start with to start to scope out my idea. And so I won't read all this.

[00:25:34]Well, it's not that much actually, but I just define what it is. Hey, um, it's a mobile app identifying animals that have been hit and killed on the road.

[00:25:45]It allows the animals to be moved safely. By the way, we built in some some safety uh information associated with the app as you would expect. And uh the user basically drops a pin, right?

[00:26:00]So, you're driving by, you see a critter, pull out to the side of the road, uh uh or when you get to a safe place, you mark it. So, I've set it up so you can mark it right there. Boom.

[00:26:10]Drop the pin.

[00:26:12]uh or around the corner. It's back here.

[00:26:16]Drop the pin. And so um you know, and then the person who submitted the animal, they can select a tip. So we built in a I call it critter cash. So you know, someone in the neighborhood gets notified. Oh, wow. Oh, that's sad.

[00:26:32]Um squirrel was hit. I'll be walking the dog. Hey, I'll I'll move it. I accept it. So now I'm I'm gonna move it. And then I get there and I do it and I say it's moved. Uh and so anyway, we defined that up front. Um and and setting it up to uh use your geoloccation. That's the beauty of this when you start to see it later. Oh my god, it's just design scalable right out of the gate. Uh, I was at Hunters in Charleston just last week and had I think build 10 on my phone and this was still before. So, this was when it was set up where I had to be connected to the network and my computer together because I didn't have it posted through test flight yet. Uh, but it worked brilliantly. So, pull it up knows where I'm at. I hit the I I can hit the uh uh the map. Shows me exactly where I'm at in Charleston.

[00:27:36]See a raccoon. I didn't, but let's say I did. Market. Drop the pin. Um just amazing. So, it'll it'll work almost any anywhere that there's the maps with the Apple maps behind the scenes. Uh and I think it's set in 70 countries. I haven't set it up for that yet, but it's it's designed for that. This is like super modern cocoa pods homebrew railway. You'll see the tech stack stuff sometime throughout these sessions that I'm doing. But uh it's just been so amazing. I mean, I'm I'm just pumped from being able to work on this and do it and and see it coming to light.

[00:28:21]Right. Again, just taking the idea, and again, this was this was literally the start. The first things I wrote, um, who is it for? It's for people who want safer roads by removing animals that have been hit. Although I say killed, I try not to use the word killed. I just say critters. It's fine, but I'm just It's a sad thing, right? So, um, and and just, you know, for people that hate seeing the animals out there like I do, but you know, maybe look, maybe you're you've got two kids in the back and um, you don't feel comfortable moving the critter yourself, that's fine. And uh, that's why this is here to say, "Hey, I'm not willing to do it or I can't do it myself, but I'm willing to pay someone. And also, there's things we're going to build. We don't have this yet, but we're going to build this into um to like the the wildlife uh and animal control centers. So, you know, obviously if there's like a bear, you're in Montana, you're there's a bear that got hit. Hopefully not, but you're not going to go move that. Plus, there's also dangers, right? And uh you know, you don't want to move a a rattlesnake.

[00:29:36]You know, you need to be careful. So, we built some of that in. And there's also some things we're going to do with uh with Critter Gear. I'll show you that later. We haven't built that out, but we'll probably use um there's a I forget the company off the top of my head, but there's basically a branding place. So, the idea is we're going to have a bucket, a critter getter bucket with a sort of a shovel or a stick that allows you to move the critter. Um, some wipes, some gloves, and probably a, you know, a vest, you know, safety vest kind of thing. Maybe some goggles. We're not going to go crazy.

[00:30:12]U, but just like, hey, for $25, you can get your critter getter gear bucket and then, you know, based on the cost, how much can we give to charity? Uh, you know, that's that's a part of the goal.

[00:30:25]And I'm trying to figure out, well, how, you know, if I was on Shark Tank, I can hear them now, like, well, how are you going to monetize this? And I have some ideas, but it's it's not about that.

[00:30:36]Like, I I want to get more money to charities and do awareness for the animals and maybe reduce the number they get hit. You know, maybe we charge a fee on the tip. I don't really want to do that, but um probably at some point if this takes off, we'll need to hire some people. Uh I was thinking more from a sponsorship perspective that might be a a great approach and just a charitable giving perspective, right? Maybe again maybe there's part of the charity the uh a fee that we charge five or 10% or something reasonable. Um uh but maybe the sponsorships, right? like where I live in Norcross, Georgia and Atlanta.

[00:31:15]Maybe the the city of Norcross or Gwynette County with their animal control group budgets in I don't know whatever 25,000 a year and they're and and they're on the they're built into the app which I've already built in a charity piece but we'll build that in so you could like do a direct dial to say them and then we'll build in we'll build in location awareness which is already there but you know by your region or by your area. Another thing we'll we'll add in at some point because I kept as people were looking at they're like oh what about this kind of critter and we in fact I added armadillo to the mix. Uh so there's armadillo in there now because a friend of mine was driving there's an amazing number sad number of amazing number of armadillos in South Carolina that have been hit. Um so many so we added that but we'll we'll evolve that. So, uh, my one of my daughters said, "What about gators?" And it's like, "Well, there's no gators in Georgia, so I don't want to clutter it all up, but we'll probably set it up based on your area and and map in the right like a moose. It's probably not a moose in Georgia, but if you're in Montana, hopefully the moose doesn't get hit, but because they're so big." But, uh, so I I created these definitions. Now, I didn't I didn't start to do the tech stack here.

[00:32:39]it it updated that for me which was kind of cool. Now I did start to write down the key features though. So hey I need to be able to log in, put in a password, use Face ID, use geoloccation, um uh support credit card or Apple Pay.

[00:32:59]Mainly Apple Pay is what we're going to go with. um drop markers on the map for the sightings uh and be able to select the critters, allow the user to take a picture. I I think I'm really I'm I love this little feature I made. Again, I'm doing this because the way I want to do it and uh uh uh what what was I had a we had a professor in graduate school uh Professor Kurt Anne Striker. He was our uh statistics professor. very interesting and brilliant man and uh he would always say things like you know I ran the statistics and probability on my son and he's in the 95th percentile and he would say you can't stop me and we all look at each other like well no one's trying to stop you so you can't stop me I'm going to do this the way I want to do it and then we'll get feedback as as we're doing it now we're in testing beta testing through test flight on build 21 about to do build 22 too because I found some more errors that Claude didn't fix that said they fixed but when I went back and created a test plan it said oops I said why did you do that and you'll see some of these examples later in a future session said oh my mistake so again human on the loop and so again going back to here I I define again really highle stuff at this point view all the markers on the map uh view your own sightings.

[00:34:32]Assign the value of the tip increments of five. I I think I adjusted that. Um now, one thing I really learned too based on being in product management my whole life and building SAS platforms.

[00:34:45]Um do the admin backend in parallel.

[00:34:49]Don't just do it as an afterthought because when someone needs to reset a password, you know, now I've I've learned now to go that I can go into the railway back end and I can delete and update stuff, but I don't want to have to do that. So, you need it all to be self-service. And so building those things in um and uh uh being able to um delete users at some point someone will want to be deleted and what happens. So I I went through that use case and just just a few days ago and said, "Well, if if a user leaves for whatever reason, um or you had to punt them out because let's say they were taking gruesome pictures or something, whatever, right? They needed to be booted out." Um it doesn't mean, you know, what do you do with the the they call them chips or they cloud calls them chips. So when you have a sighting, it's a chip that goes into the the map. You don't delete all of those. Uh so what I did, this was really again, this is because I'm a product manager person. I knew to do it. I said, well, don't remove the sightings and the reportings and the movement because we want to keep that all all that data. Data is king in AI world. Who knows what this data will be worth in the future? I don't know. Or worth is not the right word. What value there'll be with it. Uh again, I don't like that because the the more reportings in the database, the means the more critters that have unfortunately left the earth, right? And uh you know, I believe every life is precious whether we like it or not, whether we like the creatures or not even, right? I mean, imagine if you saw a rattlesnake on Mars. Would you would you squash it? No. You think that was the most amazing thing in the world? So I sort of try to look at it that way and obviously we don't want to get bitten bitten by a rattlesnake or other creatures. So we need to respect that.

[00:36:49]But uh you know so the the the back end if you need to delete so we did is we kept the chips and so all that data will stay there but then we then anonymize it. So it'll just say um I I forget what I put in there. Uh oh. Uh former former user. At first it wanted to say something like um deleted user. I hate No, don't say that. Or um removed. No, just say former. So Oh, it's Oh, that's a better word. Cloud. Oh, that's that's definitely a a better word. And so then I also defined a little bit just on the map part of it. you know, the pin where you can see the details. In fact, I just made an update today in what'll become build 22 where I noticed when So, I've got it set up so the reporter their name shows up in the little um detail flag above the pin.

[00:37:48]Um, and then so if you reported, it'll say for me, SK John 1028. And then it say um if my wife Heidi uh accepted that she would remove it, then it shows that in the details, but in the in the banner thing, it still it didn't it wasn't wrong. It's just it it persisted the reporter um for the acceptor. So, it looked like, wait a second, why is it showing me as the acceptor, which I could be the acceptor if I reported, accepted, and moved my own critter and it wanted to donate to a charity. That's a use case.

[00:38:27]So, I have that use case. And then if you moved it, it still showed the reporter's name in the flag. So, um, I fixed that in build 22. the the details was were correct uh in there but uh that it some reason I again I didn't define the requirements well enough and claude you know improvised a bit and then um what the markdown file did is it provided some additional insight in terms of kind of what's needed in terms of the flask API backend um the the colors and again this is I've got a style guide somewhere. I don't even know where it is. It's in there.

[00:39:11]It's in GitHub. I know that, but um now because I back everything up there. Um and then it just listed out a few other items that I validated. Um uh and and this was a key point that I'll come back to and we'll talk about on the conventions because I started with SQL light because it's cheap free so it's Postgress but very easy to get going but uh we used that to start and like within the first couple of builds I ran into an issue which I'll go which we'll probably cover which we will cover at some point. So, wow, that gets us into um some really good insight and detail. Um I think what I'll do is we will wrap up this session. It's about 40 minutes. That's about the attention span most of us have. and we come back, I'll I'll break down and start to show some of the the documents that I created from all the historical information using VS Code with the Cloud Code extension. Made it really easy to say, "All right, let's go create a PowerPoint deck that summarizes all the stuff that we've done." Um, sort of not build by I could do it build by build, but sort of in tranches. So, I sort of set it up in days. And then with that, I've created a user guide, which no one will read, of course, but a technical specification in terms of all how this technically works.

[00:40:46]I found a really cool site actually that uh let me see if I can jump over to it, if I have it.

[00:40:55]Oh, I do. So this is actually a free site where I took um my graph information here on the left and just created this architectural diagram. So you can see a breakdown of the external resources there. Probably a couple more now because I am using S grid. I don't think that's in here.

[00:41:18]Doesn't look like it. Um we'll do the mail story. That might be a whole session by itself. all the work I had to do to try to get mailed so that I could send a message from within the app to the b to me support crittergator.net net. Man, what a what a challenge that was. And we ended up with Synind Grid.

[00:41:39]But you can see Stripe for payments, the Apple push notifications, that was another challenging thing, but we we got it figured out. The cloudary storage for the photo storage, we'll get into details on that. Um, you can see the the mobile app pieces of that with React side. Um, we used Expo Go, which will break down all the tools that I that I used. And again, I didn't know about most of these tools at all. I never heard of Expo Go. Um, I didn't know what that was. I never heard of Cloudinary.

[00:42:12]I never heard of Railway. Maybe I heard of Railway, you know, obviously GitHub and things like that. Um, and so this this was and I didn't know about this mermaid live editor. Again, this is free.

[00:42:26]So, the other beauty of this and we'll wrap up for today is just the speed and the cost. If if I was at a company and we were trying to build this, it would what I've been able to do. It would it absolutely would have been months. And every time I wanted to change something like I wanted to add armadillo into the the critter listing a week I did it. Now it was a little bit more challenging because there was no there's no actual um armadillo emoji. So I'm using the emojis and you'll see with possum there isn't really a possum. So we're using paw prints. But for most of the others all the others except for armadillo there was an armadillo. So, I had to go find a I can't remember where I went. I don't think I have it listed here, but I found what I needed. And I had to add that in. And you had to size it. And the good news is I could just say size it just like the emojis. But you'll see somewhere in the documentation it calls it out that it's not an emoji. It's a PNG file or something. So, but this this was really great because now I have sort of a highle architecture diagram. I'll have to go back and um uh grab the uh the the code uh and map it out again. So that s grid I think is part of this and probably a couple other things. But just the the number of tools and again until you're in there doing it, you don't know what you need, right? And um and and the the trial and error trying different things to see what works and rolling some things back. We had to roll a couple things back and and then um doing the build and and um testing it some just getting in there and trying it. Oh, this worked. Why didn't that work? And and what I you'll see some mock-ups that we generated at some point, too, that are really cool where I wasn't really sure what I what I wanted. I knew what I wanted, but I didn't know what it should look like. And I I framed it in Claude or in VS Code and I asked for like give me three options on, you know, what this report view might look like. And then I got those and then um Claude said, "Oh, they're here in this folder." I said, "Well, uh, what's the format? Oh, they're in HTML." Well, open that in Opera, which you'll see maybe in the next session that we do. So, but setting all this up so far, the speed, the agility, um there's a funny story with one of the SAS products that I built and uh the the login page was just like a white blank screen and it annoyed the crap out of me. Everyone knew that it annoyed me.

[00:45:22]And so I I don't usually do this, but I did a Scott, you know, a Scott, which I don't do very often, but I went to the developer who owned it. I said, "Look, I need you to put some gra here's the graphics. We want a logo and stuff." And uh at first he said, "That's going to take a month." I'm like, "A month? It's a it's a JPEG file." I mean, oh. And so we ended up doing it and it did take a month and everyone just freaked out like marketing's mad, UX team's mad. Well, none of that.

[00:46:00]So with doing your own thing like this, you want to change, you want to change the critter getter color. I could go in right now. I won't, but I go in right now to chat gdp say create here's the image. Create a variation of that. based on this panone gray, pink, orange, whatever. Or hey, we want to move away from the possum. The other part of why someone might ask why a possum osum. I just say possum, but why opsum? Why a possum is um well years ago when my wife I got my wife or she asked for a um uh oh uh where you can put in your organic waste.

[00:46:48]Anyway, you know what I'm talking about.

[00:46:49]So we set that up and it's on the other side of the yard. So if it's rainy and messy out in the yard, she would just put those scraps on on the porch for the night. And we started mysteriously noticing that they would vanish and or just be a mess. And so I of course being a technogeeeky kind of person and and very curious, what kind of creature is it? Um, I bought a camera, wireless camera, and I set it out there and lo and behold, it was a possum. And so we call it posi. So this is posi. Well, let me go back over.

[00:47:34]Whoops, wrong page.

[00:47:39]There we go. So that is Posi. That is the critic logo. And this will wrap up our first session. So if you enjoyed this and you're learning the journey. Um we're going to keep going deeper until we get into the weeds of I'm in VS Code.

[00:47:59]I can show you how some things are working and jumping over into railway.

[00:48:02]We're going to walk through the journey map, some of the documents that we created. I've got my PowerPoint deck.

[00:48:10]We're going to walk through each of those. Some of it might be repetitive, but that's also how you learn. And maybe you pick up from a visual something more than you know if we were in uh in the repo. We won't really be in the repo much because I don't really do anything with I just update the stuff. Um maybe in VS maybe in Xcode or simulator. So we'll go over all those things because I and I don't even know if I needed to use all these things but we used a number of them. The simulator was pretty cool.

[00:48:40]What's also really cool is Apple has a phenomenal um capability to mirror your iPhone. And so the first demo video, the first two, well, I've done two. The demo videos for Critter Getter um were done by mirroring my iPhone and using uh screen capture record. You know, it's like brilliant, right? And when I want to do um when I need to provide uh VS Code and Claude with examples of issues um when we do have something built into the test flight where you can just pump it up into into the Apple Store Connect which we'll go into as well, but I could just airdrop them over airdrop.

[00:49:24]Now, of course, if it's a picture of a thing, um, uh, sometimes they're in a he an hi file format, and of course, claw doesn't support that. So, you got to open it and save as a JPEG. Anyway, you then just upload that over into cloud into VS Code. Say, hey, here's the problem. Like, I kept having a problem where um the I can show you real quick. uh and you'll see exactly what I mean by the problem. Let's see. So you can look see how the keyboard covers up the login and uh my younger daughter Morgan was the one who saw that and I fixed it like five times. But this was on a different iPhone. So I had to set up and we'll go into this too, but some some settings around it so that it always leaves space so that if you go here, let me just jump over since I have everything on my phone. Let me log out.

[00:50:30]And here's a funny part of logging out because I have Face ID enabled to log you right back in with your Face ID. You log out if you're still looking at this, logs you right back in. It's gonna put your phone down. So, it's a great non-driving feature, right? Because you don't have to log in uh if you're going to flag a creature, but so you can see here that um I have it fixed. Sort of you can see it. But um yeah, so there's an extreme amount of usability. Again, it's funny. One of my friends was asking me, "Hey, do you have you written the where's the user guide in the documentation?

[00:51:07]Is it in the app?" Okay, I do have a website, but we haven't turned it on yet. And we're we don't want to really do a bunch of website stuff because it's mobile. But um I said, "Well, who reads did did you go read the Uber documentation in the app? Did you go like Airbnb? Did you go to the documentation to figure out how to, you know, reserve or rent an apartment in France or wherever? Nice, France. Uh, for example, no, you don't do that. YouTube, I have a YouTube app that I live on. Do you go in there and look? No, you don't.

[00:51:44]You don't. So, yes, there's documentation. Yes, there's a test plan.

[00:51:48]Yes, there's details in terms of like the techn like for if I was to hand this off to a developer, it's all documented, mostly documented. Might not be all right though. You got to read through it because it'll make like I literally found where it did not include um did not include synret the mail piece of it.

[00:52:07]Like where's that?

[00:52:09]Oh, sorry. Uh said Claude. I must have missed that one. I'm like no you don't get to miss that. That's an important part if someone's going through Maybe that's why some of the documentation today is still a mess. Uh but but it looks good. So you got to read through it all. So, uh, but look, bringing it all together, bringing it back to wrap up this session. Um, so far with all that I built, I spent about $200.

[00:52:38]So, Railaway, I think I paid five bucks a month. Send Grid, I will have to pay uh for the email. The one the reason I only have the the Critterggetter support crittergitter.net email is because that's $7 a month I had to pay upfront per year, which I didn't set up other accounts. It's easy to do. So, I'll do that. Registering the URL. The most expensive thing, frankly, was the Apple developer um sign up 100 bucks. So, um now there'll be some other costs.

[00:53:09]Cloudary. It's currently free, but that'll cost. Railway will cost more. Um uh there'll be some additional costs from a hosting perspective.

[00:53:23]uh things of that nature. So um but but the scale like there's no co there's no ma there's no super increase in cost to have five 10 20 thou 100,000 users.

[00:53:37]Uh there'll be an update I'll have to do I think on Postgress uh based on what we've looked at. But I mean again if just to do what I've done so far easily could have spent $50,000 in six months 100%. Instead uh seven days not really but that's what it says.

[00:53:57]Seven days to build. But I I need to go back and see if it lists out the hours that I've spent so far but not that many. I mean, I really really started working on this a month ago and then just grabbed a couple hours, did a couple things, and then really just the last week where I really just gotten deep, you know, stayed in the water. I didn't leave the deep end. I've stayed in it and just cranked it. I mean, again, one of the other guys I was talking to, he's like, "Man, you are killing this thing." And that's what's so cool about it. Like, you can do it, but you need to have the idea. You got to have a good idea. Don't just waste something. Come up with something you've always wanted to do and see if you can do it, whatever that is, because you can do it. Um, now again, I think I probably have some skills based on, some might argue, that might be debatable, some product manager skills have helped me with this. So, I've been in software development for 20 years, so I know it, but I'm not a developer. But, uh, don't be afraid of it. dive in the deep end and go for it. So with that we will wrap up uh this first session and uh we'll see how it goes and uh we'll keep building on it and go to the next. Thank you.