Welcome to Jeffin's Website
HW1
1.1 I spent a lot of time, like around 5-6 hours on this assignment
1.2 Figuring out the test cases took the most amount of time for me
because they kept failing for every tiny detail.
1.3 I struggled on the test cases the most. I think something that can be improved is to not require test cases for this assignment. I believe they are unnecessary because they dont provide too much value in coding in general. Test cases are super sensitive and any tiny mistake can cause your test to completely fail, even if the code is fine.
2.1 Some of the bugs that type script helped me prevent is when I accidently performed incorrect methods/functions on types that dont take those functions/methods. Typescript helped me realize that i was performing an illegal operation on numbers, or string, etc before it happened. Some holes in the system is that typescript sometimes requires types for items that dont need to be specified with a type or it says there is a type error when there isnt one, so you have to sometimes give 'any' type
2.2 Some values that i struggled to type correctly were values that i retrieved from the sql database. Sometimes its tough to know the type of these values and it causes an error. The topic that I still struggle a bit to understand is rendering using Usestate. Its just a bit hard to comprehend
3.1 I tests felt a bit boring, like i was just doing busy work. Every time I did any sort of development, I had to go back and write a test to prove it. I felt like this just increased the development time a lot without providing any decent improvements to the code.
3.2 My tests did help me find some small bugs like when I forgot to parse an array for the Id. The test reminded me that it is an array and i needed to use dot notation to get the value.
3.3 Something I would do to structure my testing differently is to make sure I remember to start off by clearing the database before running the next test. I forgot to do this at first and this causes a bunch of bugs that were difficult to solve. Next time i will make sure to first create a function that is called before each test and that clears the database.
HW2
1.1 I added cors middleware so that the front end and back end can communicate without getting blocked by a cors policy error in the browser. I added an 'api/' for each endpoint in the backend so that i can separate out any endpoints from the api. To structure it differently in the future, I would start by making sure the paths for endpoints are specific and organized. So any api endpoints would get /api and other type of endpoints would get different paths that are specific for them. If I have a separate back end and front end that run on different servers, then i would also make sure to add the cors middleware early on so that i dont waste time with that bug later.
1.2 Yes, I also handled some validation in the client side. Something i validated were that the attributes: title, author_id, pub_year, genere, name, and bio were entered by the user. The pros of using front end validation is that you get immediate feedback and reduced server load. The cons are that the validations cant be too complex. The pros of just server side validation is that you can run complex validation methods that confirm that everything is working correctly. The cons are that you dont get immediate feedback and its heavy on the server.
2.1 My experience was pretty good overall. Managing state with useState was pretty simple and it allowed me to easily update the front end for changed and track everything by just looking at the front end. One struggle is that handling async behavior with useState was a bit challenging at first because I dont have too much experience with use state or async.
2.2 Using types was a good experience because they helped me to write clearer and organized code that had less runtime errors. Types helped me catch some very minor bugs like passing the wrong type variable and missing fields in api. I didnt have to do too many manual annotations but there was some needed for api response types. I did not resort to using any often. I tried to use it as little as possible and only used it for complex parts where type was holding me back.
3 Some of the similarities are that a lot of the logic and syntax were similar because typescript is based on javascript, so not too much of the code was very different. One difference is that using typescript was a bit cumbersome since you have to clearly define the type instead of having javascript infer the type for you. Another difference is that I got less run time errors since typescript forced me to write more organized and type specific code. Another difference is that reacts components made it significantly easier to export parts of your code and use it in other files quickly. The typescript and react was a bit harder because it can be tough at first to manage all of the type logic. Also, there is a bit of a learning curve with react so that made it hard. I liked the typescript and react more because it helped me to improve my coding skills by writing more efficient and clear code. Overall, the experience was very good because i significantly improved my coding skills and learned some very new tools that will help me in my career.
HW3
1.1 I integrated editing and deletion directly into the main book display by placing a pencil icon for editing and a cross icon for deletion next to each book title. Clicking the pencil icon takes the user to an edit screen and pressing the X takes the user to the deletion screen. I chose this design option because it is the simplest option and easiest for the user to use. Instead of navigating to a whole different screen and finding the book to delete, the user can just press on the icon from the same screen.
1.2 Alligning the icons and ensuring they fit neatly within the Material UI layout required some trial and error and was a bit difficult. Integrating react router took some time too. Other than that, everything else was not difficult to do.
2.1 Refactoring my existing ui to use material ui was a bit difficult because i dont have too much experience with material ui. Therefore, there was a learning curve and some difficulty at first. Some difficulties i faced were adjusting the default styles to use the sx prop. Understanding how to do this and how it worked was a bit of a pitfall at the start. I was able to overcome everything by reading more into material ui.
3.1 Adding the editing endpoints and tests were not difficult for me because I already had plenty of experience with the post endpoints and tests. Since the editing endpoints had a very similar structure to the post ones, I did not really face any trouble translating over to the editing endpoints. Creating the tests were also very similar and straightforward. My experience with the post endpoints definitely did make the editing endpoints experience smoother. I spent a lot less time trying to understand the basics and debugging, and was able to code everything very quickly and efficiently.
HW4
1.1 The biggest struggle I face was managing the authentications state. I wanted to make it so that authentication persists so that users will not access pages like adding a book without being logged in. I had to make it so that login status was checked before rendering protected routes. This was very difficult at first and resulted in many authentication errors but I was able to figure it out.
2.1 Handling user authentication was a very difficult challenge at first. I faced many issues like cors policy issues and problems with the cookies. This caused a lot of time consumption because it was difficult identifying where the problem was occuring. Eventually, through debugging I was able to idenitfu the issue and then solve it by configuring the cookies properly.
3.1 I prevented XSS by cleaning user input, limiting where scripts can run, and using built-in protections in React. I also set security settings to block harmful scripts.
3.2 I mitigated CSRF attacks by using http only cookies for authentication and requiring credential for sensitive requests. I made sure authentication was prioratized and all pages an endpoints were protected behind an authentication wall.
3.3 I did not implement rate limiting because I was not able to get my code to successfully run in production despite countless attempts.
3.4 I used access control allow origin in the express app using cors() middleware. I used this to determine which domains can access the apis and preventing unauthorized requests. I also used set-cookie with httponly, secure, and samesite to prevent the tokens from malicious attacks.
3.5 I used authentication middleware to force protection and authentication to access an api routes. I configured cors to restrict requests from unauthorized and malicious origins. I also made sure that accessing any screens or routes will redirect to the login first, and i prevented login from creating the same account multiple times. This also slightly helps with malicious account creation.