📋 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

✨ Features

🎯 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

Clone the repository

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

Install dependencies

# Using npm
npm install

# Or using yarn
yarn install

Start the development server

# Using npm
npm run dev

# Or using yarn
yarn dev

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

Click the "Create Task" button or "Add Task" in any column
Fill in the task details (title, description, priority, etc.)
Assign team members and set due dates
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

Fork the repository

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

Create a feature branch

git checkout -b feature/amazing-feature

Make your changes
- Follow the existing code style and conventions
- Add TypeScript types for new components
- Update documentation if needed
Test your changes

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

Commit your changes

git commit -m "feat: add amazing feature"

Push to your fork

git push origin feature/amazing-feature

Open a Pull Request
- Provide a clear description of changes
- Link any related issues
- 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

🙏 Acknowledgments

shadcn/ui for the beautiful component library
Radix UI for accessible primitives
Tailwind CSS for the utility-first CSS framework
Lucide for the comprehensive icon library
The React and TypeScript communities for continuous innovation

Name		Name	Last commit message	Last commit date
Latest commit History 47 Commits
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
bun.lockb		bun.lockb
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

License

Krypto-Hashers-Community/Task-Management

Folders and files

Latest commit

History

Repository files navigation