Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

kanban web app with context api and reducers with typescript and immer

#accessibility#bem#react#typescript#vite
Samuel 840

@Samuel-Amaro

Desktop design screenshot for the Kanban task management web app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
5guru
View challenge

Design comparison


SolutionDesign

Solution retrospective


This project was very challenging from the start, it took longer than I had estimated, the biggest challenges were building accessible components with focus management, in addition to the data structure for the client-only boards, there were many challenges, which I encountered when trying to build this project, however it was gratifying to see the result, feel free to evaluate the code and give me tips on what I can improve.

Community feedback

P

@christopher-adolphe

Posted

Hi @Samuel-Amaro 👋

You did a great job on this challenge. 👍 I had a quick look at the application as well as the code base and here's my feedback:

  • The buttons for the dropdown menus are too small (4px by 20px) and as a result, this reduces the both touch and click accuracy. For better user experience, the recommended size of icon buttons should be in a range of 42 to 72px.
  • I think the Content component file contains too many sub components. You could have moved ColumnBoard, TaskList and CardTask in dedicated component files under the components directory. These components indeed compose your content but each of them have different responsibilities which is why I think good to separate them. However, this one is only a personal preference 😉 I know React gives you the freedom of organising your folder structure any way you want.

I hope this helps.

Keep it up.

Marked as helpful

0

Samuel 840

@Samuel-Amaro

Posted

@christopher-adolphe Thank you very much for the tips, I will refactor the points mentioned and apply your recommendations soon.

0
P

@christopher-adolphe

Posted

@Samuel-Amaro you are welcome.

I'm happy to help and glad to see this was helpful to you. 🙂

See you on the next one.

Best regards.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord