TomaFlow Pomodoro (PWA)

Read this in: English | 简体中文 | Español

Modern frontend-only Pomodoro app built with React + TypeScript + Tailwind CSS.
Includes tasks, analytics, multilingual UI, dark mode, and installable PWA support.

Screenshot

Live Demo

• GitHub Pages: https://bingoyb.github.io/tomaflow/
• Cloudflare Pages: https://tomaflow.pages.dev/
• Vercel: https://tomaflow.vercel.app/
• Demo mode: append #demo to the URL
• Example: https://bingoyb.github.io/tomaflow/#demo

Tech Stack

• React 18
• TypeScript 5
• Vite 5
• Tailwind CSS 3
• Recharts
• vite-plugin-pwa

Features

• Pomodoro modes: Work / Short Break / Long Break
• Notifications: sound + system notifications
• Task management: create, focus, complete, reopen, delete, drag-sort
• Analytics: totals, focus rate, daily breakdown, line/pie/bar charts
• Settings: durations, sound preset, volume, notification toggle, shortcuts
• Internationalization: 10 languages
• Themes: light and dark
• PWA: installable + offline cache

One-Click Deploy

• Vercel: click the Deploy with Vercel button above
• Cloudflare Pages: click the Deploy to Cloudflare Pages button above, then import this GitHub repo

Deployment Compatibility

This project now supports multiple deployment targets through VITE_BASE_PATH:

• GitHub Pages: VITE_BASE_PATH=/tomaflow/
• Vercel: default /
• Cloudflare Pages: default /

Implemented config:

• vite.config.ts: dynamic base, PWA start_url, and scope
• .github/workflows/deploy-pages.yml: sets VITE_BASE_PATH=/tomaflow/ during build
• vercel.json: Vite build/output + SPA rewrite
• wrangler.toml: Cloudflare Pages output directory
• public/_redirects: SPA fallback for Pages-style hosting

Local Development

npm install
npm run dev

Production Build

npm run build
npm run preview