Task Flow

TaskFlow is a responsive, drag-and-drop Kanban board built with React, allowing users to organize tasks within customizable containers for a personalized workflow. Task data is saved in localStorage for persistence across sessions, ensuring users never lose track of their progress. With a mobile-friendly design, TaskFlow offers a seamless task management experience across all devices

Project Setup Guide

Follow these steps to set up the project and install necessary dependencies.

1. Create a New Vite Project

npm create vite@latest

• Description: Initializes a new Vite project for fast front-end development.

2. Install All Project Dependencies

npm i

• Description: Installs all dependencies listed in package.json.

3. Install React Router DOM

npm i react-router-dom

• Description: Adds dynamic routing to React applications.

4. Install React Icons

npm i react-icons

• Description: Provides popular icons as React components.

5. Install Sonner

npm install sonner

• Description: Lightweight toast notifications for a better user experience.

6. Install Tailwind CSS and Plugins

npm install -D tailwindcss postcss autoprefixer

• Description: Sets up Tailwind CSS with PostCSS and Autoprefixer for optimized styling.

7. Initialize Tailwind CSS Configuration

npx tailwindcss init -p

• Description: Generates Tailwind CSS configuration files.

8. Install Prettier and Tailwind Prettier Plugin

npm install -D prettier prettier-plugin-tailwindcss

• Description: Ensures consistent code formatting and integrates with Tailwind CSS.

9. Insatll

npm install react-beautiful-dnd

• Description: Drag-and-drop functionality allows users to click and hold an item to move it to a different location or container within a user interface, enabling intuitive reordering and organization of elements without the need for traditional controls like buttons.