In this day and age, we really need to get organized to be more productive. It doesn’t matter if you are a student, a developer, or a working professional – having a good To Do Application will help keep you organized. This blog shows you a fully-functional and beautifully designed To Do Application by Amaan Shaikh that has dark mode, filtering, editing, and localStorage support among other features.
🌟 Project Overview
This project is a sleek To Do Application built with ReactJS, offering modern features like:
- Dark mode toggle
- Task creation, completion, deletion, and editing
- Task filtering (All, Active, Completed)
- Live counters (total and remaining tasks)
- Persistent storage using
localStorage
It combines aesthetics with usability and is a perfect project for beginner to intermediate React developers.
✨ Key Features
✅ Add & Manage Tasks
Users can:
- Add new tasks
- Mark tasks as completed
- Edit task names
- Delete tasks they no longer need
Tasks can be interacted with via keyboard (Enter key) for accessibility.
🌗 Dark Mode Support
Users can switch between light and dark theme modes utilizing just one click. The user’s selected theme persists across sessions using localStorage.
🌙 Bonus: The theme switcher is implemented outside React using plain JavaScript to demonstrate how DOM interaction can coexist with React state management.
🔍 Filter & View
Users can filter tasks based on:
- All – shows every task
- Active – tasks yet to be completed
- Completed – tasks already done
This filtering improves focus and productivity.
📝 Edit Tasks Inline
Clicking the ✏️ icon allows users to edit task names directly. The app ensures no empty tasks are saved, maintaining data integrity.
🧠 Persistent Storage
All tasks and the dark mode preference are saved in the browser’s localStorage, so nothing gets lost on page refresh.
📱 Responsive & Accessible
The app is:
- Fully responsive across devices
- Keyboard accessible
- Built with semantic HTML and ARIA attributes
⚙️ Tech Stack Used
- React 18 (via CDN)
- Babel (for JSX compilation in the browser)
- HTML & CSS with CSS variables
- LocalStorage API
📂 Project Structure Highlights
App()manages all task logic and rendering- State variables include:
tasks,input,editIndex,editText,filter,darkMode
useEffect()is used for:- Loading and saving tasks
- Syncing dark mode preference
🚀 How to Run the App
- Download or copy the HTML file.
- Open it in any modern browser.
- Start adding and managing your tasks with ease.
No external setup or build system is required — it’s all handled within a single HTML file via React and Babel CDNs.
💡 Final Thoughts
This To Do Application By Amaan Shaikh is a fantastic exercise in applying core React hooks like useState and useEffect. It also introduces:
- Practical dark mode implementation
- Managing controlled components
- Working with browser APIs like
localStorage
Whether you’re learning React or building portfolio-worthy projects, this app is a great starting point.