TaskFlow

TaskFlow is a modern task management and productivity application built with React, Vite, MUI, and Tailwind CSS.

The project focuses on fluid interactions, visual consistency, responsive layouts, and a refined glass-inspired interface system designed for local-first productivity workflows.

---

✨ Features

• Task creation and management
• Recurring task templates
• Subtask workflow support
• Task sorting and filtering
• Tag management system
• Task history tracking
• Responsive dashboard layout
• Glassmorphism-inspired UI system
• Smooth modal and interaction animations
• Local-first persistence
• GitHub Pages deployment support

---

🖼️ Design Goals

TaskFlow combines:

• Material You interaction principles
• Modern SaaS dashboard aesthetics
• Lightweight glass-style surfaces
• Responsive motion design
• Consistent visual hierarchy
• Performance-conscious UI rendering

---

🛠️ Tech Stack

Frontend

• React 19
• Vite 8
• React Router 7

UI / Styling

• MUI 9
• Tailwind CSS 4
• Emotion

Utilities

• date-fns

---

📁 Project Structure

src/
├── components/
│   ├── AddTaskModal.jsx
│   ├── FrequencySelector.jsx
│   ├── LogoMark.jsx
│   ├── Navigation.jsx
│   ├── PriorityBadge.jsx
│   ├── Sidebar.jsx
│   ├── SortingToolbar.jsx
│   ├── StatusToggle.jsx
│   ├── SubtaskDraftEditor.jsx
│   ├── SubtaskList.jsx
│   ├── TagManager.jsx
│   └── TaskCard.jsx
│
├── pages/
│   ├── Dashboard.jsx
│   ├── HistoryPage.jsx
│   ├── LandingPage.jsx
│   └── SchedulePage.jsx
│
├── javascripts/
│   └── shared.js
│
├── tailwind/
│   └── tailwind.css
│
└── main.jsx

---

🚀 Getting Started

Install Dependencies

npm install

Start Development Server

npm run dev

Build for Production

npm run build

Preview Production Build

npm run preview

---

⚡ Development Notes

TaskFlow is currently focused on:

• Interaction refinement
• Animation smoothness
• Rendering optimization
• Visual consistency
• Component system cleanup
• Local-first workflow stability

---

📦 Deployment

This project is designed to work as a static frontend application and can be deployed directly to:

• GitHub Pages
• Vercel
• Netlify

No backend service is required.

---

📄 License

This project is intended for personal learning, UI experimentation, and frontend architecture exploration.