Kanban Task Management App

Thank you, Glen.

I appreciate your time and for checking through and made such wonderful recommendations and corrections which I will absolutely make all the corrections soon and update you on it.

URL Structure

I haven't heard about slugify, I would have to use it for this project but I have planned to build this project without any external package so I will use javascript for this as you said and apply slugify in my next project

Touch Target

I will change the code to the way you've made the recommedations and maybe even use an icon instead of image.

Edit Task

I didn't notice this issue but since you've told me about it now, I will surely make adjustments on it

Thank you once again for your time in reviewing my project, I appreciate

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