More Premium Hugo Themes Premium Tailwind Themes

Kanban Task Management React Tailwind

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

Kanban Task Management React Tailwind

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

Author Avatar Theme by hesam-dearboy
Github Stars Github Stars: 127
Last Commit Last Commit: Apr 24, 2023 -
First Commit Created: Aug 27, 2024 -
default image

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.

Installation

To install and run this Kanban task management web app solution, follow these steps:

  1. Clone the repository
git clone <repository_url>
  1. Install dependencies
npm install
  1. Start the application
npm start
  1. Open your browser and visit http://localhost:3000 to view the application.

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.