Task Management Dashboard

A lightweight, client-side task management dashboard built with React 19 and Tailwind CSS v4. It allows users to create, edit, delete, filter, and sort tasks - all persisted locally in the browser via localStorage.

Why This Project?

Managing day-to-day tasks shouldn't require heavyweight tools or cloud accounts. This dashboard provides a simple, fast, and privacy-friendly way to track tasks directly in the browser with zero backend dependencies. It's ideal for personal productivity, quick prototyping, or as a reference architecture for React + Tailwind projects.

Features

• Task CRUD — Create, read, update, and delete tasks with title, description, status, and due date
• Status Tracking — Three statuses: Pending, In Progress, Completed
• Summary Cards — At-a-glance counts for each status category
• Filtering — Filter tasks by status
• Sorting — Sort tasks by due date (ascending/descending)
• Dedicated Completed View — Separate page for completed tasks with status-only editing
• Persistent Storage — Tasks survive page reloads via localStorage
• Delete Confirmation — Modal confirmation before deleting a task
• Responsive Layout — Fully responsive grid layout for desktop and mobile

Tech Stack

Category	Package	Version	Purpose
UI Library	react	^19.2.7	Component-based UI rendering
DOM Renderer	react-dom	^19.2.7	React DOM bindings and portal support
Routing	react-router-dom	^6.26.0	Client-side routing with NavLink, Routes, Route
CSS Framework	tailwindcss	^4.3.2	Utility-first CSS styling
Tailwind Vite Plugin	@tailwindcss/vite	^4.3.2	Tailwind CSS integration with Vite
Build Tool	vite	^5.4.0	Fast dev server and production bundler
React Vite Plugin	@vitejs/plugin-react	^4.3.1	React Fast Refresh and JSX transform
Type Definitions	@types/react, @types/react-dom	^19.x	TypeScript type definitions for editor support

Prerequisites

• Node.js >= 18.x
• yarn (install via npm install -g yarn)

Getting Started

1. Clone the repository

git clone <repository-url>
cd task-management-dashboard

2. Install dependencies

yarn install

3. Start the development server

yarn dev

The app will be available at http://localhost:5173 by default.

4. Build for production

yarn build

The optimized output is generated in the dist/ directory.

5. Preview the production build

yarn preview

Project Structure

task-management-dashboard/
├── index.html                  # HTML entry point (loads Inter font, mounts React)
├── package.json                # Dependencies and scripts
├── vite.config.js              # Vite config with React and Tailwind plugins
├── src/
│   ├── main.jsx                # App bootstrap — BrowserRouter + TaskProvider
│   ├── App.jsx                 # Root layout — header nav + route definitions
│   ├── App.css                 # Global styles — Tailwind import, base resets
│   ├── context/
│   │   └── TaskContext.jsx     # Global state — useReducer + localStorage persistence
│   ├── pages/
│   │   ├── AllTasks.jsx        # Main dashboard — summary, filters, task grid, add/edit
│   │   └── CompletedTasks.jsx  # Completed-only view with status-only editing
│   └── components/
│       ├── TaskSummary.jsx     # Status count cards (Pending / In Progress / Completed)
│       ├── TaskCard.jsx        # Individual task card with edit/delete actions
│       ├── TaskForm.jsx        # Add/Edit form rendered inside a modal
│       ├── FilterBar.jsx       # Status filter + due date sort controls
│       └── Base/
│           ├── Button.jsx      # Reusable button (primary / secondary / danger variants)
│           ├── Input.jsx       # Reusable Input, Textarea, and Select components
│           ├── Modal.jsx       # Overlay modal with backdrop click-to-close
│           └── CustomSelect.jsx # Custom dropdown select with click-outside handling

Component Architecture

<BrowserRouter>
  <TaskProvider>                      ← Global state via React Context + useReducer
    <App>                             ← Layout shell (header + nav + routes)
      ├── Route "/" → <AllTasks>      ← Main dashboard page
      │   ├── <TaskSummary />         ← Status count cards
      │   ├── <FilterBar />           ← Filter + sort controls
      │   │   └── <CustomSelect />    ← Custom dropdown (x2)
      │   ├── <TaskCard />            ← Task cards (mapped from filtered list)
      │   │   ├── <Button />          ← Edit / Delete actions
      │   │   └── <Modal />           ← Delete confirmation (portal)
      │   └── <TaskForm />            ← Add/Edit modal form
      │       ├── <Input />
      │       ├── <Textarea />
      │       ├── <Select />
      │       └── <Button />
      │
      └── Route "/completed" → <CompletedTasks>
          ├── <TaskCard />            ← Completed task cards
          └── <TaskForm />            ← Status-only edit modal

State Management

State is managed centrally in TaskContext.jsx using React's useReducer:

Action	Description
ADD_TASK	Appends a new task with a crypto.randomUUID() id
EDIT_TASK	Merges updated fields into the matching task by id
DELETE_TASK	Removes a task by id

Tasks are automatically synced to localStorage on every state change via a useEffect hook, ensuring persistence across browser sessions.

Base Components

The Base/ directory contains four reusable primitives that enforce consistent styling:

• Button — Supports primary, secondary, and danger variants with sm and md sizes
• Input / Textarea / Select — Form controls with shared styling, labels, and required-field indicators
• Modal — Fixed overlay with backdrop click-to-close and scroll containment
• CustomSelect — Dropdown built from scratch with click-outside detection (no native <select>)

License

This project is private and not published to npm.