This is a lightweight and user-friendly todo app designed to help you manage your tasks efficiently.
This is a lightweight and user-friendly todo app designed to help you manage your tasks efficiently. Key features include:
- PWA Support: Install and use it like a native app on your device, with full offline functionality.
- Persistent Data: All todos are stored locally, ensuring your tasks are saved even if you close the app.
- Responsive Design: View the optimal layout for the app depending on your device's screen size.
- Interactive Elements: See hover states for all interactive elements on the page.
- Task Management:
- 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.
- Theme Options: Toggle between light and dark modes, with auto-switching based on your system settings.
- Reorder Todo: Drag and drop to reorder items on the list.
- Solution URL: Github Source Code
- Live Site URL: Live Vercel Url
- Semantic HTML5 markup
- Tailwind CSS
- Typescript
- React Beautiful DND - For Drag and Drop Functionality
- Next PWA - For Nextjs PWA support
- React - JS library
- Next.js - React framework
- Recoiljs - For State Management
Although this was a straightforward project, it took more time than I initially expected. I focused on making the UI/UX as smooth as possible, which added to the development time. A couple of challenges also contributed to the delay. Specifically, React Beautiful DND and next-pwa don't support the latest versions of React or Next.js, and they aren’t actively maintained. These issues caused the app to crash, so I had to find alternative solutions.
Despite these challenges, integrating PWA support was a rewarding experience. It adds a layer of functionality to the project, allowing me to use the todo app even when offline. While I was familiar with the concept of PWAs, this was my first time setting one up in a project. Overall, it turned out to be a fun and educational weekend project.
Website - Imran Shaikh
Linkdin - @Imran-S-haikh
Twitter - @Imran_S_haikh