Modern Task Manager

A sleek and efficient task management application built with React, TypeScript, and Vite.

check live site

https://modern-task-manager-dashboard.vercel.app/

Basic Features

1. Task Input: Add tasks with a title
2. Task Deletion: Delete tasks

Stretch Goals

1. Task Search: Use a search bar to find tasks
2. Task Completion: Mark tasks as completed
3. Priority Setting: Assign a priority level to tasks
4. Task Sorting: Sort tasks by various criteria
5. UI Animation: Improve user interface with animations

Extra features

• dark mode and light mode themes.
• Task Persistence: Persist tasks in local storage
• more sort functionality.

Tech Stack

• React 18
• TypeScript
• Vite
• Redux Toolkit
• TailwindCSS
• clsx + tailwind-merge for styling

Getting Started

1. Clone the repository:

git clone https://github.com/yourusername/modern-task-manager.git

2. Install dependencies:

cd modern-task-manager

npm install

3. Run in dev mode.

npm run dev

Project Structure

📦 Root
├── 📂 src/
│   ├── 📂 lib/
│   │   └── utils.ts                # Styling utilities with clsx and tailwind-merge
│   │
│   ├── 📂 store/
│   │   ├── store.ts                # Redux store setup with tasks and theme reducers
│   │   ├── taskSlice.ts            # Task management with CRUD, search, and sorting
│   │   └── themeSlice.ts           # Theme switching and persistence logic
│   │
│   ├── 📂 components/              # React components

Images of the app