Project Name: TaskFlow

Live Website: TaskFlow

TaskFlow OverView

TaskFlow is a modern, intuitive, and efficient Task Management Application designed to streamline workflow and boost productivity. Users can effortlessly add, edit, delete, and reorder tasks using a drag-and-drop interface, making task organization smooth and interactive. Tasks are neatly categorized into To-Do, In Progress, and Done, ensuring clarity in task tracking.

All changes are instantly saved to a MongoDB database, maintaining real-time synchronization and data persistence, so users never lose progress.

Built with a clean, minimalistic UI, TaskFlow provides a seamless and distraction-free experience across both desktop and mobile devices. Whether you're managing personal tasks or team projects, TaskFlow simplifies the process, keeping you focused and organized. 🚀

🖼 Screenshot

📖 Table of Contents

• Features
• Technologies Used
• Dependencies used
• Installation

🚀Features

• Task Management: Easily add, edit, delete, and reorder tasks using a user-friendly interface.
• Drag-and-Drop Functionality: Seamlessly rearrange tasks across To-Do, In Progress, and Done categories for better workflow organization.
• Real-Time Updates:: Instantly sync task changes with the MongoDB database to ensure persistence and data consistency.
• Authentication & Security: Implement user authentication and authorization for secure access and personalized experiences.

---

🛠️ Tech Used

• Frontend: React, Tailwind CSS

• Backend: Node.js, Express

• Database: MongoDB

• Build Tool: VS Code

  ---

📦 Dependencies

The project uses the following npm packages:

"@tailwindcss/vite": "^4.0.7",
  "axios": "^1.7.9",
  "framer-motion": "^12.4.7",
  "react": "^18.3.1",
  "@hello-pangea/dnd": "^18.0.1",
  "react-dom": "^18.3.1",
  "react-hook-form": "^7.54.2",
  "react-icons": "^5.5.0",
  "react-router-dom": "^7.2.0",
  "socket.io-client": "^4.8.1",
  "sweetalert2": "^11.17.2",
  "tailwindcss": "^4.0.7",
  "uuid": "^11.1.0" 
  "express": "^4.18.2",
  "mongoose": "^7.2.2",
  "cors": "^2.8.5",
  "dotenv": "^16.3.1",

Installation & Setup

Follow these steps to run the project locally:

1 Clone the Client Repository

git clone https://github.com/mdimranictiu/TaskFlow-Client.git
cd TaskFlow-Client

3 Install Dependencies

npm install

4 Start the Development Server

npm run dev

Resources & Links

📖 React Documentation: https://react.dev/ 📖 Tailwind CSS Documentation: https://tailwindcss.com/ 🔥 Firebase: https://firebase.google.com/

📌 Feel free to contribute, report issues, or share your feedback! 🚀