Conversation
…ted card with a placeholder for now
…e card if no tasks, added total tasks count and fixed styling bug by taking away strictmode, also fixed accessibility
Npahlfer
left a comment
There was a problem hiding this comment.
Your todo app looks great! Nice with the snake background and that sunny “no tasks” image.
You’ve nailed the requirements with Zustand, persisting to local storage and you’re showing every task, completed or not, with the ability to toggle, add, and remove items. The responsive styling via styled‑components and the breakpoints in theme.jsx work smoothly for mobile and desktop, and you’ve added an alt text to the sun image, good for accessibility!.
A small thing on the confetti animation: it fires when you complete a task, but the resetConfetti state isn’t actually reset because you’re passing the function inside the timeout without calling it. Changing handelComplete to call resetConfetti() directly (or remove the timeout) will clean up the flag and let the confetti play only once per completion. Right now when you reload the page with completed todos it fires directly :).
Other than that, everything else looks solid. The “complete all” button or a category would be a nice thing to add, but its good as is!
Overall, the app feels polished and user friendly. Keep up the good work 🌞
Netlify: carolinas-todo-app.netlify.app
I implemented global state management using Zustand with persist to keep tasks saved in local storage. I also added a Lottie confetti animation that triggers when a task is completed and integrated Moment.js to display relative timestamps for each to-do item. Finally, I refined the Styled Components to ensure the layout and animations are fully responsive and centered on both mobile and desktop.