Submitted 10 months ago

MERN stack w/ Typescript + React Query + Tailwind CSS

#accessibility#react#tailwind-css#typescript#express

Glen• 515

@GlenOttley

Preview site View code

This is a solution for...

Kanban task management web app

HTML
CSS
JS

5guru

View challenge

Design comparison

SolutionDesign

Solution retrospective

Well, this one took a while!

I wanted to write all the components for this application from scratch, without relying on component libraries. This presented many challenges, particularly with the extensive use of modals throughout this design.

I also wanted to make the app as accessible as I could, although I still have a lot more work to do in this area. The drag and drop functionality was particularly challenging, despite using an external library (@dnd-kit). The main issue I had was getting this to work nicely with touch devices, since I could not get @dnd-kits 'sensors' API to work as expected.

On the server side, I had a couple of issues pertaining to my database design. I started with defining an array of 'taskIds' on the 'Column' model, then switched to having the identifier on the 'Task' model instead (e.g. 'columnId' field on each Task object). However in the end I found that I needed to combine both approaches in order to effectively write my controllers on the server and optimistic updates on the client. I am not super happy with this approach as it means that there is some duplication of data, which could lead to difficulty in maintaining the database should this app be scaled.

Completing this project has definitely given me some insight into areas that I need to focus on for my continued personal development. Particularly testing, error handling (both client and server) and database design.

Thanks for taking the time to look at this solution, I welcome your questions and any feedback, positive or negative!

Glen

Community feedback

Brad Vatne• 50

@bradvatne

Posted 10 months ago

Hey Glen!

Nice implementation! Great work with the Drag n Drop, I might have to go back and implement it on mine. Awesome job on the animations as well.

You've done a great job so I can only nitpick and say the bit of vertical scroll is kind of annoying and especially if the user has scrolled down and activates a modal, it scrolls up, closes the sidebar, and the modal pops up and its all a bit jarring! A few too many things going on and give it a slightly unpolished feel

The horizontal scroll however is great! Was that in the spec or your own creation? Nice one.

Great work, can't wait to dig into the code tomorrow and check out your drag n drop implementation and see if I can't replicate it in my project! I'll be sure to keep an eye on your future projects, cheers!

Brad

Glen• 515

@GlenOttley

Posted 10 months ago

@bradvatne Thanks, that's a good observation about the scrolling behaviour and something I will definitely take a look at as I continue to work on this app.

Yep the horizontal scroll buttons at smaller viewports was kind of my lazy way to maintain the drag and drop functionality for those using mobile devices. Without these it would be nearly impossible for these users to scroll across to the other columns, since touching a task immediately begins dragging it around (therefore the user would have to find some empty column space in order to swipe horizontally to view the other columns, not good!).

I suspect the 'best' solution to this would be to have the drag and drop functionality on touch devices only activate if the user touches and holds a task. I did try to implement this using the 'activationContstraint' property on @dnd-kit's 'TouchSensor' API, but could not get this to work for some reason. If you do implement drag and drop on your solution using @dnd-kit, I would be very interested to see it, so do let me know!

All the best, Glen

Please log in to post a comment

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