TaskVine 🌿

A modern, feature-rich task management application built with Next.js and Zustand.

✨ Features

Task Management

• Kanban-style Board: Organize tasks across Todo, In Progress, and Done columns
• Drag & Drop Interface: Seamlessly move tasks between different states
• Priority Levels: Set task priorities (High, Medium, Low)
• Task Timer: Track time spent on individual tasks
• Rich Task Details: Add descriptions and track creation dates

Data Management

• Data Import/Export: Backup and restore your todos
• Local Storage: Persistent data storage
• Bulk Actions: Clear all todos with confirmation

User Experience

• Responsive Design: Works perfectly on desktop, tablet, and mobile
• Dark/Light Mode: Built-in theme switching
• Keyboard Shortcuts: Quick access to common actions
• Toast Notifications: Informative feedback for all actions
• Confirmation Dialogs: Prevent accidental deletions
• PWA Support: Install as a standalone app

🚀 Tech Stack

• Next.js 15 - React Framework
• Tailwind CSS - Styling
• Zustand - State Management
• Framer Motion - Animations
• dnd-kit - Drag and Drop
• Radix UI - UI Components
• Next PWA - PWA Support
• TypeScript - Type Safety
• Lucide Icons - Icons
• Vercel - Deployment & Analytics

🛠️ Installation

1. Clone the repository:

git clone https://github.com/bekione/taskvine.git

2. Install dependencies:

cd taskvine
npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000

💻 Usage

Basic Operations

• Add new todos with Add New Todo button or ⌘/Ctrl + K
• Drag and drop todos between columns
• Click todo title to edit
• Use the timer to track time spent

Data Management

• Export todos via Settings menu
• Import todos from JSON file
• Clear all todos with confirmation

Keyboard Shortcuts

• ⌘/Ctrl + K: Add new todo
• More shortcuts coming soon!

🔒 Privacy

TaskVine stores all data locally in your browser. No data is sent to any server.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📜 License

This project is licensed under the MIT License.

👏 Credits

Created by Bereket K.

Inspired by Niklas Ziermann's tutorial on freeCodeCamp:

• Tutorial: Zustand React State Management Course (Simple Redux Alternative)

The project has been extended with additional features including:

• Advanced state management with Zustand
• Task Timer functionality
• PWA support
• Data import/export
• Theme switching
• And more...

🌟 Support

Give a ⭐️ if you like this project!