Tailwind + TypeScript + React.js + Redux Toolkit | Todo App

Hi All,

The users are able to:

• Add new todos - if they try to submit an empty form, they will receive an error.
• See already added todos after reloading the page - they are storoed within the localStorage.
• Mark todos completed and then make them active again.
• Delete single todos.
• Delete all of the compeleted todos in a bulk.
• See how much items they have left/completed.
• Filter between all todos, active todos and complete todos.
• Drag and drop the todos to reorder the list.
• Toggle between light and dark mode - initial mode is set up based on the user's preferences.
• See hover and focus states for all interactive elements on the page.
• View the optimal layout for the app depending on their device's screen size.

I used Tailwind for styling, form validity is checked with a custom hook and the overall state management is handled via Redux Toolkit. Drag and drop events were done using React Beautiful DnD library.

Happy Coding 🎃