Project:Intermediate Code Challenge - Build To Do App

Overview

I enjoy building projects and further developing my skills, and this is a side-project as part of that endeavor. It is one of Frontend Mentor’s coding challenges with an Intermediate level. The challenge is to build out a To-do app as close to their provided design mocks and listed requirements, using any tools you’d like – I made it with React.

I wanted to make the app more accessible*, so in my version I added draggable buttons for reordering the list. I also made the alternative design choice of swapping the sun and moon buttons for the light/dark theming.

*I plan to further develop this app with more features, such as editing tasks, and making the list-reordering accessible(keyboard functionality+voice-over). I could have used an external source like the React library react-movable, but I’d prefer the challenge of implementing it myself. Thus, to be continued ;).

Role(s)

Frontend Developer

Skills / Tech Tags

Features

  • View the optimal layout for the app depending on device’s screen size
  • See hover states for all interactive elements on the page
  • Add new todos to the list
  • Mark todos as complete
  • Delete todos from the list
  • Filter by all/active/complete todos
  • Clear all completed todos
  • Toggle light and dark mode
  • Bonus: Drag and drop to reorder items on the list

Tasks

  • Break into parts -> React components
  • Implement form for creating tasks
  • Use hooks for updating states
  • Match layout and look to design mocks
  • Make responsive
  • Implement dark/light theme toggling
  • Implement filters of list items and display

Mobile Version

Original Design Mocks

To do app design mocks for desktop
To do app design mocks for mobile

More Projects