TaskFlow - Collaborative Task Management System

<<<<<<< HEAD

TaskFlow - Collaborative Task Management System

A modern, feature-rich task management system built with React, Redux, Node.js, MongoDB, and Socket.io. Features real-time collaboration, stunning UI with animations, user roles, and comprehensive analytics.

✨ Features

🚀 Core Features

Real-time Collaboration - Live updates with Socket.io
User Role Management - Admin, Manager, and Member roles
Project Management - Create and manage projects with teams
Task Management - Full CRUD operations with drag-and-drop
Analytics Dashboard - Comprehensive insights and reporting
Time Tracking - Built-in time tracking for tasks
File Attachments - Upload and manage task attachments
Comments System - Real-time commenting on tasks

🎨 UI/UX Features

Stunning Modern Design - Glass morphism and neon effects
Dark/Light Theme - Automatic theme switching
Responsive Design - Works on all devices
Smooth Animations - Framer Motion powered animations
Interactive Elements - Hover effects and micro-interactions
Loading States - Beautiful loading spinners and skeletons

🔧 Technical Features

Real-time Updates - Socket.io integration
State Management - Redux Toolkit
Authentication - JWT-based auth system
File Upload - Multer integration
Email Notifications - Nodemailer integration
Data Validation - Express-validator
Error Handling - Comprehensive error management

🛠️ Tech Stack

Frontend

React 18 - Modern React with hooks
Redux Toolkit - State management
React Router - Client-side routing
Framer Motion - Animations and transitions
Tailwind CSS - Utility-first CSS framework
Socket.io Client - Real-time communication
React Hook Form - Form handling
Chart.js - Data visualization
React Hot Toast - Notifications

Backend

Node.js - Runtime environment
Express.js - Web framework
MongoDB - Database
Mongoose - ODM for MongoDB
Socket.io - Real-time communication
JWT - Authentication
Bcrypt - Password hashing
Multer - File upload handling
Nodemailer - Email service

🚀 Quick Start

Prerequisites

Node.js (v18 or higher)
MongoDB (local or Atlas)
npm or yarn

Installation

Clone the repository

git clone https://github.com/your-username/taskflow.git
cd taskflow

Run the installation script

# On Windows
install.bat

# On macOS/Linux
chmod +x install.sh
./install.sh

Configure environment variables

Update backend/.env with your settings:

NODE_ENV=development
PORT=5000
MONGODB_URI=mongodb://localhost:27017/taskflow
JWT_SECRET=your_super_secret_jwt_key_here
JWT_EXPIRE=30d
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_password

Start the application

# On Windows
start.bat

# On macOS/Linux
npm run dev

Access the application
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000

👥 Demo Accounts

Use these credentials to test the application:

Admin: admin@taskflow.com / password123
Manager: manager@taskflow.com / password123
Member: member@taskflow.com / password123

📱 Screenshots

Dashboard

Project Management

Task Board

Analytics

🏗️ Project Structure

taskflow/
├── backend/                 # Backend application
│   ├── models/             # Database models
│   ├── routes/             # API routes
│   ├── middleware/         # Custom middleware
│   ├── utils/              # Utility functions
│   └── server.js           # Entry point
├── frontend/               # Frontend application
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── pages/          # Page components
│   │   ├── store/          # Redux store
│   │   ├── services/       # API services
│   │   ├── hooks/          # Custom hooks
│   │   └── utils/          # Utility functions
│   └── public/             # Static files
├── install.bat             # Windows installation script
├── start.bat               # Windows start script
└── README.md               # This file

🔧 Development

Available Scripts

Root Directory

npm run dev - Start both frontend and backend
npm run server - Start backend only
npm run client - Start frontend only
npm run install-all - Install all dependencies

Backend

npm start - Start production server
npm run dev - Start development server with nodemon

Frontend

npm start - Start development server
npm run build - Build for production
npm test - Run tests

Environment Variables

Backend (.env)

NODE_ENV=development
PORT=5000
MONGODB_URI=mongodb://localhost:27017/taskflow
JWT_SECRET=your_jwt_secret_key
JWT_EXPIRE=30d
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_password

Frontend (.env)

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_SOCKET_URL=http://localhost:5000

🎨 Customization

Themes

The application supports custom themes. Edit frontend/tailwind.config.js to customize colors:

theme: {
  extend: {
    colors: {
      primary: {
        // Your primary colors
      },
      neon: {
        blue: '#00f5ff',
        purple: '#bf00ff',
        pink: '#ff0080',
        // Add more neon colors
      }
    }
  }
}

Animations

Animations are powered by Framer Motion. Customize in frontend/src/index.css:

@keyframes yourAnimation {
  0% { /* start state */ }
  100% { /* end state */ }
}

📊 API Documentation

Authentication Endpoints

POST /api/auth/register - Register new user
POST /api/auth/login - Login user
GET /api/auth/me - Get current user
PUT /api/auth/profile - Update profile

Project Endpoints

GET /api/projects - Get all projects
POST /api/projects - Create project
GET /api/projects/:id - Get project by ID
PUT /api/projects/:id - Update project
DELETE /api/projects/:id - Delete project

Task Endpoints

GET /api/tasks - Get all tasks
POST /api/tasks - Create task
GET /api/tasks/:id - Get task by ID
PUT /api/tasks/:id - Update task
DELETE /api/tasks/:id - Delete task

🔒 Security Features

JWT-based authentication
Password hashing with bcrypt
Input validation and sanitization
CORS protection
Rate limiting
XSS protection
SQL injection prevention

🚀 Deployment

Frontend (Netlify/Vercel)

Build the frontend: cd frontend && npm run build
Deploy the build folder to your hosting service
Set environment variables in your hosting dashboard

Backend (Heroku/Railway)

Create a new app on your hosting service
Connect your GitHub repository
Set environment variables
Deploy from the backend directory

Database (MongoDB Atlas)

Create a MongoDB Atlas account
Create a new cluster
Get the connection string
Update MONGODB_URI in your environment variables

🤝 Contributing

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

📝 License

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

🙏 Acknowledgments

React - UI library
Tailwind CSS - CSS framework
Framer Motion - Animation library
Socket.io - Real-time communication
MongoDB - Database
Express.js - Backend framework

📞 Support

If you have any questions or need help, please:

Check the Issues page
Create a new issue if your problem isn't already reported
Contact us at support@taskflow.com

=======

TaskFlow - Collaborative Task Management System

A modern, feature-rich task management system built with React, Redux, Node.js, MongoDB, and Socket.io. Features real-time collaboration, stunning UI with animations, user roles, and comprehensive analytics.

✨ Features

🚀 Core Features

Real-time Collaboration - Live updates with Socket.io
User Role Management - Admin, Manager, and Member roles
Project Management - Create and manage projects with teams
Task Management - Full CRUD operations with drag-and-drop
Analytics Dashboard - Comprehensive insights and reporting
Time Tracking - Built-in time tracking for tasks
File Attachments - Upload and manage task attachments
Comments System - Real-time commenting on tasks

🎨 UI/UX Features

Stunning Modern Design - Glass morphism and neon effects
Dark/Light Theme - Automatic theme switching
Responsive Design - Works on all devices
Smooth Animations - Framer Motion powered animations
Interactive Elements - Hover effects and micro-interactions
Loading States - Beautiful loading spinners and skeletons

🔧 Technical Features

Real-time Updates - Socket.io integration
State Management - Redux Toolkit
Authentication - JWT-based auth system
File Upload - Multer integration
Email Notifications - Nodemailer integration
Data Validation - Express-validator
Error Handling - Comprehensive error management

🛠️ Tech Stack

Frontend

React 18 - Modern React with hooks
Redux Toolkit - State management
React Router - Client-side routing
Framer Motion - Animations and transitions
Tailwind CSS - Utility-first CSS framework
Socket.io Client - Real-time communication
React Hook Form - Form handling
Chart.js - Data visualization
React Hot Toast - Notifications

Backend

Node.js - Runtime environment
Express.js - Web framework
MongoDB - Database
Mongoose - ODM for MongoDB
Socket.io - Real-time communication
JWT - Authentication
Bcrypt - Password hashing
Multer - File upload handling
Nodemailer - Email service

🚀 Quick Start

Prerequisites

Node.js (v18 or higher)
MongoDB (local or Atlas)
npm or yarn

Installation

Clone the repository

git clone https://github.com/your-username/taskflow.git
cd taskflow

Run the installation script

# On Windows
install.bat

# On macOS/Linux
chmod +x install.sh
./install.sh

Configure environment variables

Update backend/.env with your settings:

NODE_ENV=development
PORT=5000
MONGODB_URI=mongodb://localhost:27017/taskflow
JWT_SECRET=your_super_secret_jwt_key_here
JWT_EXPIRE=30d
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_password

Start the application

# On Windows
start.bat

# On macOS/Linux
npm run dev

Access the application
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000

👥 Demo Accounts

Use these credentials to test the application:

Admin: admin@taskflow.com / password123
Manager: manager@taskflow.com / password123
Member: member@taskflow.com / password123

📱 Screenshots

Dashboard

Project Management

Task Board

Analytics

🏗️ Project Structure

taskflow/
├── backend/                 # Backend application
│   ├── models/             # Database models
│   ├── routes/             # API routes
│   ├── middleware/         # Custom middleware
│   ├── utils/              # Utility functions
│   └── server.js           # Entry point
├── frontend/               # Frontend application
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── pages/          # Page components
│   │   ├── store/          # Redux store
│   │   ├── services/       # API services
│   │   ├── hooks/          # Custom hooks
│   │   └── utils/          # Utility functions
│   └── public/             # Static files
├── install.bat             # Windows installation script
├── start.bat               # Windows start script
└── README.md               # This file

🔧 Development

Available Scripts

Root Directory

npm run dev - Start both frontend and backend
npm run server - Start backend only
npm run client - Start frontend only
npm run install-all - Install all dependencies

Backend

npm start - Start production server
npm run dev - Start development server with nodemon

Frontend

npm start - Start development server
npm run build - Build for production
npm test - Run tests

Environment Variables

Backend (.env)

NODE_ENV=development
PORT=5000
MONGODB_URI=mongodb://localhost:27017/taskflow
JWT_SECRET=your_jwt_secret_key
JWT_EXPIRE=30d
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_password

Frontend (.env)

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_SOCKET_URL=http://localhost:5000

🎨 Customization

Themes

The application supports custom themes. Edit frontend/tailwind.config.js to customize colors:

theme: {
  extend: {
    colors: {
      primary: {
        // Your primary colors
      },
      neon: {
        blue: '#00f5ff',
        purple: '#bf00ff',
        pink: '#ff0080',
        // Add more neon colors
      }
    }
  }
}

Animations

Animations are powered by Framer Motion. Customize in frontend/src/index.css:

@keyframes yourAnimation {
  0% { /* start state */ }
  100% { /* end state */ }
}

📊 API Documentation

Authentication Endpoints

POST /api/auth/register - Register new user
POST /api/auth/login - Login user
GET /api/auth/me - Get current user
PUT /api/auth/profile - Update profile

Project Endpoints

GET /api/projects - Get all projects
POST /api/projects - Create project
GET /api/projects/:id - Get project by ID
PUT /api/projects/:id - Update project
DELETE /api/projects/:id - Delete project

Task Endpoints

GET /api/tasks - Get all tasks
POST /api/tasks - Create task
GET /api/tasks/:id - Get task by ID
PUT /api/tasks/:id - Update task
DELETE /api/tasks/:id - Delete task

🔒 Security Features

JWT-based authentication
Password hashing with bcrypt
Input validation and sanitization
CORS protection
Rate limiting
XSS protection
SQL injection prevention

🚀 Deployment

Frontend (Netlify/Vercel)

Build the frontend: cd frontend && npm run build
Deploy the build folder to your hosting service
Set environment variables in your hosting dashboard

Backend (Heroku/Railway)

Create a new app on your hosting service
Connect your GitHub repository
Set environment variables
Deploy from the backend directory

Database (MongoDB Atlas)

Create a MongoDB Atlas account
Create a new cluster
Get the connection string
Update MONGODB_URI in your environment variables

🤝 Contributing

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

📝 License

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

🙏 Acknowledgments

React - UI library
Tailwind CSS - CSS framework
Framer Motion - Animation library
Socket.io - Real-time communication
MongoDB - Database
Express.js - Backend framework

📞 Support

If you have any questions or need help, please:

Check the Issues page
Create a new issue if your problem isn't already reported
Contact us at support@taskflow.com

973742af3377736e3e652474c1aa6c4cc858ed7e Made with ❤️ by the TaskFlow Team

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
.github		.github
backend		backend
frontend		frontend
.gitattributes		.gitattributes
.gitignore		.gitignore
.gitmessage		.gitmessage
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
DEPLOYMENT.md		DEPLOYMENT.md
LICENSE		LICENSE
PROJECT_SUMMARY.md		PROJECT_SUMMARY.md
README.md		README.md
SETUP.md		SETUP.md
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

TaskFlow - Collaborative Task Management System

✨ Features

🚀 Core Features

🎨 UI/UX Features

🔧 Technical Features

🛠️ Tech Stack

Frontend

Backend

🚀 Quick Start

Prerequisites

Installation

👥 Demo Accounts

📱 Screenshots

Dashboard

Project Management

Task Board

Analytics

🏗️ Project Structure

🔧 Development

Available Scripts

Root Directory

Backend

Frontend

Environment Variables

Backend (.env)

Frontend (.env)

🎨 Customization

Themes

Animations

📊 API Documentation

Authentication Endpoints

Project Endpoints

Task Endpoints

🔒 Security Features

🚀 Deployment

Frontend (Netlify/Vercel)

Backend (Heroku/Railway)

Database (MongoDB Atlas)

🤝 Contributing

📝 License

🙏 Acknowledgments

📞 Support

TaskFlow - Collaborative Task Management System

✨ Features

🚀 Core Features

🎨 UI/UX Features

🔧 Technical Features

🛠️ Tech Stack

Frontend

Backend

🚀 Quick Start

Prerequisites

Installation

👥 Demo Accounts

📱 Screenshots

Dashboard

Project Management

Task Board

Analytics

🏗️ Project Structure

🔧 Development

Available Scripts

Root Directory

Backend

Frontend

Environment Variables

Backend (.env)

Frontend (.env)

🎨 Customization

Themes

Animations

📊 API Documentation

Authentication Endpoints

Project Endpoints

Task Endpoints

🔒 Security Features

Packages