ToDoS (Local) – Premium React 19 Task Manager with AI Breakdown & Insights

Master your productivity with an intelligent, offline-first task management system powered by AI and modern React.

ToDoS combines beautiful design with powerful productivity features including smart task input, AI-powered task breakdown, Pomodoro-style Focus Mode, and actionable insights all stored securely in your browser with zero tracking.

⚠️ AI Usage Disclaimer: This application utilizes the OpenRouter API. While we provide configurations for free-tier models, please be aware that switching to premium models or high usage may result in costs billed to your OpenRouter account.

View Live Demo

Why Choose ToDoS?

Unlike traditional to-do apps, ToDoS uses Natural Language Processing (NLP) to extract dates, priorities, tags, and recurrence instantly. Stuck on a big task? Click the sparkles icon to invoke AI that breaks your work into actionable sub-steps. Your data stays yours all stored locally in LocalStorage with zero server-side tracking.

Core Features

• Smart Task Input – Use @ for dates, ! for priorities, # for tags, * for recurrence (e.g., “Finish report @tomorrow !high #work *daily”)
• AI Task Breakdown – Click the sparkles icon to intelligently decompose complex tasks into actionable sub-steps via OpenRouter API (supports GPT-4, Claude, Gemini, etc.)
• Focus Mode – Built-in 25-minute Pomodoro timer with customizable duration; your top task auto-pins for deep focus






• Insights Dashboard – Track productivity streaks, daily completion rates, priority distribution, and identify your “Focus Peak” day
• Calendar View – Visual monthly overview of your workload; switch between list and calendar layouts instantly






• Secure & Private – Uses Vercel Serverless Functions (BFF pattern) to securely proxy AI requests; your API key never touches the browser
• Offline-First Architecture – All task data persisted to LocalStorage; works without internet connection (AI features require network)
• Keyboard Shortcuts – Global hotkeys (/, i, t, f, s, b, Esc) accelerate workflows for power users

Technology Stack

Built with production-grade technology for speed, reliability, and maintainability:

• React 19 + TypeScript for type-safe, modern components
• Vite for lightning-fast builds and HMR development
• Tailwind CSS for responsive, customizable styling
• Zustand for lightweight, persisted state management
• Vercel Serverless Functions for secure API proxying
• OpenRouter API for flexible AI model selection

What’s Included

• Complete React 19 Source Code with TypeScript
• Vercel Serverless API Configuration (/api)
• Comprehensive HTML Documentation
• Values & Configuration Guide (.env.example)
• Project Structure Diagram
• Free Updates & Bug Fixes

System Requirements

• Node.js v18 or higher (LTS Recommended)
• npm (v9+ recommended)
• Modern web browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
• AI Features: Valid OpenRouter API Key
• Deployment: Vercel Account (Free Tier supported) or Node.js server

Quick Start (5 Minutes)

1. Extract the zip file.
2. Run npm install.
3. Rename .env.example to .env and add your OPENROUTER_API_KEY.
4. Run npm run dev.

Customization Friendly

Easily change colors via Tailwind config, adjust Pomodoro timer duration, or swap AI models in the serverless function. Full documentation included!