the coding project that improved my skill the most (senior developer, no cs degree)

You know my story. I went from a 30 year old with no career, no money in the bank account, to being a senior developer with multiple apps, with many users for different companies, earning a six figures annual salary in just under five years. Today we're going to talk about the app that I learned the most from. And it was early in my career, maybe when after like three years, I started programming. I'll give you a little backstory of what the app was about. So the story of the app was that I was working at a software development firm in sales and development. One of my clients was this mental health application. And so I set a meeting and long story short, I closed it and I made the company some money, right? And I programmed it too. Next, he invited me onto the team to be like the lead developer. And I was only three or four years into my programming career, so it was very hard. It was a big step up. We built the prototype at the software firm and then now he needed a fully fledged working product and basically he decided to redesign the whole app and gave us three months to do it. So it was a challenge. I got to building, we got the app done on time. Things were going great. But the CEO saw an opportunity where we would build apps for other NGOs. They really liked our app. I got to work and I started refactoring and rebuilding the entire app and separating all the features so I could turn on and off the features to kind of modularize the features to kind of make it work here. Like some with chat, some without chat, some with video chat, some without video chat, some with journaling, some without journaling. And you get the point. So through building this app, there's something that clicked in my mind. Every app needs authentication, chat, profile management. These are like three very important things that almost every app does. And then it has some kind of secret sauce, like whether it be journaling or video chatting or quizzes or whatever it is, in the end you're always going to need authentication, profile management, most likely, 90% of the time, chat. Something clicked in my mind. Just make those things really well and then you can kind of get to the good parts really easy and have fun. And so we built out an app and it had all the features. And I'll just show you the website here called GitHub. Basically we started out as a mental health company during COVID There was this thing going around called the COVID Blues. And he kind of like figured, you know, why don't we make a journaling app where we can? And we'll have like this video chatting with a doctor and it would be good. But then he had about us like Wellness Workshop that was like the video chatting software services community. And then he added this B2B section. He wanted this B2B section to build out apps for other people. He wanted to be like this white label application company, so an all in one tech partner for mental health NGOs. So basically we built out all these features. Show you down here login. So like authentication, biorhythm tracking, online video chatting, text chatting and chatbot online journal, mood tracker, self assessment test and GPS enabled search. And we kind of wanted to use that. Not every app is going to need all these, right? They could just choose like five of these or three of these and then make a whole app out of it. There's a little video of the app. I'll just share my screen. We can look at the app together. This, this is the first app right here. It has like some scheduling, journaling, mood tracking and you can kind of see your weekly moods and calendar and chatting and some kind of chatbot and profile management and a whole bunch of just stuff that every app is going to need. It is in the App Store. I don't think you guys should download it though. I don't work there anymore. And with that app we did build another app for this company called Napima and basically we use that app to build this app and it's in the App Store. So you see that it has a mood journal, interactive dashboard and video chat and prompting cues. Mood journal. So it's basically the same app, just repackaged with different logos, different colors and design. That's what I did. And I'll kind of show you how I did it. Basically we went through the app, you know, so what language stack and how did I code it right? We used react native, community CLI and this was in like 2020, 2021. And it was around three years or three or four years into my career. So when I first built the prototype at the software development firm I was talking about, we just used React Native, Node JS Express and MySQL that was it. But this is how I did it the first time. But having to redo it in the three months with the new redesign, I learned about Firebase and serverless architecture. So I learned Firebase, Firestore, Firebase Cloud functions and it was easy to use and fast to deploy. He was done in Node JS with Lambda functions and React native and a big thing. I'll show you guys the code and the big thing I learned was how to bind the Firestore with Redux with this library called React Redux Firebase. It was really good. It saved me a lot of time and I think it could add value to you guys. I don't know if people use it because people don't really use Redux. Recently I had a good time and it made it very comfortable to use Redux. I just use this for the library. It loaded up all the things into my Firestore from Redux that I needed. I didn't need to keep making calls. And people always talk about kind of like the price of making requests over and over again to Fire Store, but you don't really need to do that. If you have a global statement, there's like some code to initialize the app and the user profile because, like, you're not gonna keep asking for the profile over and over again from Firestore. Cause that's how you build up these requests. So you just stick that in your Redux and if there's any changes, you update in your Redux as it goes. So that's kind of what we did. And I'll kind of show you guys the code. So this was the V1. We're using Storybook. So we had a folder structure like, and it taught me like, this code kind of like taught me a lot about organization and how to set up React Native project. You have like your navigation, you have your stacks, hooks, services where your API calls go. It was, it was very fun. It was interesting. And I had a big learning experience kind of working with other developers trying to get this thing done. It was really good. This was the first version and I have something similar with like the boilerplate that I wrote to make like the other apps, like I just showed you with like Nupima and everything else. I'll share the GitHub link with you guys. It isn't exactly the boilerplate that I created at the company because it's not my company, it's not mine, and. But I used a lot of that influence to build my own kind of boilerplate, like Serverless Firebase serverless architecture, like Firestore boilerplate with React Native that I used on my project for a while. I'll go to GitHub.com I think it's called React Native Burner in mine. Here's like the folder structure. So I think you know a big thing about code. And when I was tasked to kind of redo the app in a very, you know, lighter and turn things off, I learned about you Know how to organize my readme, how to kind of like organize everything in the documentation so other people could help me. So I kind of wrote this documentation. You have the SRC folder, I have my assets, and then I would have my images, fonts, and then components, and the components would hold, like the index tsx, which would hold all of my code that I would import or export from there. And then if it had its own assets, I put it in there. If I had something specific to Android or specific to the iOS, I'll keep them, those folders, folders. Then I had my config and then the config of my app, like app config, like server URL language and all that kind of stuff. And it just showed me how to organize it. You guys can take a look. I'll share the link with you guys. How I structured this app, it's not how I do it anymore, but it was. It was a good one. I thought it was easy to use. So a big part of this, right in the app config, when you go to SRC and you go to the config folder in the app config, I put all the features, right? I put. There's a pay mode, there's a language of the app, and then there's a storybook. If I wanted the practice screen on or not, if I wanted chat in the app or not, I could just pass true or false and it would take away the tab button on the bottom journal true or false, and then chat extras. Did I want to be able to let them upload images or. Or videos and I just have to turn it true or false and then the video, I'll have to remove that. If I wanted video chat in there, I'll just patch true or false, and then I put some endpoints in here. This code helped me learn a lot. As in, like, you could hide things because on iOS and Android apps, you can't really look at the inspector or anything. So you can kind of just hide things and people can't really see it. So I have my kind of index TSX in the navigators and I would. In the root, I have my index tsx and then I kind of just hit stuff like if the config chat feature was on, then then I would show that this chat was in the app, right? If the config journal feature on, I would be able to kind of control, you know, if the tabs were shown in the app and kind of separate the logic. So then it was like its own app within the app, it really opened my eyes to kind of like how to code clean and all that kind of stuff. So I did use Firebase in this, right? So if you look at the package JSON of the app, you'll see that I use a lot of libraries in React Native and especially in the readme. I kind of put notes on how to install all the packages I was using. So a big thing was I kept on looking about it. It's called React Redux, Firebase. But maybe you know what React is, maybe you know what Redux is. But Firebase is a big one, right? And it kind of ties it all in together. Kind of make the app have its own backend as a service or like authentication. So Firebase is a huge, huge app SDK. So software development kit built by Google for authentication for their no SQL database for push notifications for a bunch of things in there in their suite, let's say, right? So make your app the best it can be. With Firebase and Generative AI, this is just added because they added some kind of thing called Gemini but basically they have a bunch of things like you can deploy apps on here, you can do some, a lot of things, right? You can do. And it's used by a lot of big companies. So I'll just show you what it looks like in the console. So you've got a Firebase console and basically you can just turn on. I'll just go to this React or the Burner. Basically it has a bunch of products like app check, app hosting, authentication and will look an end to end user Identity solution under 10 lines of code that's you know, it's super powerful. You have Firestore, it's almost like Mongo, just no SQL, it helps you store data and you can kind of call the Firestore directly from your app. You have hosting, you have functions like lambda functions and basically the only problem is it with it is it can get quite expensive if you have thousands and thousands, thousands of requests. You know, it's not hard to get thousands and thousands of requests if each person is going, moving here, moving here, moving here and you have like a thousand users and, and they're making a bunch of actions on your app. But basically you have a Firestore database that you can kind of, you can see the data you get uid, it's very much like Mongo and you have like chat requests, chat rooms, you can create your own collections and then you have basically authentication which you can have here and it stores authentication so you don't have to Store passwords and you know, create your OAuth2 strategies. And it taught me a lot because reading through Google documentation, Firebase documentation, you kind of learn how software is supposed to be built. You understand the patterns that need to happen within your app to kind of follow some kind of readable format. And you know, it helped me a lot trying to like understand and piece together, you know, React Native and Firebase because there's a lot of documentation for it too. It's not just like I built it, it's not like many people use this deck. And so maybe you want to use something obscure or whatever, but you're not going to find as many documentation. But React Native, Firebase Lambda functions, you're going to find many resources and it's going to help you kind of figure that out as well. So that was really good for me because you got to see how to store data. And I'll show you how you do that in the app. Right now I'll just press a dot IN here. I think that's a pretty cool feature. You can just press period in the GitHub repository and it opens up the Visual Studio code in the browser. That's a new feature from like four years ago. Four years is not a new feature. So basically you have like these screens, right? And you have like, so you maybe you'll have like a request or a pending request screen and you basically have these hooks called like use Firebase and use Firestore. And actually I never used TypeScript before this project, so I learned how to use TypeScript during this project as well. So I had this component called Chat Request and I use TypeScript so it extended Firebase instant extensive Firestore instance. And you can kind of see that it is a type from React Redux Firebase that gives you things like Firestore, set add and get. And then from there I would, I would get, I would say like add to this collections, chat requests, the empty request of who it is and it would be and then a status of pending and then you'd kind of see that like pending requests. The first thing I do is I use state and then somewhere here I remember I say get all the pending requests from this person. And so here I think it is so get Firestore ref run transaction. This was kind of like my counter transaction in case that something happened and I would roll back the transaction from the database and you know, it was, it was quite an eye opening experience, kind of getting to work on my own, you know. And honestly it's right when GitHub Copilot came out. So I was kind of playing around with that a lot. And it was like really fun pair programming with AI at the time. And I was learning a lot. And oh, here was get pending request. So here we are. I have my get method from Firestore. So I said get request from collection chat requests. And I had my fire names here in my constants. My. So everything was like, I was able to organize everything very interestingly and help other people could read it and. And see right away. And the reason why I put my strings in here, where I used to make a lot of typos when I typed. So if I have my variable names and auto completion, it helped a lot. And here was my chat request. So I said basically request. Oh, pending request. Sorry. I said get pending requests. Get requests. A wait. Get on the collection chat requests where the key participant contains me and the key status equals pending. So there's nobody. There is nobody that touched like the accept or deny button yet. And then you get the request pending so that are mine. And then, yeah, basically the code was done, like in a very clean way, as I thought at the time. There's many different ways to do things, but it was easy for me to read and easy for me to navigate through the code. And it was interesting for me. I'm not going to show you much more code. So this was something I learned a lot, like how to modularize code, how to separate things and how, like, actually, like, there's one big app, but then there's small apps within that app that you can kind of separate and kind of use everywhere. So like I always say, create your little treasure chest. Make things that you can keep reusing and reusing and reusing and it'll make your career, like in software development much easier. Yeah, that was something that was good. One of the most important things, right, is I started and then I finished, right? So that meaning I got to start, you know, with there's nothing, right? Well, like, I mean, there are like libraries and packages, but I have to kind of figure out how to do it. And then I learned. And then I finished what I said I was gonna finish. And through that I learned many things, right? I learned how to, you know, think about a problem, think about like, steps in order to like, yes, you can send a chat request, but then from there, what is going to happen? And then you kind of think about all the things, possibilities that are going to happen from there. So, yeah, like a suggestion to the user or if you're you, you watching, you can Actually write out your plan and then actually not just start it, but finish what you say you're going to start, you know, and, you know, I did make a lot of mistakes. Mistakes are gonna happen. And don't be scared to, like, run, like, git, reset hard, maybe not too much, you know, like, if you kind of get too deep into like some kind of. Once you understand the basics of JavaScript, once you get there, you kind of make errors in thinking. Right. And if you start digging a hole, it's not like a reason of, like, not knowing the language or not knowing how to do it. It's more like, I was thinking wrong, let's roll it back and then let's, let's go a different way. Because always think about coding kind of like this. Like, I see other people and they have like, let's say, I don't know, like a small little pen or a small little pickaxe. Right. Trying to pick away at the problem. Pick away at the problem. And, you know, you'll get the problem done in a long time. But sometimes you need to go back in the toolbox and then just kind of get that sledgehammer and just break the wall down. Right. And it's. That's the kind of thinking you have to have. Because don't worry, like, if you have the pickaxe in the beginning, that's the wrong choice in the beginning. Just go back and make a better choice and fix the problem and it doesn't matter you were wrong as long as you fixed it. That's. That's like my best advice for you. Yeah. So, like, that's it. But, you know, like, these are things you're gonna learn, like, through projects. And There's a free JavaScript course coming up that I'm going to teach, and I think some people, a lot of people signed up and I'm very excited for it. And this is the kind of JavaScript course I kind of had it open on accident. I didn't mean to do it. But here we are. You know, it's gonna be for beginners, for kind of experienced people. We're gonna go through JavaScript, HTML, css, react, basics of react, basis of git, do some HTTP requests handling, look through big JSON objects, look through arrays, and make some kind of crud, create, read, update, and delete. And you'll understand, like, every single app is a crud, to be honest. And that meaning, like a Facebook post. You post, you create a post, you can update a post, you can delete a post. You have to get the post later, so that's something. I'm looking forward to it and see you guys there. And just remember, if I can do it, you can do it, too. Coding saves lives.