Countdown

Lightweight countdown app rebuilt with React + Vite for the web and Capacitor for Android builds. It preserves the same UI/UX and functionality while enabling fully local Android Studio builds (no Expo/EAS).

Features

• Local persistence for countdown items and UI preferences using localStorage.
• List or grid layout toggle (responsive two-column grid on mobile).
• Creation-order list with inline up/down arrows to move items (shown when toggling edit mode).
• Per-countdown themes (5 light + 5 dark) with localized names.
• Play, pause/resume, and stop controls with icons on the home cards.
• Time display shows hh:mm:ss when idle and collapses to mm:ss or ss while running.
• Full-screen style edit sheet with compact hour/minute/second selectors.
• Edit mode exposes delete buttons with confirmation.
• Detail sheet blocks interaction with the home screen while open.
• Countdown end feedback with vibration (when available) and a brief blink highlight.
• UI language auto-detected (Spanish/English) from the OS.

How it works

Each countdown item stores:

• name: display name.
• totalSeconds: configured duration.
• remainingSeconds: current countdown value.
• themeId: color theme id.
• order: creation order (updated when using the move arrows).
• isRunning and isPaused: runtime state.

Timers update every second using lastTimestamp to reduce drift. When a countdown hits zero it stops automatically and resets its running state.

Preferences stored locally:

• viewMode: list or grid.

Development (Web)

Requirements

• Node.js 18+
• npm

Install

npm install

Quick commands

# Web dev server
npm run dev

# Web production build
npm run build

# Preview production build locally
npm run preview

Run (dev)

npm run dev

Build (static)

npm run build

The static site is generated in dist/.

GitHub Pages

Repository: dmarcosl/countdowns-webapp

This repo is configured to deploy automatically to GitHub Pages on every push to main.

1. Ensure Pages is enabled:
   • Repo Settings > Pages > Source: GitHub Actions
2. Push to main:

git add .
git commit -m "Deploy"
git push

3. Your site will be published at:

https://dmarcosl.github.io/countdowns-webapp/

Preview

npm run preview

Android (Capacitor + Android Studio)

This project builds locally using Android Studio (no paid cloud build).

One-time setup

npm install
npx cap add android

One-command Android workflow

npm run android

This runs a web build, syncs it into the native project, and opens Android Studio.

Sync web build to Android

npm run build
npx cap sync android

Open in Android Studio

npx cap open android

Then run on a connected device or emulator from Android Studio.

Generate APK (local)

From Android Studio:

• Build > Generate Signed Bundle / APK...

Or via Gradle:

cd android
./gradlew assembleDebug
# or
./gradlew assembleRelease

APK output:

• android/app/build/outputs/apk/debug/app-debug.apk
• android/app/build/outputs/apk/release/app-release.apk

After UI changes

Run the web build and sync again:

npm run build
npx cap sync android

When the app doesn't update on Android

If you change code/assets and don't see updates:

1. npm run build
2. npx cap sync android
3. In Android Studio: Build > Rebuild Project
4. Uninstall the app from the device and reinstall the APK (launcher caches icons).

Notes

• Vibration uses navigator.vibrate when supported on Android.
• The Android folder is generated by Capacitor and can be deleted/recreated as needed.