Skip to content
Submitted about 4 years ago

Draggable todo app with Fake Backend | Built with React

Connor Z•5,115
@zuolizhu
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Todo app
  • HTML
  • CSS
  • JS
3intermediate

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
    @ApplePieGiraffePosted about 4 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)! 😁

    1
    Connor Z•5,115
    @zuolizhuPosted about 4 years ago

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

    0
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    @zuolizhu

    👍👍👍

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

    0
    Connor Z•5,115
    @zuolizhuPosted about 4 years ago

    @ApplePieGiraffe Yep. It's worth it 😏

    0
  • Abhik•4,840
    @abhik-bPosted about 4 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 💯

    1
    Connor Z•5,115
    @zuolizhuPosted about 4 years ago

    @abhik-b Thanks ☺️!

    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