Release v0.3.0

.github/workflows/deploy.yml

@@ -1,55 +1,52 @@
 name: Deploy React App to GitHub Pages
 
 on:
-    push:
-        branches:
-            - main
-        paths:
-            - 'public/**'
-            - 'src/**'
-
-    pull_request:
-        branches:
-            - main
-        paths:
-            - 'public/**'
-            - 'src/**'
-
-    workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - 'public/**'
+      - 'src/**'
+      - 'index.html'
+      - 'vite.config.ts'
+      - 'package.json'
+
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'public/**'
+      - 'src/**'
+      - 'index.html'
+      - 'vite.config.ts'
+      - 'package.json'
+
+  workflow_dispatch:
 
 jobs:
-    build-deploy:
-        runs-on: ubuntu-latest
-
-        steps:
-            - name: Checkout code
-              uses: actions/checkout@v4
-
-            - name: Set up Node.js
-              uses: actions/setup-node@v4
-              with:
-                  node-version: 20
-
-            - name: Cache Node.js modules
-              uses: actions/cache@v4
-              with:
-                  path: node_modules
-                  key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
-                  restore-keys: |
-                      ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
-
-            - name: Install dependencies
-              if: steps.cache.outputs.cache-hit != 'true'
-              run: npm ci
-
-            - name: Build the project
-              run: npm run build
-              env:
-                  CI: false
-                  REACT_APP_SENTRY_DSN: ${{ secrets.REACT_APP_SENTRY_DSN }}
-
-            - name: Deploy to GitHub Pages
-              uses: peaceiris/actions-gh-pages@v4
-              with:
-                  github_token: ${{ secrets.GH_TOKEN }}
-                  publish_dir: ./build
+  build-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build the project
+        run: npm run build
+        env:
+          VITE_SENTRY_DSN: ${{ secrets.REACT_APP_SENTRY_DSN }}
+
+      - name: Deploy to GitHub Pages
+        if: github.ref == 'refs/heads/main'
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GH_TOKEN }}
+          publish_dir: ./dist

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+All notable changes to Mellow Visual Timer are documented in this file.
+
+## [0.3.0] - 2026-08-19
+
+### Added
+
+- Focus session history, daily and weekly focus statistics, and streak tracking.
+- Downloadable social sharing image cards for daily focus achievements.
+- Preset alarm sounds, volume control, and custom audio uploads.
+- Five built-in themes and custom theme management.
+- About-tab version information with a link to release notes.
+
+### Changed
+
+- Combined timer direction, alarm sound, and volume settings into one tab.
+- Simplified the focus-statistics sharing UI and added distinct KPI emoji markers.
+- Migrated the app build to Vite with Vite PWA support.
+

README.md

@@ -3,7 +3,7 @@
 [![ko1](https://img.shields.io/badge/Nomad%20Coders%20커뮤니티-Visual%20Timer%20소개-4A7658)](https://nomadcoders.co/community/thread/10687)
 [![ko2](https://img.shields.io/badge/Velog%20포스트-Visual%20Timer%20--%20쉽고%20간단하게%20시각적으로%20시간%20관리하기-9079C9)](https://velog.io/@do0ori/Visual-Timer-쉽고-간단하게-시각적으로-시간-관리하기)
 
-**Mellow Visual Timer** is a user-friendly, customizable web-based timer application designed to help users efficiently manage their time. It features a **base timer**, a **timer list** for creating predefined timers(basic timers), and a **routine timer** to sequentially execute timers—making it perfect for techniques like the Pomodoro method. The app offers various customization options, including themes, sound settings, and flexible timer configurations.
+**Mellow Visual Timer** is a user-friendly, customizable web-based timer application designed to help users efficiently manage their time. It features a **base timer**, a **timer list** for creating predefined timers (basic timers), and a **routine timer** to sequentially execute timers—making it perfect for techniques like the Pomodoro method. The app also provides focus statistics, shareable achievement cards, customizable themes, and flexible timer and sound settings.
 
 ## 🛠️ Usage
 
@@ -22,8 +22,11 @@
     - The timer will continue running even if you switch tabs or minimize the app.
 4. **Stay Notified**:
     - A **popup notification** and **alarm sound** will alert you when the timer finishes.
-    - Set your preferred alarm sound and volume in the **Settings menu**.
-5. **Switch Between Modes**:
+    - Set a preset or uploaded audio file, then adjust its volume in **Timer & Sound** settings.
+5. **Track Your Focus**:
+    - Review today's focus time, seven-day total, completed session history, and current streak.
+    - Download a shareable daily achievement card from **Focus Stats & Share** settings.
+6. **Switch Between Modes**:
     - The app automatically optimizes its layout for both **portrait** and **landscape** modes.
 
 ## ✨ Key Features
@@ -45,33 +48,46 @@
         -   Workout routines with different exercises and rest periods.
         -   Extending beyond the default 60-minute limit by chaining timers together.
 
-### 3. **Customizable Themes**
+### 3. **Focus Stats & Share Cards**
 
--   Choose from three unique themes:
-    -   **Beige-Green**
-    -   **Gray-Purple**
-    -   **Black-Green**
+-   Automatically records completed focus sessions.
+-   View today's focused time, a seven-day total, session history, and day streaks.
+-   Generate a shareable daily achievement card for social media.
+
+### 4. **Customizable Themes**
+
+-   Choose from five built-in themes:
+    -   **Beige Green**
+    -   **Gray Purple**
+    -   **Black Green**
+    -   **Sky Blue**
+    -   **Lovely Pink**
 -   Adjust the color of the timer disk independently for a personalized look.
 -   It is also possible to create your own custom themes.
 
-### 4. **Screen Wake Lock**
+### 5. **Customizable Timer & Sound Settings**
+
+-   Set the timer direction to clockwise or counter-clockwise from one settings tab.
+-   Choose a preset alarm tone, control its volume, or upload a custom audio file.
+
+### 6. **Screen Wake Lock**
 
 -   Prevents the screen from turning off while the timer is running, ensuring uninterrupted visibility during tasks like workouts or study sessions.
 
-### 5. **Background Functionality with Notifications**
+### 7. **Background Functionality with Notifications**
 
 -   Even when the app is in the background, the timer continues to function.
 -   Notifications provide real-time updates on the remaining time or when the timer finishes.
 
-### 6. **Intuitive and Familiar Controls**
+### 8. **Intuitive and Familiar Controls**
 
 -   Close the timer using the **ESC key** or cancel actions with the **back button**—supporting both web and app-like usage.
 
-### 7. **Optimized for Both Portrait and Landscape Modes**
+### 9. **Optimized for Both Portrait and Landscape Modes**
 
 -   Automatically adjusts the layout based on device orientation for a more user-friendly experience.
 
-### 8. **PWA Support for Web and Mobile**
+### 10. **PWA Support for Web and Mobile**
 
 -   Fully functional on both web and mobile platforms.
 
@@ -103,12 +119,19 @@
 ## 💻 Technology Stack
 
 <p>
+    <img src="https://img.shields.io/badge/React-18-61DAFB?style=for-the-badge&logo=react&logoColor=white">
     <img src="https://img.shields.io/badge/Typescript-2d79c7?style=for-the-badge&logo=Typescript&logoColor=white">
-    <img src="https://img.shields.io/badge/Create React App-282c35?style=for-the-badge&logo=createreactapp&logoColor=09D3AC">
+    <img src="https://img.shields.io/badge/Vite-6-646CFF?style=for-the-badge&logo=vite&logoColor=white">
     <img src="https://img.shields.io/badge/Tailwind CSS-131729?style=for-the-badge&logo=tailwindcss&logoColor=78baf2">
     <img src="https://img.shields.io/badge/Zustand-494237?style=for-the-badge&logo=React">
+    <img src="https://img.shields.io/badge/PWA-vite--plugin--pwa-5A0FC8?style=for-the-badge&logo=pwa&logoColor=white">
 </p>
 
+-   **UI & routing:** React 18, React Router 7, Headless UI, React Icons
+-   **State & forms:** Zustand 5, React Hook Form
+-   **Build & styling:** Vite 6, TypeScript 5, Tailwind CSS 3
+-   **Offline support:** Vite PWA and Workbox
+
 ## 📦 Setup and Installation
 
 1. Clone the repository:
@@ -127,7 +150,14 @@
 3. Start the development server:
 
     ```bash
-    npm start
+    npm run dev
+    ```
+
+4. Create a production build or preview it locally:
+
+    ```bash
+    npm run build
+    npm run preview
     ```
 
 ## 🤝 Contributions
@@ -139,3 +169,8 @@ Contributions are welcome! To contribute:
 3. Submit a **pull request** with a clear description of your changes.
 
 Feel free to open [issues](https://github.com/do0ori/visual-timer/issues) for bug reports or feature suggestions.
+
+## Release Roadmap
+
+- **v0.3.0:** Vite migration, focus stats, custom alarm audio, unified settings, updated themes, and version information.
+- **v0.4.0 (planned):** A dedicated Routine Timer editing UX update, focused on clearer step creation, editing, reordering, and deletion.

index.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#4A7658" />
+    <meta
+      name="description"
+      content="Boost your productivity with Mellow Visual Timer. Create various timers effortlessly, from simple basic timers to routine timers for sequential execution. Timer theme customization is available. | 생산성을 높여주는 비주얼 타이머."
+    />
+    <meta
+      name="keywords"
+      content="mellow visual timer, visual timer, timer, clock, pomodoro timer, countdown, routine timer, productivity timer, 멜로우 비주얼 타이머, 비주얼 타이머, 타이머, 뽀모도로 타이머"
+    />
+    <meta name="author" content="do0ori" />
+    <meta name="google-site-verification" content="NgHf2WijZAyQCpB3TAzyIcZypW51Nd0hSMjVVULZpqY" />
+    <link rel="apple-touch-icon" href="/logo512.png" />
+    <link rel="canonical" href="https://do0ori.github.io/visual-timer/" />
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" />
+
+    <!-- Open Graph Tags -->
+    <meta property="og:title" content="Mellow Visual Timer - Customizable Basic, Routine Timer App" />
+    <meta
+      property="og:description"
+      content="Boost your productivity with Mellow Visual Timer. Create various timers effortlessly, from simple basic timers to routine timers for sequential execution."
+    />
+    <meta property="og:image" content="https://do0ori.github.io/visual-timer/logo512.png" />
+    <meta property="og:url" content="https://do0ori.github.io/visual-timer/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:locale:alternate" content="ko_KR" />
+
+    <!-- Twitter Card Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Mellow Visual Timer - Customizable Basic, Routine Timer App" />
+    <meta
+      name="twitter:description"
+      content="Boost your productivity with Mellow Visual Timer. Create various timers effortlessly."
+    />
+    <meta name="twitter:image" content="https://do0ori.github.io/visual-timer/logo512.png" />
+
+    <!-- iOS / PWA Capabilities -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <link rel="apple-touch-startup-image" href="/logo512.png" />
+
+    <title>Mellow Visual Timer - Customizable Basic, Routine Timer App</title>
+  </head>
+  <body class="overflow-hidden select-none antialiased">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root" class="h-full w-full"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>