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

Tailwind & react-beautiful-dnd (based on simple Gatsby starter)

p1t1ch 390

@p1t1ch

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Focused on the accessibility for this one with live regions and stuff. Also worked with DnD for the first time. And wrote some tests just for funsies. Hope you enjoy it 😉

Community feedback

@steventoben

Posted

One thing I'd suggest is memoizing components, especially todolist items. Every interaction with anything on the todo list rerenders every single component in your tree, which is pretty unnecessary when not much will be changing.

1

p1t1ch 390

@p1t1ch

Posted

@steventoben Right. Performance optimization was in my todo list (pun intended) but I completely forgot about that. Thank you for reminder!

Updated solution with TodoListItem / Input / NavPanel splitted in separate components. And wrapped TodoListItem in React.memo + passed handlers wrapped in useCallback. It should be much better now

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