This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their 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
- Solution URL: My Solution on Frontend Mentor
- Live Site URL: Live Site
Feel free to fork or clone directly :). You could drop a star too if you like the solution π
Note: With the following commands, project will clone inside current directory.
git clone https://github.com/Multimarix/todolist-app-w-dnd.git .
npm install
npm run dev
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
- Typescript - Typescript
- Tailwind Css - For styles
- Zustand - State Management Library
I learned to use a couple things for the first time in this project. Some of them were, Zustand and Jotai for state management in the application. I also used @dnd-kit for making draggable and droppable copmonents for the first time in this project. In short, it was a really enjoyable learning experience for me this oneπ.
set((state) => {
if (state.activeTab === "all") {
state.todos = reArrangedTodos;
state.allTodos = reArrangedTodos;
} else if (state.activeTab === "active") {
state.todos = reArrangedTodos;
state.activeTodos = reArrangedTodos;
} else {
state.todos = reArrangedTodos;
state.completedTodos = reArrangedTodos;
}
});
To be honest, this is not where I want this project to finally be. I plan to tinker with the @dnd-kit library a little more and make some improvements to the UX of the application. I plan to provide support for checking and unchecking the checkbox with your keyboard alone as I think that would lead to better UX. That is just one among the few updates I want to make to the application going forward.
- The dnd kit Official Docs - The dnd-kit official docs website is really good in my opinion.
- dnd-kit codesandbox examples - This was a good one for reference and for demos but the example I saw for my use-case wasn't really beginner friendly. I wish it could be a bit better.
- The Zustand Github Repo Docs and examples - This was another good reference point for using Zustand. I really like Poimandres now.
- Github - Di-void
- Frontend Mentor - @Multimarix
- LinkedIN - Don Akhirebhulu
Thanks to Frontend Mentor for the Project once again. I really enjoyed itπ€πΎππΎ.