PERN.TODO

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:

1. 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.

2. 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/]