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.

Summary

This Frontend Mentor project provides a comprehensive solution for a Kanban task management web app. By incorporating features like responsive design, CRUD operations, form validations, and drag and drop functionality, this project serves as a great opportunity for users to enhance their coding skills. Built with TailwindCSS, React, and Redux, this project demonstrates the use of modern technologies in web development.

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.