📋 Kanban Task Management

A modern, responsive Kanban board application built with React and TypeScript, featuring a beautiful UI powered by shadcn/ui and Tailwind CSS. Perfect for teams and individuals to manage tasks efficiently with drag-and-drop functionality, real-time updates, and responsive design.

Desktop	Tablet	Mobile

🎯 Core Functionality

• Drag & Drop Interface: Intuitive task management with smooth drag-and-drop between columns
• Real-time Updates: Instant synchronization of task changes across the board
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Dark/Light Theme: Toggle between themes with persistent user preference
• Search & Filter: Advanced search functionality with multiple filter options

👤 User Management

• Authentication System: Secure login and registration with local storage
• User Profiles: Customizable avatars and profile management
• Multi-user Support: Assign tasks to different team members
• Session Persistence: Automatic login state management

📝 Task Management

• Create & Edit Tasks: Comprehensive task creation with rich descriptions
• Priority Levels: Set task priorities (Low, Medium, High, Critical)
• Issue Types: Categorize tasks as Bug, Feature, Enhancement, or Documentation
• Due Dates: Set and track task deadlines
• Tags & Labels: Organize tasks with customizable tags
• Comments & Attachments: Track task discussions and file attachments
• Task Analytics: Visual indicators for task progress and statistics

🎨 User Experience

• Modern UI Components: Built with shadcn/ui component library
• Smooth Animations: Elegant transitions and micro-interactions
• Accessibility: WCAG compliant with proper ARIA labels and keyboard navigation
• Progressive Web App: Offline support and native app-like experience
• Notifications: Toast notifications for user actions and updates

🛠️ Tech Stack

Frontend

• React 18.3.1 - Modern React with hooks and concurrent features
• TypeScript 5.5.3 - Type-safe JavaScript development
• Vite 5.4.1 - Fast build tool and development server
• Tailwind CSS 3.4.11 - Utility-first CSS framework

UI & Components

• shadcn/ui - High-quality, accessible component library
• Radix UI - Low-level UI primitives
• Lucide React - Beautiful & consistent icon library
• Tailwind Merge - Utility for merging Tailwind classes

State Management & Data

• TanStack Query 5.56.2 - Powerful data synchronization for React
• React Hook Form 7.53.0 - Performant forms with easy validation
• Zod 3.23.8 - TypeScript-first schema validation
• UUID - RFC4122 UUID generation

Utilities & Enhancements

• date-fns 3.6.0 - Modern JavaScript date utility library
• Sonner - Opinionated toast component for React
• React Router DOM 6.26.2 - Declarative routing for React
• Class Variance Authority - Creating variant APIs for components

Development Tools

• ESLint 9.9.0 - Code linting and formatting
• TypeScript ESLint - TypeScript-specific linting rules
• PostCSS 8.4.47 - CSS transformation tool
• Autoprefixer - CSS vendor prefixing

🚀 Getting Started

Prerequisites

Make sure you have the following installed on your development machine:

• Node.js (version 16.0 or higher)
• npm (version 7.0 or higher) or yarn (version 1.22 or higher)
• Git for version control

# Check your versions
node --version
npm --version
git --version

Installation

1. Clone the repository

git clone https://github.com/Ayokanmi-Adejola/Task-Management.git
cd Task-Management

1. Install dependencies

# Using npm
npm install

# Or using yarn
yarn install

1. Start the development server

# Using npm
npm run dev

# Or using yarn
yarn dev

1. Open your browser Navigate to http://localhost:8081 to see the application.

Environment Setup

The application runs on port 8081 by default. You can modify this in the vite.config.ts file if needed.

// vite.config.ts
export default defineConfig({
  server: {
    host: "::",
    port: 8081, // Change this port if needed
  },
  // ... other config
});

📦 Available Scripts

Script	Description
npm run dev	Starts the development server with hot reload
npm run build	Creates an optimized production build
npm run build:dev	Creates a development build
npm run lint	Runs ESLint to check code quality
npm run preview	Preview the production build locally

📁 Project Structure

Task-Management/
├── public/                     # Static assets
├── src/
│   ├── components/            # Reusable UI components
│   │   ├── ui/               # shadcn/ui components
│   │   ├── KanbanBoard.tsx   # Main Kanban board component
│   │   ├── TaskCard.tsx      # Individual task component
│   │   └── ...
│   ├── contexts/             # React context providers
│   │   ├── AuthContext.tsx   # Authentication state
│   │   └── ThemeContext.tsx  # Theme management
│   ├── hooks/                # Custom React hooks
│   ├── lib/                  # Utility functions
│   ├── pages/                # Page components
│   ├── types/                # TypeScript type definitions
│   ├── utils/                # Helper functions
│   └── main.tsx              # Application entry point
├── components.json           # shadcn/ui configuration
├── tailwind.config.ts        # Tailwind CSS configuration
├── vite.config.ts           # Vite build configuration
└── tsconfig.json            # TypeScript configuration

🎯 Usage

Creating Tasks

1. Click the "Create Task" button or "Add Task" in any column
2. Fill in the task details (title, description, priority, etc.)
3. Assign team members and set due dates
4. Click "Create" to add the task to the board

Managing Tasks

• Move Tasks: Drag and drop tasks between columns (To Do, In Progress, Completed)
• Edit Tasks: Click on any task to open the edit dialog
• Filter Tasks: Use the filter button to search by status, priority, assignee, or tags
• Delete Tasks: Remove tasks using the delete button in the task card

User Authentication

• Register a new account or login with existing credentials
• User sessions are persisted in local storage
• Access user settings through the profile dropdown
• Toggle between light and dark themes

🔧 Configuration

Theme Customization

The application supports custom theming through CSS variables. Modify the theme in src/index.css:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  /* Add your custom colors */
}

Adding New Task Types

Extend the task types in src/types/kanban.ts:

export type IssueType = 'bug' | 'feature' | 'enhancement' | 'documentation' | 'your-new-type';

🧪 Testing

Currently, the project focuses on TypeScript compilation and ESLint for code quality. To run the linter:

npm run lint

🚀 Deployment

Building for Production

npm run build

This creates a dist folder with optimized production files.

Deployment Options

• Vercel: Deploy directly from GitHub repository
• Netlify: Drag and drop the dist folder
• GitHub Pages: Use GitHub Actions for automated deployment
• Docker: Containerize the application for cloud deployment

Example GitHub Actions Workflow

name: Deploy to GitHub Pages
on:
  push:
    branches: [ main ]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '18'
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

🤝 Contributing

We welcome contributions from the community! Please follow these steps:

Development Workflow

1. Fork the repository

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

1. Create a feature branch

git checkout -b feature/amazing-feature

1. Make your changes
2. Follow the existing code style and conventions
3. Add TypeScript types for new components

4. Update documentation if needed

5. Test your changes

npm run lint        # Check code quality
npm run build       # Ensure build works

1. Commit your changes

git commit -m "feat: add amazing feature"

1. Push to your fork

git push origin feature/amazing-feature

1. Open a Pull Request
2. Provide a clear description of changes
3. Link any related issues
4. Add screenshots for UI changes

Contribution Guidelines

• Code Style: Follow the existing TypeScript and React patterns
• Commits: Use conventional commit messages (feat, fix, docs, style, refactor, test, chore)
• Documentation: Update README.md for significant changes
• Testing: Ensure your changes don't break existing functionality

Reporting Issues

When reporting bugs, please include: - Steps to reproduce the issue - Expected vs actual behavior - Screenshots (if applicable) - Browser and device information

📊 Project Stats