A responsive Task Management Web Application. Users can add tasks, categorize them into different boards (To-Do, In-Progress, Completed), drag and drop tasks across boards, and manage them efficiently.
- ✅ Task Management: Create, edit, and delete tasks
- 🎯 3-Column Board Layout: To-Do, In-Progress, Completed
- 🖱️ Drag & Drop: Move tasks between columns seamlessly
- 🔍 Filtering: Filter by Priority (Low/Medium/High) and Status
- 📊 Sorting: Sort by Newest, Oldest, or Closest Due Date
- 💾 Persistent Storage: All tasks saved in localStorage
- 📱 Responsive Design: Works on mobile, tablet, and desktop
- 🚨 Duplicate Detection: Shows badge for tasks with same title in same column
⚠️ Delete Confirmation: Confirm before deleting tasks
- React (v18+)
- Vite - Build tool
- Tailwind CSS - Styling
- Lucide React - Icons
- localStorage - Data persistence
- Clone the repository
git clone https://github.com/abhishek-odiya/Task-Manager-01.git
cd task-manager- Install dependencies
npm install- Install required packages
npm install lucide-react
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pDevelopment Mode:
npm run devThe app will open at http://localhost:5173
task-manager/
├── .git/
├── node_modules/
├── public/
│ └── tasks.json
├── src/
│ ├── components/
│ │ ├── Column.jsx
│ │ ├── FilterBar.jsx
│ │ ├── InputBox.jsx
│ │ ├── Navbar.jsx
│ │ ├── TaskCard.jsx
│ │ └── ToDelete.jsx
│ ├── hooks/
│ │ └── UseTasks.js
│ ├── utils/
│ │ ├── Color_filter.js
│ │ └── constants.js
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js
Abhishek Odiya abhishekodiya123@gmail.com