- useReducer()
- Custom hook
- ThemeProvider
- Responsive Design
- Local Storage
- Framer Motion
This is a classic task manager application with some extra functionality perks. I've included a dark/light theme toggle and the ability to drag and drop tasks to reorder their priority. I also added a bit of animation to provide more interactivity throughout the application and a modal to confirm all deletions.
Users can...
- Add new tasks to their todo list and view them upon refreshing the page
- Edit existing tasks on the fly
- Delete existing tasks
- Mark existing tasks as complete
- Delete all tasks marked as completed
- Drag and drop tasks to reorder them
- Filter tasks by all, active, and completed tasks
- Toggle between dark and light theme
- View the application on desktop and mobile devices
- See how many todos remain to be completed
- See how many characters remain for their typed task
I built this project to practice React core concepts, but also to get more comfortable with state management and the useReducer hook, custom hooks, styled components, and drag and drop technology.
Feel free to contact me at [email protected] if you have any questions or feedback.
You can view more of my projects at https://github.com/Mully7773.