TaskFlow SPA is a sleek, responsive, and dynamic Single Page Application (SPA) designed to help users efficiently track and manage their daily tasks. Built entirely with Vanilla Web Technologies, it features a clean UI, local data persistence, and context-aware feedback.
⚡ Real-Time Task Management: Instantly add, complete, and delete tasks without any page reloads.
🔍 Smart Data Filtering: Seamlessly toggle between All, Active, and Completed task views to maintain focus and organization.
🎨 Context-Aware User Interface: The application provides dynamic feedback via custom empty states. Instead of a generic blank screen, users are greeted with specific icons and messages based on their current view (e.g., a celebratory message when all active tasks are completed).
💾 Persistent Data Storage: Integrated natively with the browser's localStorage API. Your tasks are saved automatically, ensuring no data is lost when closing the tab or refreshing the browser.
📱 Fully Responsive Layout: Designed with modern CSS (Flexbox and Custom Properties) to provide a seamless and visually appealing experience across mobile, tablet, and desktop devices.
📅 Dynamic Date Display: Automatically greets the user with the current formatted date.
HTML5: Semantic markup for a clear, accessible document structure.
CSS3: Custom properties (CSS variables) for consistent theming, smooth transitions, and responsive design techniques.
JavaScript (ES6+): Event-driven architecture, advanced array manipulation (filter, map, forEach), and dynamic DOM rendering.
FontAwesome (v5.15.4): Scalable vector icons used to enhance the visual interface and dynamic empty states.
To run this application on your local machine, no complex build tools, package managers, or server setups are required.
Prerequisites
A modern web browser (Chrome, Firefox, Safari, Edge).
A code editor (like VS Code) if you wish to explore the code.
Installation
Clone the repository:
git clone: https://github.com/chaitanyaCE/TaskFlow-SPA.git
Navigate to the project directory:
cd TaskFlow-SPA
Run the application: Simply double-click the index.html file to open it in your default web browser.
Optional: If you are using VS Code, you can use the Live Server extension to launch the app with hot-reloading enabled.
TaskFlow-SPA/
├── index.html # The main HTML document containing the app structure
├── style.css # The styling rules, variables, and responsive layouts
├── script.js # The core logic, DOM manipulation, and state management
└── README.md # Project documentationHere are some planned features for future iterations of TaskFlow SPA:
[ ] 🖱️ Drag-and-Drop: Allow users to manually reorder tasks.
[ ] 🌙 Dark Mode Toggle: Implement a theme switcher for better low-light accessibility.
[ ] 🏷️ Categorization Tags: Allow users to assign custom color-coded tags to tasks.
[ ] ⏰ Due Dates: Add functionality to set and track deadlines for specific tasks.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you want to contribute.
Chaitanya Patel
GitHub: @chaitanyaCE
⭐️ If you found this project helpful or interesting, please consider giving it a star!