Focus Tasks is a polished single-page task manager built for fast, distraction-free planning. It lets users capture tasks, keep their list organized, and monitor completion progress without requiring an account or backend.
All task data is persisted locally in the browser, so the list remains available after refreshing or reopening the app on the same device and browser.
- Add new tasks with input validation
- Mark tasks as active or completed
- Edit existing task titles inline
- Delete individual tasks or clear the complete list
- Filter tasks by all, active, or completed status
- Search tasks by title in real time
- View total, active, completed, and completion-rate statistics
- Persist tasks automatically with
localStorage - Responsive layout for desktop, tablet, and mobile screens
- Accessible labels and keyboard-friendly form interactions
| Layer | Technology |
|---|---|
| UI | React 19 |
| Build tool | Vite 8 |
| Styling | Tailwind CSS 4 |
| State | React Hooks (useState, useEffect, useMemo) |
| Persistence | Browser localStorage |
| Code quality | ESLint |
| Deployment | Vercel |
src/
├── App.jsx
├── index.css
├── main.jsx
└── components/
├── TaskForm/
│ └── TaskForm.jsx
├── TaskItem/
│ └── TaskItem.jsx
└── TaskList/
└── TaskList.jsx
- Node.js 18 or newer
- npm
git clone https://github.com/danish-devx/Task-Manager-App.git
cd Task-Manager-App
npm installnpm run devOpen the local URL shown by Vite in your browser.
| Command | Purpose |
|---|---|
npm run dev |
Start the development server |
npm run build |
Create a production build |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint checks |
Tasks are stored only in the browser's local storage under the focus-tasks key. No task data is sent to a server or collected by the application.
The production build is deployed through Vercel and is available at:
https://task-manager-app-sigma-brown.vercel.app/
Built by Danish DevX.
- GitHub: @danish-devx
- Repository: Task-Manager-App