🚀 TaskFlow - Modern Task Management App

A beautiful and efficient task management application with Kanban board, real-time notifications, and drag & drop functionality.

✨ Features

✅ Fully Implemented & Working

• 📋 Task Management - Complete CRUD operations
• 🎯 Kanban Board - Drag & drop with multiple columns
• 🔔 Due Date Notifications - Backend notification system
• ⚡ Real-time Collaboration - Live updates with Socket.io
• 👤 User Authentication - Secure login system
• 📱 Responsive Design - Works on all devices
• 🗄️ MongoDB Database - Cloud database with Mongoose

🔄 Real-time Features

• 🔄 Live Task Updates - Tasks sync across all users in real-time
• 🎯 Instant Status Changes - Drag & drop updates immediately
• 👥 User Presence - See connected users online
• 🔌 Connection Status - Live connection indicator
• 📨 Real-time Events - Create, update, delete operations broadcast instantly

🚧 Coming Soon

• ⚡ Real-time Collaboration (Socket.io)
• 💬 Comments System
• 👥 Team Management
• ⏱️ Time Tracking
• 📊 Analytics Dashboard
• 🔔 Advanced Notifications

📸 Screenshots

Home Page

Login

Register

Dashboard

Tasks Kanban Board

Tasks List View

Create New Task

Notification

🛠️ Tech Stack

Frontend:

• React.js 18
• React Router DOM
• Context API for State Management
• CSS3 with modern animations
• Axios for API calls

Backend:

• Node.js
• Express.js
• MongoDB with Mongoose
• JWT Authentication
• bcryptjs for password hashing

Real-time:

• WebSocket connections
• Room-based messaging
• Event-driven architecture
• Connection state management

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• MongoDB Atlas account

Installation

1. Clone the repository

   git clone https://github.com/chelbapolandaa/TaskFlow-App.git
   cd taskflow-app

2. Backend Setup

   cd backend
   npm install
   cp .env.example .env
   # Edit .env with your MongoDB Atlas connection string
   npm run dev

3. Frontend Setup

   cd frontend
   npm install
   npm run dev

4. Access the Application

Frontend: http://localhost:5173

Backend API: http://localhost:5000

🔑 Demo Account

Use these credentials to test the app:

Email: demo@taskflow.com

Password: password

🌐 Deployment

Frontend (Vercel)

1. Connect your GitHub repo to Vercel
2. Set environment variables
3. Deploy!

Backend (Railway/Render)

1. Upload backend folder
2. Set environment variables
3. Deploy!

Database

• MongoDB Atlas already cloud-based

🤝 Contributing

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Chelba Polanda GitHub: @chelbapolandaa

⭐ Star this repository if you find it helpful!