Coding

This is my website

HW 1

Coding

How long did you spend on this assignment? If you don’t remember, give a rough estimate. It’s okay if you spent very little/a lot of time on the assignment — answering this question honestly will help me figure out how to balance out this course.

It took me 3 hours to complete the assignment.

Where did you spend the most time? Fixing configuration, figuring out TypeScript, designing your API, writing tests, debugging your request handlers, etc.?

I would say I spent most of my time on designing my API call structure and deciding on what things to check, and also to write test cases.

What did you struggle with the most? What would’ve improved your experience on this assignment?

I struggled with making some test cases pass, but that was a fault I made myself and was ignoring a tiny piece of detail.

TypeScript

Keep track of the bugs TypeScript helped you catch and the ones it didn’t catch. What are some of the issues TypeScript helped you prevent? What are some of the holes in the type system?

I think TypeScript helped me catch some bugs that I would not have seen coming. The passing of arguments as the correct type using Zod was really helpful.

What kinds of values did you struggle to type correctly? Are there any TypeScript topics that are still confusing you?

I think the starer files were very helpful and I understand majority of typescript.

Testing

What was your experience writing tests? Was it boring, soothing, rewarding? How did they affect your development process?

I have had a lot of experience with testing, so it was fun writing test cases. It helped me a lot in my development process.

Did your tests help you find any bugs? If so, which ones?

Yes, the one where I was getting all authors. Earlier, it wasn’t working as it should have been working.

How would you structure your testing differently in the future? What did you learn while testing?

I think I would add more robust testing and add more test cases in the future with a lot of boundary testing. I learned that testing is really important and an integral part of software development.

HW 2

Design

Keep track of the changes you made to your back-end as you implemented your front-end. What changes did you need to make and why? Would you structure your back-end differently in the future?

The only changes I made to the link of my api. I would not structure my backend any different.

Did you also perform client-side validation or did you rely on server-side validation alone? What are the pros/cons of making either choice?

I did a mix of both. The pros and cons of making client side verification is speeds up user experience by catching errors before sending data to the server. However, it’s less secure since users can bypass it. The pros and cons of server-side validation is that it is more secure, but it can lead to a slower user experience since it requires a round-trip to the server.

React

What was your experience manipulating state with React components (especially with the useEffect hook)? What kinds of things did you struggle with?

It was an interesting experience as I learnt a lot. Some of the struggles were ensuring state changes trigger proper re-renders, and handling asynchronous data fetching.

What was your experience using types with the front-end? Did they catch any bugs? Did you have to make a lot of manual annotations? Did you resort to using any frequently, and if so, why?

I don't think they caught any bugs for me. They also did not make a lot of manual annotations.

Compare and contrast your experiences writing an SPA front-end with React to writing a MPA front-end like we did in CS375. Which was harder? Which did you enjoy more? How did you feel about the experience generally?

I think single page was easier but it was more fun working on MPA as it was a little challenging and I got to lear a lot of things along the way.

HW 3

UI

I integrated book editing and deletion by adding an edit and delete button for each row in the table. Editing converts fields into input fields. This design is intuitive and user-friendly.

Struggles

I struggled with preloading book data into input fields and handling save operations. Implementing a popup also took some effort.

Material UI

Refactoring to Material UI required changing all elements (e.g., H1 to Typography). I thinkthe pitfall I fell into was learning how to use Box.

Editing Endpoint

Adding the editing endpoint and tests was time-consuming. However, writing POST endpoints previously made it easier since I knew the necessary validations.

HW 4

UI

What did you struggle with when adding logins and authorization to your front-end?

I struggled with managing authentication state properly across components. Ensuring protected routes were accessible only to authenticated users required extra logic.

Login Endpoint

What did you struggle with when adding logins and authorization to your back-end?

Managing secure password storage and authenticating while storing tokens in the storage.

Security Audit

XSS Vulnerabilities:

I think my website is not vulnerable to XSS attacks. I have implemented parameterized queries.

CSRF Vulnerabilities:

My app was not vulnerable to CSRF attacks.

Rate Limiting:

I added rate limiting to my application code using the express-rate-limit package in Node.js. The command I used to install it was:

npm install express-rate-limit

Then, I configured it to limit repeated requests from the same IP:

const rateLimit = require('express-rate-limit');
const limiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15 minutes
    max: 100, // Limit each IP to 100 requests per window
});
app.use(limiter);

HTTP Headers:

I set security headers using the Helmet middleware in Express.js to protect against common web vulnerabilities. The headers I configured include: