TaskFlow is a simple and clean task management web application built using vanilla JavaScript, HTML, and CSS.
It allows users to manage daily tasks with full CRUD functionality, filtering, and persistent storage using localStorage.
This project focuses on core frontend fundamentals such as state management, DOM manipulation, and UI-driven logic without using any frameworks.
- ➕ Add new tasks
- ✏️ Edit tasks inline
- ✅ Mark tasks as completed
- 🗑️ Delete tasks
- 🔍 Filter tasks (All / Active / Completed)
- 💾 Persistent data using
localStorage - 📱 Responsive and mobile-friendly UI
- State management using plain JavaScript objects and arrays
- Derived UI state (filtered tasks, task count)
- Event-driven programming
- DOM manipulation without frameworks
- LocalStorage for data persistence
- Clean re-rendering pattern (state → UI)
- HTML5
- CSS3
- JavaScript (ES6+)
- No external libraries or frameworks
- Tasks are stored as objects in a JavaScript array (
tasks) - All UI updates are driven by re-rendering based on the current state
- Filters are applied using derived state instead of storing duplicate data
- Task data is saved and loaded from
localStorageautomatically
Example: https://thenameisrks.github.io/task-flow/
- Data is stored per browser and per device
- Clearing browser data will remove saved tasks
- No backend or user authentication (frontend-only project)
Through this project, I improved my understanding of:
- JavaScript fundamentals
- Application state vs UI state
- Clean DOM updates
- Writing maintainable and readable code
- Debugging real-world frontend issues
- Dark mode
- Drag & drop task reordering
- Due dates and priorities
- Backend integration for cross-device sync
Shanmugapriyan R K
This project is open-source and free to use for learning purposes.