TaskSwift is a local-first, lightweight, and blazing-fast task management application built with React 19, Vite, Tailwind CSS v4, and TypeScript.
It keeps all task data strictly within your browser's local storage—ensuring zero remote server latency and maximum privacy. The project also utilizes vite-plugin-singlefile to bundle the entire application (HTML, JS, CSS) into a single, standalone HTML file for easy sharing and offline usage.
- ⚡ Local-First & Instant: All tasks are saved locally on the client using browser storage (
localStorage). No sign-ups, no databases, no server delays. - 📦 Single-File Bundle: Compiles into a single portable
.htmlfile that runs in any modern browser without external dependencies. - 🎨 Modern Slate Design: Features a beautiful and minimal dark mode styled using Tailwind CSS v4.
- 📱 Fully Responsive: Optimized layout that scales seamlessly from small mobile screens to large desktop monitors.
- Framework: React 19
- Build Tool: Vite 7
- Styling: Tailwind CSS v4
- Language: TypeScript
- Bundler Plugin: vite-plugin-singlefile
Below is the directory structure of the application. Click the file links to view the source code:
- 📂 root
- 📄 package.json — Defines dependencies and build scripts.
- 📄 vite.config.ts — Configures Vite, including React and single-file bundling.
- 📄 tsconfig.json — TypeScript configurations.
- 📄 .gitignore — Configures git to ignore files like node_modules.
- 📄 index.html — HTML template entry point.
- 📂 src
The app is centered around a single React component, App. Here is a breakdown of its internal functions and types:
- Task: TypeScript representation of a task object.
type Task = { id: number; title: string; createdAt: number; };
- loadTasks(): A validation-safe helper function to fetch tasks from
localStorageon initial load. - Task State and Hooks:
tasks: Loaded dynamically usingloadTasks(), and synced with storage on changes viauseEffect.taskTitle: Holds the active title input.taskCountText: Formatted dynamic label usinguseMemofor optimization.
- Utility cn: A utility merging helper ensuring Tailwind style conflicts resolve gracefully.
To run this project, make sure you have Node.js installed (v18+ recommended).
Install all required dependencies:
npm installStart the hot-reloading development server:
npm run devThe application will run locally at http://localhost:5173.
Compile the application for production:
npm run buildThis command runs vite build, producing a single, self-contained HTML file in the dist folder. You can double-click this file or host it on any static web host!