🚀 Taskify – Smart Task Management App

Taskify is a modern and responsive task management application built with React, TypeScript, and Vite.
It helps users organize daily tasks, track progress, and analyze productivity through a simple and intuitive interface.

The project focuses on clean architecture, performance optimization, scalability, and modern UI/UX practices.

---

✨ About the App

Taskify allows users to manage their tasks efficiently with features such as:

• Creating and organizing tasks
• Tracking completion status
• Setting optional due dates
• Filtering and searching tasks
• Visualizing productivity with analytics
• Persistent storage using LocalStorage
• Light and dark theme support

The application is designed with performance, accessibility, and scalability in mind.

---

🧩 Key Features

📋 Task Management

• Add new tasks
• Edit existing tasks
• Delete tasks
• Mark tasks as completed or pending
• Drag and drop task reordering
• Optional due dates for tasks

---

🔎 Filtering & Search

• Filter tasks by:
  • All
  • Pending
  • Completed
• Search tasks by keyword
• Sort tasks for better organization

---

📊 Task Analytics

• Visual representation of task progress
• Completed vs Pending task chart
• Task completion percentage
• Overdue task detection
• Tasks completed today statistics

---

🌗 Theme Support

• Toggle between Light Mode and Dark Mode
• Theme persistence across sessions

---

💾 Data Persistence

• Tasks are stored using LocalStorage
• Data remains available after refreshing the application

---

📱 Responsive UI

• Optimized for:
  • Desktop
  • Tablet
  • Mobile devices

---

🛠 Tech Stack

• ⚛️ React
• 🔷 TypeScript
• ⚡ Vite
• 🎨 CSS Modules
• 📊 Recharts (Analytics Charts)
• 🧪 Vitest + React Testing Library
• 🔔 Sonner (Toast Notifications)
• 🧩 React Router
• 🎯 Lucide Icons

---

🏗 Project Architecture

The project follows a feature-based architecture to improve scalability and maintainability.

This structure allows each feature to be modular, reusable, and easier to maintain.

---

⚡ Best Practices Followed

✔ Feature-based folder structure
✔ Reusable custom hooks
✔ Context API for theme management
✔ Performance optimizations using useMemo and React.memo
✔ Accessibility improvements (aria-label, semantic elements)
✔ Responsive design for mobile devices
✔ Lazy loading with React Router
✔ Clean component separation

---

🧪 Testing

Basic unit and component tests are implemented using:

• Vitest
• React Testing Library

Testing ensures that components behave correctly and improves maintainability.