Skip to content

Latest commit

 

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 

Repository files navigation

TaskSwift ⚡️

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.


✨ Features

  • ⚡ 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 .html file 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.

🛠️ Tech Stack


📂 Project Structure

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
      • 📄 main.tsx — Main React entry point mounting the app.
      • 📄 App.tsx — Main application logic, UI, and local storage state.
      • 📄 index.css — Custom styles injecting Tailwind directive.
      • 📂 utils
        • 📄 cn.ts — Tailored class merges via clsx and tailwind-merge.

🔍 Code Walkthrough

Core Component Structure

The app is centered around a single React component, App. Here is a breakdown of its internal functions and types:

  1. Task: TypeScript representation of a task object.
    type Task = {
      id: number;
      title: string;
      createdAt: number;
    };
  2. loadTasks(): A validation-safe helper function to fetch tasks from localStorage on initial load.
  3. Task State and Hooks:
    • tasks: Loaded dynamically using loadTasks(), and synced with storage on changes via useEffect.
    • taskTitle: Holds the active title input.
    • taskCountText: Formatted dynamic label using useMemo for optimization.
  4. Utility cn: A utility merging helper ensuring Tailwind style conflicts resolve gracefully.

🚀 Getting Started

📋 Prerequisites

To run this project, make sure you have Node.js installed (v18+ recommended).

⚙️ Installation

Install all required dependencies:

npm install

💻 Development

Start the hot-reloading development server:

npm run dev

The application will run locally at http://localhost:5173.

📦 Production Build

Compile the application for production:

npm run build

This 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!

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors