Hi @Angelxv01! Here's a short code review for your Full Stack course project. The comments in this review are just suggestions for improvements, which you can take into account in this or in the future projects, if you want to. You don't have to do any changes in this project based on these comments to get the credits.
User experience
What did I do?
I logged in with the test user
I Browsed the list of boards on the home page
I tried the search feature on the home page
I created a new board
I opened a board add added some cards, edited card information, and moved the cards around the board
I logged out
Experience
The application's user interface is very stylish and easy to use. Excellent job! 🚀
The search feature doesn't seem to do anything. For example, on the home page I would assume it to filter the boards based on the name or something similar
The board UI is really intuitive, everything works just like I would expect
A tiny nice-to-have feature: I usually submit forms by pressing the enter button, because it is quicker. At the moment I usually need to push the submit button. The easy way to achieve this is to wrap such forms (some fields and a submit button) with a form element and attach a onSubmit handler to the form
I wasn't able to re-arrange the cards on the list in the board view. The dragging works but once I release the card it will end up in its original place
Click the user's avatar changes the cursor as a pointer which would indicate it to be clickable. However, clicking it doesn't do anything
Generally, clickable elements should be buttons, links, or have a role="button" attribute. For example, the logout icon is a span and in accessibility point of view it isn't clickable even if clicking it logs the user out
Code
The front-end code is well organized, great work!
Good use of hooks! These will simplify the components' code
Using fragments would simplify these GraphQL queries a lot
This and this query is quite similar. You could use the @include directive to conditionally include the boards field
Instead of referring the theme properties like this you could simplify the use of the Text component by just accepting the theme property names:
In addition, e.g. in fontSize="500" the "500" sounds weird, like what's 500? Instead, you could use some semantic alias such as fontSize="medium" which is much easier to remember. Btw, you might be interested in Styled System library
The back-end code is also well organized, nicely done!
The GraphQL schema definition is organized nicely into separate files
Good use of data loaders in the resolvers
Summary
The "Trello clone" application is really well implemented, the UI is very polished and all the features work as the user would expect. The project's code is well organized as a whole and the general code quality is high. Very good job!
Hi @Kaltsoon thanks so much for the review, I really appreciate what you think about the project.
And thanks a lot for the suggestions, I’ll surely take them into consideration in next fixes!
Full Stack project review
Hi @Angelxv01! Here's a short code review for your Full Stack course project. The comments in this review are just suggestions for improvements, which you can take into account in this or in the future projects, if you want to. You don't have to do any changes in this project based on these comments to get the credits.
User experience
What did I do?
Experience
onSubmit
handler to the formrole="button"
attribute. For example, the logout icon is a span and in accessibility point of view it isn't clickable even if clicking it logs the user outCode
The front-end code is well organized, great work!
Good use of hooks! These will simplify the components' code
Using fragments would simplify these GraphQL queries a lot
This and this query is quite similar. You could use the @include directive to conditionally include the
boards
fieldInstead of referring the theme properties like this you could simplify the use of the
Text
component by just accepting the theme property names:In addition, e.g. in
fontSize="500"
the"500"
sounds weird, like what's 500? Instead, you could use some semantic alias such asfontSize="medium"
which is much easier to remember. Btw, you might be interested in Styled System libraryThe back-end code is also well organized, nicely done!
The GraphQL schema definition is organized nicely into separate files
Good use of data loaders in the resolvers
Summary
The "Trello clone" application is really well implemented, the UI is very polished and all the features work as the user would expect. The project's code is well organized as a whole and the general code quality is high. Very good job!