Hi guys This is my first Guru task on this platform which I would say it helped me in understanding some concepts and logics. I would be glad to welcome your reviews about this projects, I am a learner who is ready to learn from whoever wish to teach me
Hi Yusuf,
Congrats on completing this project - it's definitely not an easy one! The core CRUD (create, read, update, delete) functions work well, and I can see you have written all of your CSS from scratch, without relying on a component library which is a great way to really nail down the fundamentals of web development.
I can make some suggestions if you wish to fix some bugs in your solution:
URL structure
Currently, whenever a new board is selected, that boards name is used in the URL string. Whilst this is great for linking others to a particular board, the current implementation will return a 404 'Page not found' error, this is because the URL contains spaces.
The convention for URL strings is to use hyphens to separate words, along with all lowercase characters, e.g. /platform-launch. Since you are likely to be setting these URL strings programmatically, you could use some custom JavaScript code to handle this, although personally I would opt for using a package such as slugify
Touch targets
If we view the app on a mobile device, the board name is rendered as an h1 tag, with an img tag used to display the up/down caret, which handles the toggling of the board selection menu. Whilst this is possible to click with a mouse and some dexterity, it will be awkward to interact with on a touch device, especially for less able users. Furthermore, an img tag with an event handler like this does not convey any semantic meaning to users using assistive technologies such as a screen reader.
Instead, I would suggest using a button tag, with the caret img nested inside. This button element should have the event handler attached. You could also wrap the button in an h1 tag if you wish to preserve the heading styling and semantics.
<h1>
<button role='button' aria-haspopup='true'>
{board name}
<img src='caret.svg' aria-hidden='true' />
</button>
</h1>
Another element where you could apply similar logic would be the triple dots (ellipsis) that toggle the edit/delete board/task menus. These should be button elements with the svg img nested inside. Ideally you should also add some padding to the button element to make the clickable/touchable area larger.
Edit board
Removing columns from the board does not currently work, instead it simply just deletes the column name. The expected behaviour is for the entire column and all of its tasks to be removed from the board. Unfortunately since I am not familiar with Vue nor the structure of your application I cannot offer much advice here, but since this is a piece of core functionality in the application I recommend that you investigate this.
Once again, congratulations on completing this tough challenge!
Glen
Not production ready by any means. Did anyone else notice there is no Edit Column section on the figma docs? Also I improved an auth solution but there is not way to log out ahha. I had fun making it, but I kind of feel like moving onto a new project now. Do you guys think I should just complete it and add a basic login / user profile?
Hey Brad!
Good work on this one, the implementation is nice and responsive. I particularly like that you took things a step further by implementing authentication via supabase, this is something I will definitely look into doing for my own solution. Also the '+ Add a new task' button in the empty columns is very nice too.
I can make a few recommendations if you don't mind.
Add some form validation to the new/edit task/board forms to prevent empty items being submitted.
Your modal implementation does not trap keyboard focus. When a modal is opened, keyboard focus should generally be moved to the first focus-able element. If the user tabs through the modal, the focus should 'wrap' around the focus-able elements, so that if the user presses tab on the last modal element, focus moves back to the first modal element.
Try to make your touch targets larger. For example, your ellipsis (triple dots) which open the edit/delete task/board menus. Whilst these are possible to click with a mouse and some dexterity, they are difficult to use on a touch screen, especially for less able users. I recommend adding some padding to these elements to resolve this.
Keep up the hard work !
