Cozy Coding Vlog 🍵 Day In The Life Of A Software Engineer (App Launch Series)

I feel like I've been doing this for like two past hours at this point. YouTube as well, I don't have YouTube on mine. After weeks of pivoting and trying to build this app out, I feel like we're so close to actually publishing it and for you guys to be able to try this out yourself. All I'm left with is a couple of technical features and we're going to work on one of those today. For those of you new on this app launch series, what I'm trying to do is build this app called Stay Away, which is going to encourage you to delete your social media. And after you delete it, it's going to make sure that you don't end up relapsing. I built this app for myself when I was trying to cut out social media and I want to publish this for all of you guys to try it out yourself. So first, let me show you what I've built so far from the previous video. For the sake of this demo, I have reinstalled Instagram on my phone and I'm going to show you what the onboarding flow looks like on the app. So currently, it's I'm steady and then I pick the app that I want to delete or stay away from. Currently, it's able to detect that this app actually does still exist on my phone, which is good. And then I click delete now. Side note, this screen was so painful to implement. Not the screen itself, but just the user experience. Because what I wanted was the user just clicks one button and is able to delete the app. But Apple does not allow that. I fought so hard with the Apple Developer docs to just figure this out. But nope, there was no proper way. So I ended up doing is just telling the user that go to your home page and delete the app yourself. So that's what I'm going to do. Delete this app. It's deleted and then I'm going to open up stay away again and it's able to then detect that. Oh, nice. I already deleted that. And then I click start my streak. And now the user is able to start their journey with the app no longer in the background. Oh, by the way, the data on the screen is dummy data that I'm just using for testing purposes. That's what exists right now. But what are we going to build today? Now, this is a part I'm really excited about. One of the problems that I had when I deleted the social media apps was the relapse part, especially when I'll have friends tell me about, oh, did you see this meme? And then I'll think, huh, maybe I should reinstall Instagram. And just having the app on my phone would make it 50 times more likely that it's not a real number. I'm just making up this number. 50 times more likely for me to doom scroll. So I didn't want the app to be on my phone. What was really useful in those moments was if somebody could just be my accountability buddy and tell me that, hey, did you just reinstall this app? Are you sure you want it? Are you going to regret this? You know, that kind of stuff. That's what we're going to build today. So when the user has already deleted the app, but they end up relapsing and they end up reinstalling it in the background, Stairway is going to detect that, hey, the user reinstalled it. It's going to send a push notification. And then it's going to also ask the user if, was this intentional? Are you OK? It's going to use some of the grounding techniques that we already have set up in the panic button. And I haven't quite figured out the copy side of things. So what text would fit the scenario? But those are the type of stuff that we're going to work on today. From the technical perspective, we could build this in different ways. We could have job polling in the background all the time, but that's going to be really heavy. We could just detect every time the user opens the app, but what if they don't open the app and they end up reinstalling it? So I actually already have the answer to this because I already did a full swim lane and technical architecture for this and also the design. So let me show you how we can build this today. Let's start off with the technical logic first. This is my mural diagram where I have multiple different swim lanes figured out for different features on the app. Some people might think it's overkill, but if there's anything I've learned from being a software engineer for many years is planning before coding is the most important thing you can do. And swim lane diagrams are underrated. You can never have too much. Maybe you can. Okay, so this is the section that we're going to work on today, which is the reinstall detection logic. The way we're going to build this is we're going to run a background task every few hours that's going to check whether the app still exists or not. And if the app doesn't exist, then we do nothing. But if the app exists, then that's where we start to send a notification. And if it was a relapse, then we need to make changes to our insights and all of the side effects start to get triggered. But the most important part is this background task that's supposed to run. So in this documentation, there's two different type of background tasks that we could configure. There's something called the refresh task and there's another one processing task. It seems like refresh is for smaller things like our use case and processing is going to be for larger background tasks. And I don't think checking if the app is open is a large background task. So let's go ahead and use this refresh task. Just by reading the documentation, seems like triggering a background task to run is not that complicated because here we need to register when we want the task to begin and then we can schedule it. But I'm now wondering, would we still be able to have this working for recurring tasks if I want to do this every six hours? Would it still work? So I looked at that documentation. I also asked Claude if there is a way that we could trigger something like cron jobs recurringly, but there's nothing or no class or package that does exactly what I want. What I think we could do instead is since we can trigger one task and in the task, we can execute any logic at the end of a task, we could then trigger another task to be scheduled. And for how long the interval would be, I think I would like this to be pretty smart as well, which means that if the user has not installed the app for two weeks now, maybe we can increase the interval. We don't need to check every two hours. We could check maybe every six hours. But if the user just relapsed like yesterday, then we should check more frequently. So I wouldn't want this to be a static interval. I would like it to be smarter so that we can be a bit more efficient with the user's app resources as well. I'm going to now open up a VS Code and try to schedule a task that checks whether an app still exists or not, and then schedules another task every minute just for testing purposes so that I don't need to keep waiting for a really long time to check whether this is working or not. So let's open up my VS Code and I have the same similar setup to the previous video where I have my Claude inbuilt VS Code's Claude setup here. And here is all of my actual code and this is to trigger my EAS build, my developer build, because I do need to test some actual logic on my phone. Because the simulator that I use by Expo is not able to do things like check whether an app exists or not. So for those tests, I have to use my actual iPhone and here is my actual dev server running. And when I test it on my phone, I connect using my laptop's IP address and host where the dev server is running so that I don't need to keep re-scanning this QR code and rebuilding every single time, which takes so long. So in terms of setup, this is what it is. Since I already have the rough idea here, I'm just going to take a screenshot of these and dump them into my Claude and also the research that I did with the background task. And I mostly use voice to talk to it now. I've not typed in a while. So I'm using type plus right now and what I found really helps is doing some research first so I know exactly what I want, exactly what to build and then all I do is use the models to do the execution part of things. When I was relying on it very heavily to also do a lot of the ideation, I realized that eventually I would end up wasting more time because I would have to do a lot of back and forth and I would not end up being happy with what it found. And I've also had instances where when I'm chatting with different Claude models, it says that something's not possible. But then I go and do my own research by checking on StackOverflow or other places and those things are possible or there's another package or another library and somebody else has solved it for. So from my experience, yeah, these models are amazing and definitely make a lot of things get executed way faster. But I would not rely on them 100% to tell you whether you can use a certain package for something or things like even the Apple's developer documentation, there were things that it told me were not possible. But then I found out that, oh, you can actually do it. It's finally ready. I had to reinstall my EAS build because there were some changes to the dependencies. So I have the new one right here and I also have a new dev server up and running. And now let's test it out. So I'm gonna open up app and the part that I wanna test is whether the background logic runs where it's able to detect whether Instagram exists or not and send me a notification if I suddenly reinstalled it. So it's already deleted and I'm gonna allow it to send me notifications. And I see here that background app check is registered. So that's a good thing. And now we just wait for the background app check to then get triggered. And what I'm gonna do just for testing is to now reinstall Instagram. So there's two things that we need to test here. One is the ability for the background check to be triggered and another is that the background check, whenever it does get triggered, it's able to check whether Instagram or whatever app exists or not. And then it's able to send notification. So those two things need to be checked. Okay. And now we have Instagram already. So while we still wait for the first part, which is whether the background check gets triggered or not, I'm thinking of adding a dev button or something to manually trigger the check so that I can test if the notification part works or not. So just added the button to be able to test whether the notification gets triggered because the job is taking forever to run. So I'm gonna click this button, test background check. And when I click it, then right at this time, it checks app still deleted. Okay. I'm gonna click refresh again. So we load it from the start and then let's just run a test. It manually triggered app ID Instagram and it's still, it's not installed and it's still deleted. So no action. Okay. Now I'm gonna install it again because of these features, I've reinstalled and installed Instagram so many times. Okay. Instagram is installed. And now I'm gonna click test background check. And there we have the notification. Hey, are you okay? We noticed the app is back. Come check in with Steady. Okay. Nice. So that part works. Now, something else that I wanna implement is a screen because currently on the app itself, the streak still exists. But if the user has already relapsed and already reinstalled Instagram, there should not be a streak. They should not be able to see all of this. Instead, what I want is for it to look something like this. The Figma designs right here. So this is what a screen would look like after the user has actually gone back to Instagram. So just a mini model from the bottom would be, would pop up here. And we would say, we noticed Instagram is back. We have time to delete it before you lose your streak. Streak ends in 162. And I think I'm gonna give the user an hour to delete the app because at this point, the user could reinstall the app for different reasons because sometimes I do reinstall it just to post reels for business account and things like that. For things like that, an hour is more than enough. And especially if your whole point is to not have the app on your phone so that you don't doom scroll, then I think an hour is enough and then you can still maintain your streak. But if you have the app on for more than an hour, then your streak is gone and stay away as the app is no longer that useful to you. Now, I do need to figure out how I handle this when the user has multiple apps that they want to stay away from, not just one app. But let's just handle it for one app first and then I think I will figure it out for other apps. So let's try and build out this screen now. I got a little distracted, but figure it out eventually. Seems like my background, if I look at the logs here, my background app check did work as expected. Okay, I don't wanna keep checking if the app exists or not. So I actually am gonna make use of my environment variable. So currently I have two types of environments, that's live and dev. And in the live environment, I basically force the app to check the actual background app status, so whether it exists or not. And in the dev mode, I then make use of other environment variables. So I'm gonna set onboarding to false because I don't wanna go through the onboarding process again and the app is not deleted. So that's what we're gonna do and we're gonna restart. And this is gonna restart as well. And now I have the app that doesn't exist. So that's correct. And I would want it to ideally display what I showed you on Figma here. But for some reason, that's not appearing. Okay, so seems like multiple background app checks actually got triggered as we just left the dev server running. So that's great. That means the background app check works, the notification works. The only thing remaining is this screen logic and we notice Instagram is back and having a timer countdown. Yeah, at the start of this, I thought that, oh, this feature will take like an hour. No way, it would take very long. I feel like I've been doing this for like two plus hours at this point. So what I've tried so far and I think it's working. So for debugging, the thing is, I think debugging for apps is so much harder than debugging for web, like websites, but maybe that's because I'm just not that familiar with apps. But what I tried for understanding what's happening on my phone versus what's actually happening in code, because I realized my phone works differently than the simulator and the simulator works differently than what I think is working in the code itself. So what I did, let me share my screen, was that I actually, oh, seems like right when I screen recorded it, something worked, but I put up these modal pop-ups to be able to see if some background checks got triggered and if the environment variables that I'm loading are actually correct. So let me know, this was actually a question for you guys. If anybody knows a great way that you recommend and have tried yourself before to debug things on the app, like on your physical developer build on the phone, let me know. Okay, so this is what I'm going to do. I'm going to, currently the app exists, which means that we should get the pop-up, but it did not work as expected. I'm going to reload it and then, okay, I see the issue. So the issue right now is that the tracked app ID is null, which is because I'm using dummy data, using my environment variables. So it's not sure the track app ID here actually represents the app ID of the app that I'm tracking. Actually, that was quite self-explanatory. So basically this is the ID for Instagram, but because I allow the user to pick multiple different apps, so you can have different apps tracking IDs and different tracking IDs will have different notifications and that's how the data hierarchy is supposed to go. But seems like when I try to display the streak relapse time, there's an issue with the track app ID. You know, if it sounds confusing to you, don't worry, because I'm equally confused about this because it's supposed to work and I can, the problem is I can see the track ID, app ID on different pages, like on settings page. So here I can see what are the apps that are being tracked, but somehow once it reaches the home screen, then the track app ID becomes undefined. Definitely to do with the way I'm managing states, someone decides to start drilling. Oh my God, it works. It finally, finally works. Oh my God. Okay, so I had to fix, the issue was not really with the logic, it was to do with the way I'm testing. I definitely need to clean up these tests, like I don't know if using environment variables is the best way to test different flows, but yeah, I will clean that up, but for getting this relapse logic working, this works pretty well. So currently I put the window time as two minutes, and the streak ends in two minutes, and then I'm supposed to get notified after a minute before the streak ends, that, hey, your streak is going to end. What do you want to do about it? So let's see if it happens in one second. It does. Five minutes left. Delete Instagram now to keep your streak. The numbers are very off again because of dummy data, because it's not consistent. So I think I need to get rid of the dummy data that I have and start to use actual numbers, but it seems like it works. So we have done multiple different notifications so far. So the final streak ending notification works, and if I end up deleting it now, okay, I need to clean this screen, but if I click delete now, okay, and this works and my streak is back. All in all, the logic does work, and I'm happy with the progress that we made today. I do need to go now, so I need to stop the project right here, but I will get back to this tomorrow and you will see more videos until we finally get done with this. In the next video, I'm probably going to show you guys how I end up building this whole feature, but for multiple apps, not just one app, because so far, we've just been testing with Instagram, but for me, when I deleted social media, I also deleted it for more apps than just one, like Instagram, TikTok, YouTube as well. I don't have YouTube on my phone anymore, mostly because of YouTube Shorts. I don't really mind YouTube long form content, but it's the Shorts that I'll end up doom scrolling. So now I just watch YouTube on my laptop or my iPad and also apps like Netflix and stuff. So how do I make this work for multi-app? Again, I have the technical logic mapped out already, so now I just need to build it and hopefully I don't run into any other weird issues like I did today, but I will clean this up and see you in the next video and the new feature that we're going to be working on. There is a wait list down below for this app that I know some of you guys have signed up for already, so very excited for you guys to try out this app. For the ones who have signed up and for the ones who are interested, you can sign up right there. What's going to happen is I will send you an email the moment the app releases and you can be the first few people to test it as well. I do also need to create a website for this app to just rank high on SEO and also for the wait list itself because I'm paying this third party for the wait list and that's getting a bit pricey. So I will be making a website myself and that should be way quicker because that's something I'm way more committed with. So a couple of projects coming up. Thank you so much for watching this video. I hope you like this one and it's quite all over the place but that's usually how coding is. And with that being said, I will see you in the next one.