CS 478 Homework 2 Reflection

1. Node

Keep track of any changes you made to your back end as you implemented your front end. What changes did you need to make and why? If you could go back in time, is there anything you would change about the way you approached making your back end for HW1?

I made a few changes to my back-end as I worked as on my front-end. Some of the changes were explicitly in the assignment directions, like changing routes to begin with /api for Vite. I tweaked the GET books API handler to support substring searches for my front-end search bar using SQL's LIKE operator. I went back and fixed my Zod schemas from Homework 1, where I made publication year and genre for books required instead of optional, also adding more detailed error messages. If I could go back to HW1, I would've thought more carefully about my Zod schemas and put them in a separate file like I did with Homework 2 to make this homework easier.

When adding books and authors, did you only use server-side validation, or did you also use client-side validation? What are the pros/cons of making either choice?

Most of my validation is server-side. I have the front-end send the form data to the back-end using Axios, which can catch errors through my Zod schemas. It returns a 400 error and the front-end displays the error message to the user. The pros include that malicious users can't bypass validation (unlike with client-side validation) and it keeps the validation logic clean and in one place. The cons are that the feedback is slower since it requires a round trip to the server and increases server load. If I had went with client-side validation, the pros would be instant feedback for the user and saving server resources, but it's susceptible to malicious users like I mentioned before.

2. React

What was your general experience using React? What did you struggle with? What did you enjoy?

React is great, but I was super rusty. Understanding useEffect and useCallback was a bit of a pain. At first I didn't realize I was getting infinite rendering loops until I ran ESLint, which alerted me to them. I had to go back and read the page on fetching server data here, but even then I ran into some errors and had to give it a few rereads. I tried to figure out useCallback, but I opted instead to go with an IIFE. I enjoyed how easy it is to keep the UI in sync with the data, since the table automatically refreshes without me having to modify the DOM manually.

Compare and contrast writing React versus writing plain JS DOM manipulation code as you did in CS375. How was your experience different? Which do you prefer and why?

Back in 375, we used getElementById and manually added and removed elements. In 478, all we have to do is modify the state and React handles updating the DOM for me. I definitely prefer React. Even thought the setup itself is more complicated, it can handle complex user interactions and interfaces much cleaner and is less error-prone than event listeners and manual DOM manipulation.

What was your experience using types with the front-end? Did they catch any bugs? Did you struggle to type things correctly? Did they feel helpful, useless, tedious?

It was a mix of helpful and annoying. It helped when I tried to access properties that didn't exist on the book or author objects, but it was also annoying for things like the error object (I just had ESLint ignore it). I didn't really struggle with typing that much - although it is a bit tedious, I'm already used to static typing from languages like Java, so it wasn't too bad.

3. LLMs

Did you use LLMs to help you write your code? If yes, explain how you used them.

I used Gemini like on the last homework to just help me write boilerplate code. It was also great for helping me with the CSS, which I find tedious more than anything else. It also helped teach me the useEffect stuff I struggled with earlier.

If you used LLMs, reflect on how they changed your experience of coding. Did they make it more or less fun? Did they save you time? How do you think they affected what you learned from this assignment?

Definitely helped me save time. It works great for quick explanations or fixes when I hit a wall. I think it helped reinforce things I was learning about React already, but it may have indadvertently harmed my understanding of small things like CSS. I still took the time to understand what it's generating though to mitigate this.