🧭 Task Board – Trello-like Project Management App 🚀

A modern, responsive task management application inspired by Trello — built with cutting-edge web technologies for seamless project organization and collaboration.

Home Page

---

✨ Features

🎯 Core Functionality

• Drag & Drop Interface – Intuitive card movement between columns

  

  ---

• Multi-column Workspace – Todo → Doing → Done workflow

  

  ---

• Dynamic Card Management – Add, edit, and organize tasks effortlessly

  

  ---

• Real-time Updates – Smooth UI interactions

---

---

---

---

🎨 Modern UI/UX

• Responsive Design – Perfect experience on all devices
• Beautiful Animations – Smooth transitions and hover effects
• Clean Interface – Minimalist design focused on productivity
• Accessibility First – Keyboard navigation and screen reader support

---

🔧 Advanced Features

• Multi-step Forms – Structured data collection with progress indicators
• Form Validation – Real-time error handling and user feedback
• Success States – Celebratory completion animations
• Keyboard Shortcuts – ESC to close, Enter to submit

---

🛠️ Tech Stack

⚛️ Frontend Framework

• React 19 – Latest React with concurrent features
• Vite – Lightning-fast build tool and dev server

---

🎨 Styling & UI

• Tailwind CSS 4 – Utility-first CSS framework

• DaisyUI – Component library for Tailwind

• Custom Components – Beautifully designed modals and forms

  ---

🖼️ Icons & Assets

• React Icons – Comprehensive icon library

• Heroicons – Beautiful SVG icons

  ---

🧩 State & Interactions

• React Hook Form – Powerful form management
• @hello-pangea/dnd – Smooth drag-and-drop functionality
• React Hot Toast – Elegant notifications

🌐 Routing & Deployment

• React Router DOM – Client-side routing
• Firebase – Backend and hosting capabilities

---

🚀 Quick Start

🧰 Prerequisites

• Node.js v18+

• npm or yarn

  ---

⚙️ Installation

Clone the repository

git clone https://github.com/yourusername/task-board.git

Navigate to project directory

cd task-board

Install dependencies

npm install

Start development server

npm run dev

🎯 Usage Guide

➕ Creating Tasks

Click "Add More" in any column

Fill out the multi-step form:

Personal Information – Name, age

Address Information – Current & present address

Contact Information – Email, phone

Submit to see the success animation

---

🔄 Managing Workflow

Drag & Drop – Move cards between Todo, Doing, Done

Add Columns – Create custom workflow stages

Real-time Updates – Instant visual feedback

---

⌨️ Keyboard Navigation

ESC – Close modals

Enter – Submit forms

Click + drag – Move cards

---

🔤 Typography

Clean, readable fonts

Consistent heading hierarchy

Mobile-responsive text sizes

---

🧱 Components

Modals – Centered with backdrop blur

Buttons – Gradient backgrounds with hover states

Forms – Step indicators with progress bars

Cards – Clean shadows and borders

---

🌟 Why This Project Stands Out

🏆 Professional Grade

Production-ready – Follows React best practices

Performance optimized – Efficient re-renders and minimal bundle size

Type safe – Full TypeScript support available

Accessible – WCAG guidelines compliant

---

💡 Innovative Features

Multi-step modal forms for complex data

Visual progress indicators

Celebratory completion animations

Responsive drag & drop – Works on touch devices

---

🧑‍💻 Developer Experience

Modern tooling with Vite

Clean, modular codebase

Easy customization and scalability

SEO ready with proper meta tags

---

🌐 Browser Support

✅ Chrome 90+

✅ Firefox 88+

✅ Safari 14+

✅ Edge 90+

---

🤝 Contributing

We ❤️ contributions! Please feel free to submit issues, fork the repository, and create pull requests.

---

🙏 Acknowledgments

Trello – for inspiration

Tailwind CSS – for the amazing utility framework

React Community – for excellent libraries and support

Vite Team – for the fantastic build tool

---

⭐ Star this repo if you found it helpful!

Built with ❤️ using React, Tailwind CSS, and DaisyUI.

---