Design comparison
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
- @bradvatnePosted over 1 year 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
1@GlenOttleyPosted over 1 year 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
0
Please log in to post a comment
Log in with GitHub
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