I spent about 5 hours on this assignment. Most of my time was focused on writing meaningful handlers and test cases to build confidence in my API's functionality. The biggest challenge I faced was setting up Jest correctly, especially on Windows. Adjusting the package.json scripts and switching to Git Bash helped resolve these issues, although it required a few tweaks like adding escape characters.
TypeScript didn’t help catch many bugs in this assignment, but it did help when I was typing BookParams and AuthorParams with Express’s Request type. Without TypeScript, I might have missed issues like incorrect query parameter types. However, it didn’t prevent logic errors or runtime issues, so I relied heavily on testing for that. Type-safe coding is still new to me, but I’m getting more comfortable with it.
Writing tests was rewarding because they increased my confidence in the correctness of my code. While the tests didn’t uncover any bugs, they reassured me that my API behaved as expected. In hindsight, using a separate testing database would have made the setup and teardown cleaner. Overall, I learned the value of writing meaningful tests that not only validate functionality but also provide confidence for future refactoring.
I added the /api prefix to my routes for clear separation between front-end and back-end. Validation is done on both sides: client-side for quick feedback and server-side for security and data integrity. If the back-end grows, I’d group routes into modules for better structure.
Using useEffect to fetch data was straightforward, but ensuring the dependency array was correct required attention. I struggled with TypeScript for handling form input changes, especially ensuring types matched name and value. Adding interfaces for API responses caught bugs early, but dynamic form handling was tricky.
SPAs are harder due to state management and hooks, but React’s dynamic rendering is rewarding. I enjoyed SPAs more because they feel modern and interactive, while MPAs were simpler but less flexible.
I integrated the edit and delete features right into the Book List page. Each row now shows an edit icon that takes you to a page where you can update or delete a book. I liked this design because it’s straightforward and users don’t have to hunt for the options—they’re right there next to each book. The only hiccup was making sure the delete action felt safe (so I added clear buttons and confirmation where needed).
Switching over to Material UI was pretty smooth. I replaced my old CSS with Material UI’s components like AppBar, Container, and Buttons. The biggest challenge was learning how to use the sx prop for spacing and styling, but once I got the hang of it, it was all good. The components look modern and keep everything consistent.
Creating the editing (PUT) endpoint wasn’t too bad since I could reuse a lot of the validation logic from the POST endpoint. Writing the tests was easier because I had already set up tests for adding books, so I knew what to expect. Overall, my previous experience made this part a lot simpler.
UI Authorization on the frontend was straightforward. Managing authentication state and protecting routes was simple using React. Login Endpoint On the backend, I initially struggled with cookies, CSRF, and CORS. When I deployed the application, requests failed due to incorrect headers. I had to restructure my request handling to fix these issues.
Security Audit XSS Mitigation The app is not vulnerable to XSS attacks because React escapes JSX values by default, preventing script injection. CSRF Mitigation CSRF attacks are mitigated using HTTP-only cookies for storing JWT tokens, ensuring they cannot be accessed via JavaScript. Rate Limiting Rate limiting is implemented using a middleware package to restrict the number of requests per IP. HTTP Headers The app uses security headers set via middleware to protect against common attacks. These include Content Security Policy (CSP), X-Content-Type-Options, and X-Frame-Options.
Additional Security Measures Passwords are securely hashed using a strong algorithm, and sensitive information like JWT_SECRET is stored in environment variables. Conclusion Implementing authentication and security required overcoming challenges, particularly with backend authorization. Debugging deployment issues helped me understand security configurations better.