Submitted over 3 years ago

Draggable todo app with Fake Backend | Built with React

Connor Z• 5,115

@zuolizhu

Preview site View code

This is a solution for...

Todo app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any feedbacks and suggestions are super welcome!

The todos on the list are fetching from my fake REST api endpoint. I used my json server, it is super easy to setup, highly recommended!

I used Zustand for the statement management. It just works, makes your code super clean and easy to read 🤩.

I used react-beautiful-dnd for the drag and drop function. However it sets each todo to role="button", that's why you will see those 15 HTML ISSUES 🤣.

Hope you like it and happy coding🙌!

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, Connor Z! 👋

Sweet job on this challenge! 👏

The transition between light/dark themes is nice and smooth and I like both the hover and accessible focused states of the checkmarks! 😆

Keep coding (and happy coding, too)! 😁

Connor Z• 5,115

@zuolizhu

Posted over 3 years ago

Thanks! @ApplePieGiraffe 😆I spent a lot of times on crafting those checkmarks, and you just noticed hahaha 🙌!

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@zuolizhu

👍👍👍

Haha—it's funny how much time that nobody knows about we can spend on details like these, sometimes! 😅

Connor Z• 5,115

@zuolizhu

Posted over 3 years ago

@ApplePieGiraffe Yep. It's worth it 😏

Abhik• 4,840

@abhik-b

Posted over 3 years ago

Excellent 👏👏👏 You have really done a great job Connor! It's super smooth to use and animations are just awesome👌

Keep it up 💯

Connor Z• 5,115

@zuolizhu

Posted over 3 years ago

@abhik-b Thanks ☺️!

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