/frontend-mentor-todo-app

Frontend Mentor "Todo App" challenge solution

Primary LanguageTypeScript

Todo app

Live | Solution | Challenge

Solution for a challenge from frontendmentor.io.




🚀 Technologies used:

React iconTypescript iconStyles Components iconnetlify icon

📄 About The Project

The classic todo app with a few twists! This app includes a dark/light theme toggle and drag & drop reordering for anyone wanting an extra test.

😀 User Can:

  • View the optimal layout for the app depending on their device's screen size
  • 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
  • Drag and drop to reorder items on the list
  • Undo and Redo

🎓 What I learned:

I wanted to practice concepts I've recently learned from the Frontend Masters State Management in Pure React. Specifically, "Undo/Redo" functionality. Also I decided to use Styled Components to practice using props.

Acknowledgments

A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!