Kanban Task Management React Tailwind

screenshot of Kanban Task Management React Tailwind
react
tailwind
headless-ui

FrontendMentor GURU challenges , a kanban task management clone with react and tailwind and redux

Overview

This is a solution to the Kanban task management web app challenge on Frontend Mentor. The goal of this project is to help users improve their coding skills by building realistic projects involving creating, updating, and deleting boards and tasks, managing columns, marking subtasks as complete, and implementing drag and drop functionality.

Features

  • Optimal Layout: View the app with optimal layout based on device screen size.
  • Interactive Elements: See hover states for all interactive elements.
  • CRUD Operations: Create, read, update, and delete boards and tasks.
  • Form Validations: Receive form validations for creating/editing boards and tasks.
  • Subtask Management: Mark subtasks as complete and move tasks between columns.
  • Sidebar Navigation: Hide/show the board sidebar and switch between boards.
  • Column Management: Add or remove columns, necessary before adding tasks.
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

headless-ui
Headless UI

Headless UI is a set of completely unstyled, fully accessible UI components for React, Vue, and Alpine.js that empower developers to build their own fully accessible custom UI components. Headless UI allows developers to focus on building accessible and highly functional user interfaces, without the need to worry about styling or layout.