PERN.TODO

Benjamin Cho — Thu, 31 Mar 2022 19:39:42 +0000

Finally - my first full-stack web app - deployed for the world (probably just me and my wife) to see. Check it out here:
[http://pern-stack-todos.herokuapp.com/]

Like most other self-taught developers, I was more intrigued by front-end technologies from the beginning. People naturally gravitate towards visual changes, and I was no exception. But as I started to learn more and more about web development in general, backend and database started to lure me in slowly. Of course, I was and still very much am intimidated by it all - but I've taken a vow (a half-hearted one) to deliberately butt heads with things that strike fear in me. Backend and database are just two of the many things that do so.

I decided to follow a tutorial video on how to get the server set up using Postgres, Express and Node. I built up the client side how I wanted to build it using a lot of the knowledge that I gained through building Budgety's front end. I used MUI for components coupled with some inline-styling because I didn't want to spend too much time writing custom CSS like I did for Budgety, and it proved to be great decision that allowed me to focus more on how to work with the data coming from the database. I wrote the client side methods to hit the backend API routes, then used React Query's useQuery hook to fetch the data. Mutating the data was a bit tricky in two areas:

At first I used the useQueryClient hook in each child component that needed to mutate the data. I realized that doing this led to my website making infinite requests, which I realize...is bad. So I ended up moving defining all the mutate functions and queryClient to the main App.js page and passing down the methods as props to the respective child components.
I could not get the mutateAsync function to work with the PUT method inside the edit todo modal. When I sent back the new data from the modal input field to the backend route, it kept replacing the todo with an empty description field instead of the new description that was passed along inside the request body. This is something that I'll need to dig deeper into. For now, I just ended up calling the client side API method directly and invalidating the cache holding the list of 'todos' as soon as the user submits the edit todo form so that data gets refetched .

One thing that I've noticed is that I haven't really been seeing the benefits of using a relational database like Postgres in this simple app. I think in order to really see how a relational database would shine over a non-relational database such as Mongo, I'd have to implement authentication for the user to sign in and have a different database/table per user. This will be one of the next features that I'll be working on.

Live: [http://pern-stack-todos.herokuapp.com/]

Budgety Journey

Benjamin Cho — Fri, 25 Mar 2022 16:03:32 +0000

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.

DEV Community: Benjamin Cho