Karthikeyan’s
Space

Task Board Management System

The Task Management Dashboard is a web application that allows users to efficiently create, view, and manage their tasks. It provides an intuitive interface for organizing tasks and staying on top of deadlines.
Github Link : https://github.com/Kar99k/task-management-dashboard
Live Link : https://task-management-dashboard-ebon.vercel.app/

Features :

  • Task Creation & Management: Add, edit, and delete tasks with ease.
  • Search by Title/Description: Quickly find tasks using keywords.
  • Filter by Status: View tasks based on their current status (Pending, In Progress, Completed).
  • Sort by Due Dates: Organize tasks by their deadlines to prioritize effectively.
  • Responsive Design: Accessible and user-friendly on both desktop and mobile devices.

Tech Stack

  • Next.js: Framework for building the application.
  • Tailwind CSS: Styling framework for responsive and modern UI design.
  • Next UI: Component library for a structured design system.
  • Framer Motion: Animation library to enhance interactivity.

High Level Design :

Functional Requirements

  1. List View: Display tasks in a list format.
  1. Board View: Organize tasks in a grid-based board.
  1. CRUD Operations:
      • Create new tasks.
      • Edit/Update existing tasks.
      • Delete tasks.
  1. Filtering and Sorting:
      • Filter tasks by status.
      • Sort tasks by due date (ascending/descending).
  1. Search Functionality (Bonus): Search tasks by description or title.
  1. Drag and Drop (Bonus): Intuitive reordering of tasks on the board.

Non-Functional Requirements

  1. Responsive Design:
      • Grid layout adapts for various screen sizes:
        • XL: 3 columns, MD: 2 columns, SM: 1 column.
  1. State Management:
      • Persistent data storage using Local Storage.
  1. User Experience Enhancements:
      • Animations using Framer Motion.
 
 

High-Level Design

  • User Interface:
    • Displays task items.
    • Triggers actions such as adding, filtering, or sorting tasks.
  • Task Store:
    • Manages the state of tasks and provides filtering, sorting, and CRUD functionalities.
  • Local Storage Integration:
    • Ensures tasks are stored persistently across sessions.
  • Service Layer:
    • Centralized logic for task manipulation (add, update, delete, save).
 

Demo :