{"id":31766242,"url":"https://github.com/ayokanmi-adejola/task-management","last_synced_at":"2025-10-10T00:30:21.325Z","repository":{"id":308414693,"uuid":"960508327","full_name":"Ayokanmi-Adejola/Task-Management","owner":"Ayokanmi-Adejola","description":"A comprehensive, cloud-based collaborative task management tool, meticulously designed to foster seamless teamwork and enhance project efficiency, featuring a dynamic system of real-time updates that ensure team members are consistently synchronized.","archived":false,"fork":false,"pushed_at":"2025-09-19T09:19:30.000Z","size":593,"stargazers_count":48,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-30T00:00:40.789Z","etag":null,"topics":["firebase","tailwind-css","typescript","vite"],"latest_commit_sha":null,"homepage":"https://ayokanmi-adejola-kanban.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ayokanmi-Adejola.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-04T14:56:23.000Z","updated_at":"2025-09-29T11:27:43.000Z","dependencies_parsed_at":"2025-08-05T21:19:27.383Z","dependency_job_id":null,"html_url":"https://github.com/Ayokanmi-Adejola/Task-Management","commit_stats":null,"previous_names":["ayokanmi-adejola/task-management"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ayokanmi-Adejola/Task-Management","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FTask-Management","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FTask-Management/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FTask-Management/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FTask-Management/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayokanmi-Adejola","download_url":"https://codeload.github.com/Ayokanmi-Adejola/Task-Management/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FTask-Management/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002359,"owners_count":26083356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","tailwind-css","typescript","vite"],"created_at":"2025-10-10T00:29:57.912Z","updated_at":"2025-10-10T00:30:21.318Z","avatar_url":"https://github.com/Ayokanmi-Adejola.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📋 Kanban Task Management\n\n\u003cdiv align=\"center\"\u003e\n\n![Task Management](https://img.shields.io/badge/Task-Management-blue?style=for-the-badge)\n![React](https://img.shields.io/badge/React-18.3.1-61DAFB?style=for-the-badge\u0026logo=react)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.5.3-3178C6?style=for-the-badge\u0026logo=typescript)\n![Tailwind](https://img.shields.io/badge/Tailwind_CSS-3.4.11-38B2AC?style=for-the-badge\u0026logo=tailwind-css)\n\nA 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.\n\n\n\u003c/div\u003e\n\n## 📱 Screenshots\n\n| Desktop | Tablet | Mobile |\n| ------- | ------ | ------ |\n| \u003cimg width=\"1920\" height=\"1237\" alt=\"Desktop view showing full Kanban board with three columns\" src=\"https://github.com/user-attachments/assets/3ddf2507-fb6f-47df-9989-09ac630f845d\" /\u003e | \u003cimg width=\"768\" height=\"618\" alt=\"Tablet view with responsive layout\" src=\"https://github.com/user-attachments/assets/504f0b16-f104-4173-9798-37ef3553d6d9\" /\u003e | \u003cimg width=\"351\" height=\"892\" alt=\"Mobile view with optimized navigation\" src=\"https://github.com/user-attachments/assets/d07ac3c8-ea4a-4c8f-be9b-37e34995027a\" /\u003e |\n\n## ✨ Features\n\n### 🎯 Core Functionality\n- **Drag \u0026 Drop Interface**: Intuitive task management with smooth drag-and-drop between columns\n- **Real-time Updates**: Instant synchronization of task changes across the board\n- **Responsive Design**: Optimized for desktop, tablet, and mobile devices\n- **Dark/Light Theme**: Toggle between themes with persistent user preference\n- **Search \u0026 Filter**: Advanced search functionality with multiple filter options\n\n### 👤 User Management\n- **Authentication System**: Secure login and registration with local storage\n- **User Profiles**: Customizable avatars and profile management\n- **Multi-user Support**: Assign tasks to different team members\n- **Session Persistence**: Automatic login state management\n\n### 📝 Task Management\n- **Create \u0026 Edit Tasks**: Comprehensive task creation with rich descriptions\n- **Priority Levels**: Set task priorities (Low, Medium, High, Critical)\n- **Issue Types**: Categorize tasks as Bug, Feature, Enhancement, or Documentation\n- **Due Dates**: Set and track task deadlines\n- **Tags \u0026 Labels**: Organize tasks with customizable tags\n- **Comments \u0026 Attachments**: Track task discussions and file attachments\n- **Task Analytics**: Visual indicators for task progress and statistics\n\n### 🎨 User Experience\n- **Modern UI Components**: Built with shadcn/ui component library\n- **Smooth Animations**: Elegant transitions and micro-interactions\n- **Accessibility**: WCAG compliant with proper ARIA labels and keyboard navigation\n- **Progressive Web App**: Offline support and native app-like experience\n- **Notifications**: Toast notifications for user actions and updates\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **[React 18.3.1](https://reactjs.org/)** - Modern React with hooks and concurrent features\n- **[TypeScript 5.5.3](https://www.typescriptlang.org/)** - Type-safe JavaScript development\n- **[Vite 5.4.1](https://vitejs.dev/)** - Fast build tool and development server\n- **[Tailwind CSS 3.4.11](https://tailwindcss.com/)** - Utility-first CSS framework\n\n### UI \u0026 Components\n- **[shadcn/ui](https://ui.shadcn.com/)** - High-quality, accessible component library\n- **[Radix UI](https://www.radix-ui.com/)** - Low-level UI primitives\n- **[Lucide React](https://lucide.dev/)** - Beautiful \u0026 consistent icon library\n- **[Tailwind Merge](https://github.com/dcastil/tailwind-merge)** - Utility for merging Tailwind classes\n\n### State Management \u0026 Data\n- **[TanStack Query 5.56.2](https://tanstack.com/query)** - Powerful data synchronization for React\n- **[React Hook Form 7.53.0](https://react-hook-form.com/)** - Performant forms with easy validation\n- **[Zod 3.23.8](https://github.com/colinhacks/zod)** - TypeScript-first schema validation\n- **[UUID](https://github.com/uuidjs/uuid)** - RFC4122 UUID generation\n\n### Utilities \u0026 Enhancements\n- **[date-fns 3.6.0](https://date-fns.org/)** - Modern JavaScript date utility library\n- **[Sonner](https://sonner.emilkowal.ski/)** - Opinionated toast component for React\n- **[React Router DOM 6.26.2](https://reactrouter.com/)** - Declarative routing for React\n- **[Class Variance Authority](https://cva.style/docs)** - Creating variant APIs for components\n\n### Development Tools\n- **[ESLint 9.9.0](https://eslint.org/)** - Code linting and formatting\n- **[TypeScript ESLint](https://typescript-eslint.io/)** - TypeScript-specific linting rules\n- **[PostCSS 8.4.47](https://postcss.org/)** - CSS transformation tool\n- **[Autoprefixer](https://github.com/postcss/autoprefixer)** - CSS vendor prefixing\n\n## 🚀 Getting Started\n\n### Prerequisites\n\nMake sure you have the following installed on your development machine:\n\n- **Node.js** (version 16.0 or higher)\n- **npm** (version 7.0 or higher) or **yarn** (version 1.22 or higher)\n- **Git** for version control\n\n```bash\n# Check your versions\nnode --version\nnpm --version\ngit --version\n```\n\n### Installation\n\n1. **Clone the repository**\n```bash\ngit clone https://github.com/Ayokanmi-Adejola/Task-Management.git\ncd Task-Management\n```\n\n2. **Install dependencies**\n```bash\n# Using npm\nnpm install\n\n# Or using yarn\nyarn install\n```\n\n3. **Start the development server**\n```bash\n# Using npm\nnpm run dev\n\n# Or using yarn\nyarn dev\n```\n\n4. **Open your browser**\nNavigate to [http://localhost:8081](http://localhost:8081) to see the application.\n\n### Environment Setup\n\nThe application runs on port `8081` by default. You can modify this in the `vite.config.ts` file if needed.\n\n```typescript\n// vite.config.ts\nexport default defineConfig({\n  server: {\n    host: \"::\",\n    port: 8081, // Change this port if needed\n  },\n  // ... other config\n});\n```\n\n## 📦 Available Scripts\n\n| Script | Description |\n|--------|-------------|\n| `npm run dev` | Starts the development server with hot reload |\n| `npm run build` | Creates an optimized production build |\n| `npm run build:dev` | Creates a development build |\n| `npm run lint` | Runs ESLint to check code quality |\n| `npm run preview` | Preview the production build locally |\n\n## 📁 Project Structure\n\n```\nTask-Management/\n├── public/                     # Static assets\n├── src/\n│   ├── components/            # Reusable UI components\n│   │   ├── ui/               # shadcn/ui components\n│   │   ├── KanbanBoard.tsx   # Main Kanban board component\n│   │   ├── TaskCard.tsx      # Individual task component\n│   │   └── ...\n│   ├── contexts/             # React context providers\n│   │   ├── AuthContext.tsx   # Authentication state\n│   │   └── ThemeContext.tsx  # Theme management\n│   ├── hooks/                # Custom React hooks\n│   ├── lib/                  # Utility functions\n│   ├── pages/                # Page components\n│   ├── types/                # TypeScript type definitions\n│   ├── utils/                # Helper functions\n│   └── main.tsx              # Application entry point\n├── components.json           # shadcn/ui configuration\n├── tailwind.config.ts        # Tailwind CSS configuration\n├── vite.config.ts           # Vite build configuration\n└── tsconfig.json            # TypeScript configuration\n```\n\n## 🎯 Usage\n\n### Creating Tasks\n1. Click the \"Create Task\" button or \"Add Task\" in any column\n2. Fill in the task details (title, description, priority, etc.)\n3. Assign team members and set due dates\n4. Click \"Create\" to add the task to the board\n\n### Managing Tasks\n- **Move Tasks**: Drag and drop tasks between columns (To Do, In Progress, Completed)\n- **Edit Tasks**: Click on any task to open the edit dialog\n- **Filter Tasks**: Use the filter button to search by status, priority, assignee, or tags\n- **Delete Tasks**: Remove tasks using the delete button in the task card\n\n### User Authentication\n- Register a new account or login with existing credentials\n- User sessions are persisted in local storage\n- Access user settings through the profile dropdown\n- Toggle between light and dark themes\n\n## 🔧 Configuration\n\n### Theme Customization\nThe application supports custom theming through CSS variables. Modify the theme in `src/index.css`:\n\n```css\n:root {\n  --background: 0 0% 100%;\n  --foreground: 222.2 84% 4.9%;\n  --primary: 221.2 83.2% 53.3%;\n  /* Add your custom colors */\n}\n```\n\n### Adding New Task Types\nExtend the task types in `src/types/kanban.ts`:\n\n```typescript\nexport type IssueType = 'bug' | 'feature' | 'enhancement' | 'documentation' | 'your-new-type';\n```\n\n## 🧪 Testing\n\nCurrently, the project focuses on TypeScript compilation and ESLint for code quality. To run the linter:\n\n```bash\nnpm run lint\n```\n\n## 🚀 Deployment\n\n### Building for Production\n\n```bash\nnpm run build\n```\n\nThis creates a `dist` folder with optimized production files.\n\n### Deployment Options\n\n- **Vercel**: Deploy directly from GitHub repository\n- **Netlify**: Drag and drop the `dist` folder\n- **GitHub Pages**: Use GitHub Actions for automated deployment\n- **Docker**: Containerize the application for cloud deployment\n\n### Example GitHub Actions Workflow\n\n```yaml\nname: Deploy to GitHub Pages\non:\n  push:\n    branches: [ main ]\njobs:\n  build-and-deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v2\n        with:\n          node-version: '18'\n      - run: npm install\n      - run: npm run build\n      - uses: peaceiris/actions-gh-pages@v3\n        with:\n          github_token: ${{ secrets.GITHUB_TOKEN }}\n          publish_dir: ./dist\n```\n\n## 🤝 Contributing\n\nWe welcome contributions from the community! Please follow these steps:\n\n### Development Workflow\n\n1. **Fork the repository**\n```bash\ngit clone https://github.com/your-username/Task-Management.git\ncd Task-Management\n```\n\n2. **Create a feature branch**\n```bash\ngit checkout -b feature/amazing-feature\n```\n\n3. **Make your changes**\n   - Follow the existing code style and conventions\n   - Add TypeScript types for new components\n   - Update documentation if needed\n\n4. **Test your changes**\n```bash\nnpm run lint        # Check code quality\nnpm run build       # Ensure build works\n```\n\n5. **Commit your changes**\n```bash\ngit commit -m \"feat: add amazing feature\"\n```\n\n6. **Push to your fork**\n```bash\ngit push origin feature/amazing-feature\n```\n\n7. **Open a Pull Request**\n   - Provide a clear description of changes\n   - Link any related issues\n   - Add screenshots for UI changes\n\n### Contribution Guidelines\n\n- **Code Style**: Follow the existing TypeScript and React patterns\n- **Commits**: Use conventional commit messages (feat, fix, docs, style, refactor, test, chore)\n- **Documentation**: Update README.md for significant changes\n- **Testing**: Ensure your changes don't break existing functionality\n\n### Reporting Issues\n\nWhen reporting bugs, please include:\n- Steps to reproduce the issue\n- Expected vs actual behavior\n- Screenshots (if applicable)\n- Browser and device information\n\n## 🙏 Acknowledgments\n\n- [shadcn/ui](https://ui.shadcn.com/) for the beautiful component library\n- [Radix UI](https://www.radix-ui.com/) for accessible primitives\n- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework\n- [Lucide](https://lucide.dev/) for the comprehensive icon library\n- The React and TypeScript communities for continuous innovation\n\n## 📊 Project Stats\n\n![GitHub stars](https://img.shields.io/github/stars/Ayokanmi-Adejola/Task-Management?style=social)\n![GitHub forks](https://img.shields.io/github/forks/Ayokanmi-Adejola/Task-Management?style=social)\n![GitHub issues](https://img.shields.io/github/issues/Ayokanmi-Adejola/Task-Management)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/Ayokanmi-Adejola/Task-Management)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**[⬆ Back to Top](#-kanban-task-management)**\n\nMade with ❤️ and ☕ by [Ayokanmi Adejola](https://github.com/Ayokanmi-Adejola)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Ftask-management","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayokanmi-adejola%2Ftask-management","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Ftask-management/lists"}