This was my biggest project to date...and it was definitely an amazing experience to work with a team of developers on this. The team consisted of two others, Bret and Jonathan, both of whom were integral to the success of this cohort project.
I wanted to make this post to reflect back on the journey, and hopefully this will also come in handy later when I'm interviewing for positions that may ask about my projects. This is definitely something that I want to continue to do as I build more things whether it be on my own or with a team of others.
BIGGEST CHALLENGES:
Prop Drilling and State Management
I've done many small scaled projects where components are only nested maybe 2-3 layers deep. With these projects, it's not a huge deal to drill the states as props and use it. And so I started out this project in the same way. When I initially started creating the components, I'd just use simple useState and useEffect hooks - drill down the props and voila. But as the app grew in size (I know, I know...it's not THAT big of an app, but it's huge to me), I started get overwhelmed whenever we wanted to introduce a new feature or edit an existing feature. I knew it was all possible to do in the back of my head, but it seemed like such a daunting task having to go track down every single state and making sure everything was being passed down correctly.
So I started to look into alternative and more efficient methods. The most glaring answer was implementing some sort of global state with either Redux or a tool similar to it. But I wasn't too familiar with it, and by the time I had realized this was becoming an issue, it was a bit too late to start implementing something new. I did, however, discover that React Query was the better approach to fetching data in React applications. Instead of using multiple useState and useEffect hooks, React Query allowed me to fetch the data more easily and have access to loading, error, and fetching states on the fly. Coupling this with React Router outlet context for my nested routes was sufficient for this project (for now). I would really love to add in some sort of global state management system in the future. Zustand is one that I've been eyeing, but my research continues as well as my learning journey in this regard.
Currency Formatting in Input Fields
From the outside looking in, this seemed like such a simple task. One that I did not think would take us almost 3 days to figure out. Implementing React Hook Form with Yup validator for the first time was pretty straightforward. Having to format the user's input to make it into a currency format, then sending that data after manipulation to the backend..was not so straightforward as I had first thought. I will update more with details on this later, but for now, I'm just glad we were able to fix it :)
TAKEAWAYS:
Typescript will just yell and yell at you with no remorse...but it's for the best.
Before doing this project, I had only heard about typescript. I've read about it in so many job postings and watched so many videos about how it has changed the youtuber's developing lives for the better. Now having experienced it, albeit in a very limited fashion, I can definitely say those youtubers were not lying.
I now view JavaScript as the 'fun' friend who would let you do pretty much anything even if it sounded like a dumb idea. Like the friend who let me stand on the back of his car bumper so that I can hitch a ride to my car that was in another parking lot...and then proceeded to step on the gas pedal and make a sharp right turn while going 40mph. I don't even need to tell you how that ended up. Javascript is that driver friend..He will only tell you sorry and that we probably should not have done that after letting you make the dumb decision. Typescript on the other hand, is that super mature friend who is always nagging you about this and that and making sure your life isn't going off the rails. And although you may get tired of it constantly yelling at you to do it right the first time, you come to appreciate it in the long run. It's the friend that will keep you sane and healthy.
I've been using Git and GitHub incorrectly this whole time.
Prior to this project, I was using GitHub as basically like a USB stick to save my files in. The only Git commands I ran was to make the initial commit and push - only to never look back again at the files. This is probably why I have about 50 repos sitting in my github with most of them collecting dust. Working on a different branch from main or master? It was never an option.
By the end of our project with Budgety, we had made 137 commits altogether with well over 120 pull requests. I started to see early on the power of version control and utilizing tools like Git. I realized very quickly that I've been doing things wrong my entire (only a few months...) web dev life. With this newfound power, I feel as if I can go back to my old projects and start dusting off and polishing it to look/feel/perform better than ever. And I've already done so with my CryptVerse app that I'm now showcasing in my resume.
Top comments (0)