Fullstack-project review

[ShootingStar91]

Fullstack-project review

This is a review of your fullstack practice project. You do not need to implement the suggestions for improvement mentioned in this review to receive your credits.

User experience

• The layout is nice, there's a simple and neat style. The functionalities are easy to use and they work, I did not encounter bugs. The page is responsive, and the navigation menu changes to suit mobile display better. I only have some minor suggestions for user experience or layout, but in general the page is already quite polished and good-looking.
• When clicking a book to view the details of it, there is a couple seconds time that shows text "No work selected" while waiting for the response. This could be replaced with some loading icon for a smoother experience.
• For responsivity, the individual book's view seems to break it - the text width goes way out of bounds of screen, also causing the navigation menu to become much wider than necessary, requiring horizontal scrolling.
• Tiny style adjustments would finalize the polished feel of the website:
  • I found the dark notification to be a bit unfitting for the visual feel, and it made the page move up and down when it appears and disappears.
  • The modal that opens when adding a book into a list is much wider than the rest of the page on a wide display. Additionally, the radio buttons and their labels should have some padding between them.

Code

• The backend is good, well-organized code, and it implements things learned taught in the course well, for example middlewares are utilized for authentication and authorization, error handling is simplified with 'express-async-errors'.
• The backend has some API-tests too, good.
• Frontend also is idiomatic, well-organized React. Redux Toolkit is used well for handling state.
  • The queries and handling their errors and results produce some repetitive boilerplate code. This is often best handled by external libraries. Redux Toolkit has an addon called RTK Query, which does this very well. After writing the necessary code for constructing the queries, it generates hooks that greatly simplify error-handling, caching, adding authorization headers to each query and more.

Overall

The project seems to be successfully scoped - all the implemented features work well, and there are enough features to make it feel like a complete application. It presents a good user-experience, nice style and the code is good React and Express as taught in the course. Great job! 💎

[seanodaniels]

Thank you for putting so much effort in reviewing my project.

• a couple seconds time that shows text "No work selected" I cannot believe I missed that and will review the issue.

• the text width goes way out of bounds of screen,... requiring horizontal scrolling. That is a critical error! I will look into that.

In general, I avoided packages and opted for the experience of coding everything myself (including pagination. my implementation is unwieldy, but it works), but I have started a document on useful packages to use in the future. I will add RTK Query to it.

It is obvious you put a good bit of time into reviewing my project, and I really appreciate you. Thanks again.

~ Sean O'Daniels

On Sun, Apr 28, 2024 at 3:29 AM Arttu Kangas @.***> wrote:

Fullstack-project review

This is a review of your fullstack practice project. You do not need to implement the suggestions for improvement mentioned in this review to receive your credits. User experience

• The layout is nice, there's a simple and neat style. The functionalities are easy to use and they work, I did not encounter bugs. The page is responsive, and the navigation menu changes to suit mobile display better. I only have some minor suggestions for user experience or layout, but in general the page is already quite polished and good-looking.
• When clicking a book to view the details of it, there is a couple seconds time that shows text "No work selected" while waiting for the response. This could be replaced with some loading icon for a smoother experience.
• For responsivity, the individual book's view seems to break it - the text width goes way out of bounds of screen, also causing the navigation menu to become much wider than necessary, requiring horizontal scrolling.
• Tiny style adjustments would finalize the polished feel of the website:
  • I found the dark notification to be a bit unfitting for the visual feel, and it made the page move up and down when it appears and disappears.
  • The modal that opens when adding a book into a list is much wider than the rest of the page on a wide display. Additionally, the radio buttons and their labels should have some padding between them.

Code

• The backend is good, well-organized code, and it implements things learned taught in the course well, for example middlewares are utilized for authentication and authorization, error handling is simplified with 'express-async-errors'.
• The backend has some API-tests too, good.
• Frontend also is idiomatic, well-organized React. Redux Toolkit is used well for handling state.
  • The queries and handling their errors and results produce some repetitive boilerplate code. This is often best handled by external libraries. Redux Toolkit has an addon called RTK Query https://redux-toolkit.js.org/rtk-query/overview, which does this very well. After writing the necessary code for constructing the queries, it generates hooks that greatly simplify error-handling, caching, adding authorization headers to each query and more.

Overall

The project seems to be successfully scoped - all the implemented features work well, and there are enough features to make it feel like a complete application. It presents a good user-experience, nice style and the code is good React and Express as taught in the course. Great job! 💎

— Reply to this email directly, view it on GitHub https://github.com/seanodaniels/BookHarbr-backend/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAF4SNXUD36LSBZRY3TDZP3Y7SQNRAVCNFSM6AAAAABG4YL74OVHI2DSMVQWIX3LMV43ASLTON2WKOZSGI3DONBQGU2DENI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

-- ~: Sean M. O'Daniels

[seanodaniels]

When clicking a book to view the details of it, there is a couple seconds time that shows text "No work selected"

FIXED: Added in "loading..." message.

the individual book's view seems to break it - the text width goes way out of bounds of screen

This only happens if the content contains a long string of unbreakable characters - such as a really long URL. In such a case, the parent div conforms to a size to accommodate it.

FIXED: added CSS to wrap text of excessive length: word-break: break-all;