A professional stage timing application built with React, TypeScript, and Electron, designed for live events, presentations, and performances. Features a massive attention-grabbing "Up Next" display and comprehensive program management.
- Attention-grabbing color sequence: 8 bright colors cycling rapidly for 1.6 seconds
- Massive text sizes: Program names up to 192px (12rem) for distant visibility
- Duration display: Shows exact minutes prominently
- Full screen coverage: Maximum visual impact for stage presentations
- Dual Timer Display: Setup timer for preparation + Live timer with fullscreen
- Background timer protection: Prevents pausing when window is in background
- Extra time management: Add bonus time during presentations
- Timer history: Track and replay previous timers (48-hour auto-expiration)
- Single instance protection: Prevents multiple app windows
- Category organization: Group programs by event segments
- Program counts: Visual badges showing programs per category
- Export/Import: CSV template for bulk program management
- Quick program selection: One-click program timing
- "Up Next" notifications: Send program alerts with massive display
- Custom alert messages: Display any text on screen
- Flash alerts: Attention-grabbing flashing mode
- Scrolling text display: Smooth text animation
- Alert consistency: Identical display on main and live screens
- Adjustable timer sizes: Scale all display elements
- Custom backgrounds: Image, Video, or Webcam support
- Splash screen customization: Default gradient or custom image
- Clock display option: Show current time
- Custom scrollbars: Professional UI throughout
- Automatic detection: Opens on secondary screen when available
- Display switching: Easy switching between multiple displays
- Taskbar integration: Secondary window hidden from taskbar
- Cross-screen synchronization: Consistent alerts across displays
- Persistent storage: All data saved locally
- Export/Import programs: CSV template system
- Category management: Safe deletion with confirmation modals
- Cache management: Clear cache option with data preservation
- Auto-backup: Timer history with expiration
- Frontend: React 18, TypeScript, Tailwind CSS
- Build Tool: Vite
- Desktop: Electron
- Icons: Lucide React
- Server: Node.js HTTP server (bundled)
flexible-stage-timer/
├── vite-core/ # React frontend application
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── types/ # TypeScript definitions
│ │ └── main.tsx # App entry point
│ └── dist/ # Built frontend files
├── public/ # Static assets and built files
├── main.js # Electron main process
├── preload.js # Electron preload script
└── package.json # Project configuration
-
Clone the repository:
git clone https://github.com/johnbenet009/flexible-stage-timer.git cd flexible-stage-timer -
Install dependencies:
# Install main dependencies npm install # Install frontend dependencies cd vite-core npm install cd ..
-
Run in development:
# Start the app npm start # Or run frontend in dev mode npm run dev
```bash
npm run build-clean
npm run build-installer
**Why Windows Build for All Platforms?**
- ✅ **Works on Windows** - Native execution
- ✅ **Works on Ubuntu/Linux** - Via Wine (simple installation)
- ✅ **Works on macOS** - Via Wine or virtualization
- ✅ **Single build process** - No cross-compilation needed
- ✅ **Smaller distribution** - One executable for everyone
#### Linux Build (Optional - For Native Linux)
```bash
# Build Linux directory (recommended - avoids Windows symlink issues)
npm run build-linux
# Build clean directory version for Linux (removes language packs)
npm run build-linux-clean
# Try AppImage build (may have symlink issues on Windows)
npm run build-linux-appimage
```bash
npm run build
npx electron-builder --dir
node build-clean.js
npx electron-builder --win nsis
#### Build Output
**Primary Distribution (Windows Build):**
- **`dist/Stage Timer App Setup 2.0.1.exe`** - NSIS installer (83.4 MB) - **Recommended for all platforms**
- **`dist/win-unpacked/`** - Clean app directory (no language packs)
**Alternative Distribution (Linux Build):**
- **`dist/linux-unpacked/`** - Clean app directory (no language packs)
- **`dist/Stage Timer App-2.0.1.AppImage`** - AppImage for distribution (may have issues on Windows)
- **`dist/stage-timer-app_2.0.1_amd64.deb`** - DEB package for Debian/Ubuntu (may have issues on Windows)
**Cleanup Scripts:**
- **`build-clean.js`** - Windows cleanup script
- **`build-clean-linux.js`** - Linux cleanup script
### Cross-Platform Building
**Building Linux on Windows:**
- Use `npm run build-linux` for directory builds (recommended)
- AppImage/DEB builds may fail due to Windows symlink permissions
- The `linux-unpacked` directory contains the complete Linux application
**Building Windows on Linux:**
- Use `npm run build-installer` for NSIS installer
- Use `npm run build-clean` for directory builds
### Installation Instructions
#### Windows Users
1. Download `Stage Timer App Setup 2.0.1.exe`
2. Run the installer
3. Launch from Start Menu or Desktop
#### Ubuntu/Linux Users (Recommended Method)
```bash
# Install Wine (one-time setup)
sudo apt update
sudo apt install wine
# Download and run the Windows installer
wine "Stage Timer App Setup 2.0.1.exe"
# Install Wine and run the unpacked version directly
sudo apt install wine
wine "win-unpacked/Stage Timer App.exe"
# Or use native Linux build (requires manual setup)
chmod +x "linux-unpacked/Stage Timer App"
./"linux-unpacked/Stage Timer App"# Install Wine via Homebrew
brew install wine-stable
# Run the Windows executable
wine "Stage Timer App Setup 2.0.1.exe"- Setup Timer: Prepare timing with +/- controls
- Live Timer: Fullscreen display for presentations
- Keyboard Shortcuts: Space (start/pause), S (stop), R (reset), A (attention)
- Create Categories: Organize programs by event type
- Add Programs: Use the modal form with duration controls
- Quick Start: Click program name to start timing
- Send Notifications: Use "Up Next" to alert audience
- Timer Sizes: Adjust all display elements
- Backgrounds: Upload images, videos, or use webcam
- Splash Screen: Customize startup display
- Multi-Screen: Switch between available displays
We welcome contributions! Please follow these guidelines:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature-name
- Make your changes following the existing code style
- Test thoroughly - ensure all features work correctly
- Build and test the installer
- Commit with clear messages:
git commit -m "feat: add new timer feature" - Push to your fork:
git push origin feature/your-feature-name
- Create a Pull Request with detailed description
- TypeScript: Use strict typing
- React: Functional components with hooks
- Styling: Tailwind CSS utility classes
- Commits: Follow conventional commit format
- Testing: Test on multiple screen configurations
- Clear title: Describe the feature/fix
- Detailed description: Explain what changed and why
- Screenshots: For UI changes
- Testing notes: How to test the changes
- Breaking changes: Document any breaking changes
feature/description- New featuresfix/description- Bug fixesdocs/description- Documentation updatesrefactor/description- Code refactoring
When reporting bugs, please include:
- OS and version
- App version (check Help > About)
- Steps to reproduce
- Expected vs actual behavior
- Screenshots if applicable
This project is licensed under the MIT License.
John Benet - @johnbenet009
- Built with React and TypeScript
- Styled with Tailwind CSS
- Icons by Lucide React
- Packaged with Electron
- Built with Vite
Ready for professional stage presentations! 🎭✨