Tabata Timer App - Copilot Instructions

Project Overview

This is a React + TypeScript + Vite Tabata timer application with comprehensive workout management, visual timer, audio feedback, and localStorage persistence. The app features a blue-themed, inspiring design with full workout customization capabilities.

Key Features

Visual Timer: Animated circular progress indicator with countdown
Workout Management: Create, edit, delete, and store multiple workout configurations
Audio System: Pulse-based beeps (1 per second) for warnings and exercise transitions
Pause/Resume: Full timer control with pause and resume functionality
Responsive Design: Works on desktop and mobile devices
localStorage: All workout configurations persist locally

Project Structure

src/
├── App.tsx                 # Main app router and state management
├── App.css                 # Main app styles (blue gradient theme)
├── index.css               # Global styles and resets
├── types.ts                # TypeScript type definitions
├── main.tsx                # React app entry point
└── components/
    ├── WorkoutSelector.tsx  # Main screen for selecting workouts
    ├── WorkoutSelector.css  # Workout selector styles
    ├── TabataTimer.tsx      # Timer component with circular progress
    ├── TabataTimer.css      # Timer styles and animations
    ├── Settings.tsx         # Workout management and editor
    └── Settings.css         # Settings and editor styles

Development Guidelines

Build Verification

ONLY use
npm run build
to verify the project has no build errors
DO NOT run
npm run dev
or open local browser during development
ONLY run
npm run build
when changes might create build errors (e.g., TypeScript changes, imports, new components)
Avoid unnecessary builds for minor changes like CSS styling, documentation, or configuration files
The project should compile cleanly without warnings or errors

Code Style

Use TypeScript with strict mode enabled

Import types with

import type { ... }

syntax due to

verbatimModuleSyntax: true

Add
```
.tsx
```
and
```
.ts
```
extensions to imports for module resolution
Follow React functional component patterns with hooks

Audio System Guidelines

Web Audio API implementation with proper user interaction initialization
AudioContext must be created only after user interaction (browser policy)
Pulse-like beeps: 100ms duration, 1-second intervals for countdown
Error handling for audio failures with console logging
Test audio button available for users to verify audio functionality

Timer State Management

TimerState:

'stopped' | 'ready' | 'exercise' | 'rest' | 'roundRest' | 'paused' | 'completed'

Timer only starts when user clicks "Start Workout" button
Supports pause/resume functionality with previous state tracking
Proper cleanup of intervals on component unmount

Data Models

interface Workout {
  id: string
  name: string
  exerciseDuration: number    // 1-180 seconds
  restDuration: number        // 0-60 seconds (0 = no rest)
  exerciseCount: number       // 1-20 exercises per round
  roundCount: number          // 1-25 rounds
  roundRestDuration: number   // 0-180 seconds between rounds
}

Audio Events

Warning beeps: 3 pulses, 1 per second, starting 3 seconds before end
Start signals: 3 pulses when beginning new exercise/round
Completion sound: 4-note celebratory sequence (C-E-G-C)
All beeps use 600Hz frequency for warnings, chord progression for completion

Styling Guidelines

Blue gradient theme:
```
#eff6ff
```
to
```
#bfdbfe
```
background
Primary colors:
```
#3b82f6
```
(blue),
```
#ef4444
```
(red),
```
#22c55e
```
(green)
Responsive design with mobile-first approach
Smooth transitions and hover effects
Box shadows for depth and visual hierarchy

localStorage Integration

Key:
```
'tabata-workouts'
```
Store array of Workout objects as JSON
Default workout created if none exists
Immediate persistence on create/edit/delete operations

Common Patterns

Component Props: Always destructure props with TypeScript typing
State Updates: Use functional updates for state that depends on previous state
Error Handling: Wrap audio operations in try-catch blocks
Console Logging: Include debug logging for audio events and timer state changes
Responsive Design: Use CSS Grid and Flexbox for layouts

Testing Approach

Build verification only:
```
npm run build
```
No need to run development server or browser testing
Focus on TypeScript compilation and build success
Watch for console warnings about unused variables or imports

File Modifications

When editing existing files, include 3-5 lines of context before and after changes
Preserve existing code formatting and indentation
Update related CSS when adding new components or states
Maintain consistent import patterns across files

Important Notes

Project uses Vite with React and TypeScript
HMR (Hot Module Replacement) enabled for development
Strict TypeScript configuration with verbatim module syntax
No external dependencies for audio - uses Web Audio API
Mobile-responsive design considerations throughout
Accessibility considerations for button interactions and audio feedback

Tabata Timer App - Copilot Instructions

Project Overview

Key Features

Visual Timer: Animated circular progress indicator with countdown
Workout Management: Create, edit, delete, and store multiple workout configurations
Audio System: Pulse-based beeps (1 per second) for warnings and exercise transitions
Pause/Resume: Full timer control with pause and resume functionality
Responsive Design: Works on desktop and mobile devices
localStorage: All workout configurations persist locally

Project Structure

src/
├── App.tsx                 # Main app router and state management
├── App.css                 # Main app styles (blue gradient theme)
├── index.css               # Global styles and resets
├── types.ts                # TypeScript type definitions
├── main.tsx                # React app entry point
└── components/
    ├── WorkoutSelector.tsx  # Main screen for selecting workouts
    ├── WorkoutSelector.css  # Workout selector styles
    ├── TabataTimer.tsx      # Timer component with circular progress
    ├── TabataTimer.css      # Timer styles and animations
    ├── Settings.tsx         # Workout management and editor
    └── Settings.css         # Settings and editor styles

Development Guidelines

Build Verification

ONLY use
npm run build
to verify the project has no build errors
DO NOT run
npm run dev
or open local browser during development
ONLY run
npm run build
when changes might create build errors (e.g., TypeScript changes, imports, new components)
Avoid unnecessary builds for minor changes like CSS styling, documentation, or configuration files
The project should compile cleanly without warnings or errors

Code Style

Use TypeScript with strict mode enabled

Import types with

import type { ... }

syntax due to

verbatimModuleSyntax: true

Add
```
.tsx
```
and
```
.ts
```
extensions to imports for module resolution
Follow React functional component patterns with hooks

Audio System Guidelines

Web Audio API implementation with proper user interaction initialization
AudioContext must be created only after user interaction (browser policy)
Pulse-like beeps: 100ms duration, 1-second intervals for countdown
Error handling for audio failures with console logging
Test audio button available for users to verify audio functionality

Timer State Management

TimerState:

'stopped' | 'ready' | 'exercise' | 'rest' | 'roundRest' | 'paused' | 'completed'

Timer only starts when user clicks "Start Workout" button
Supports pause/resume functionality with previous state tracking
Proper cleanup of intervals on component unmount

Data Models

interface Workout {
  id: string
  name: string
  exerciseDuration: number    // 1-180 seconds
  restDuration: number        // 0-60 seconds (0 = no rest)
  exerciseCount: number       // 1-20 exercises per round
  roundCount: number          // 1-25 rounds
  roundRestDuration: number   // 0-180 seconds between rounds
}

Audio Events

Warning beeps: 3 pulses, 1 per second, starting 3 seconds before end
Start signals: 3 pulses when beginning new exercise/round
Completion sound: 4-note celebratory sequence (C-E-G-C)
All beeps use 600Hz frequency for warnings, chord progression for completion

Styling Guidelines

Blue gradient theme:
```
#eff6ff
```
to
```
#bfdbfe
```
background
Primary colors:
```
#3b82f6
```
(blue),
```
#ef4444
```
(red),
```
#22c55e
```
(green)
Responsive design with mobile-first approach
Smooth transitions and hover effects
Box shadows for depth and visual hierarchy

localStorage Integration

Key:
```
'tabata-workouts'
```
Store array of Workout objects as JSON
Default workout created if none exists
Immediate persistence on create/edit/delete operations

Common Patterns

Component Props: Always destructure props with TypeScript typing
State Updates: Use functional updates for state that depends on previous state
Error Handling: Wrap audio operations in try-catch blocks
Console Logging: Include debug logging for audio events and timer state changes
Responsive Design: Use CSS Grid and Flexbox for layouts

Testing Approach

Build verification only:
```
npm run build
```
No need to run development server or browser testing
Focus on TypeScript compilation and build success
Watch for console warnings about unused variables or imports

File Modifications

When editing existing files, include 3-5 lines of context before and after changes
Preserve existing code formatting and indentation
Update related CSS when adding new components or states
Maintain consistent import patterns across files

Important Notes

Project uses Vite with React and TypeScript
HMR (Hot Module Replacement) enabled for development
Strict TypeScript configuration with verbatim module syntax
No external dependencies for audio - uses Web Audio API
Mobile-responsive design considerations throughout
Accessibility considerations for button interactions and audio feedback

Tabata Timer App - Copilot Instructions

Tabata Timer App - Copilot Instructions

Project Overview

Key Features

Project Structure

Development Guidelines

Build Verification

Code Style

Audio System Guidelines

Timer State Management

Data Models

Audio Events

Styling Guidelines

localStorage Integration

Common Patterns

Testing Approach

File Modifications

Important Notes

Related Skills

Markdown Converter

Nano Banana Pro

1password

Tabata Timer App - Copilot Instructions

Project Overview

Key Features

Project Structure

Development Guidelines

Build Verification

Code Style

Audio System Guidelines

Timer State Management

Data Models

Audio Events

Styling Guidelines

localStorage Integration

Common Patterns

Testing Approach

File Modifications

Important Notes