Focus. | Task Management Dashboard

Overview

Focus. is a simple task management dashboard built to make keeping track of daily work easier. I wanted to build something that feels clean and focused without adding unnecessary features or complexity.

You can add tasks, set priorities, search through them, move them around, and switch between grid and list views. Your tasks are also saved locally, so they remain available when you come back to the app.

Features

Task Management

• Add new tasks quickly using the keyboard.
• Mark tasks as completed.
• Move tasks up or down to change their order.
• Automatically save the date when a task is created.
• Keep your task list available between sessions using browser storage.

Search & Filtering

• Search through tasks as you type.
• Quickly find a specific task without scrolling through the entire list.
• Filter the workspace based on the current task data.

Dashboard

• See the total number of tasks at a glance.
• Track how many tasks have been completed.
• Switch between Grid and List views depending on how you prefer to work.

Interface

The interface uses a dark, glass-inspired design with subtle animations and spacing to keep the workspace easy to scan.

The goal wasn't to add visual effects everywhere, but to create a UI that feels responsive while keeping the tasks themselves as the main focus.

---

Component Logic

flowchart TD
  subgraph Client ["UI Layer (React 18)"]
    HUD["Top Bar Telemetry"]
    Input["Task Initialization Engine"]
    Registry["Dynamic Task Grid/List"]
  end

  subgraph State ["Management Layer"]
    Store["useState (Tasks/User)"]
    Search["Filter Logic Engine"]
    Order["Migration Logic (Swap/Move)"]
  end

  Input -->|Action| Store
  Store --> HUD
  Store --> Search
  Search --> Registry
  Registry -->|Move| Order
  Order --> Store

Loading

Project Structure

focus-workspace/
├── src/
│   ├── components/        # Reusable UI components
│   ├── App.jsx            # Main application layout
│   ├── ToDoList.jsx       # Task management logic
│   ├── index.css          # Global styles
│   └── main.jsx           # Application entry point
├── public/                # Static assets
├── .gitignore
├── package.json
├── tailwind.config.js
└── vite.config.js

Tech Stack

• React 18 — UI and component architecture
• Tailwind CSS — Styling and responsive layout
• React Hooks — State and application logic
• Lucide React — Icons
• Vite — Development and build tooling
• LocalStorage — Client-side task persistence

Getting Started

1. Clone the repository

git clone https://github.com/abdul-rahman-0x/todo-app.git
cd todo-app

2. Install dependencies

Execute the package manager handshake:

npm install

3. Start the development server

npm run dev

The application will be available at: http://localhost:5173

License

This project is open-source and available under the MIT License.

Author

Built by Abdul Rahman