Public
Like
4
thirdTimer
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v1130View latest version
A minimalist web app implementing the "Third Time" productivity method.
- Work for as long or short as you like, until you want or need to break
- Break for up to one-third of the time you've just worked
- Save unused break time for later
- Handle interruptions and big breaks (meals)
- Flexible work/break timing
- Break time banking system
- Interruption handling
- Big break support for meals
- Clean, distraction-free interface with flat design
- Consistent rounded corners throughout the UI
- Customizable break fractions (1/2, 1/3, 1/4, 1/5, 1/6)
- Click "Start Working" to begin a work session
- Click "Take Break" when you want to stop working
- The app calculates your earned break time (work time ÷ 3)
- Take your break and click "Resume Work" when ready
- Any unused break time is saved for later
├── src/
│ ├── frontend/
│ │ ├── components/
│ │ │ ├── ActionButtons.tsx # Work/break action buttons
│ │ │ ├── BreakFractionSettings.tsx # Break fraction settings
│ │ │ ├── Button.tsx # Reusable button component
│ │ │ ├── Card.tsx # Card container component
│ │ │ ├── Footer.tsx # App footer
│ │ │ ├── HelpText.tsx # Help and instructions
│ │ │ ├── Icons.tsx # SVG icon components
│ │ │ ├── Link.tsx # Link component
│ │ │ ├── Notification.tsx # Notification system
│ │ │ ├── SessionStats.tsx # Session statistics
│ │ │ ├── StatsGrid.tsx # Statistics grid layout
│ │ │ ├── TimerContainer.tsx # Main timer container
│ │ │ └── TimerDisplay.tsx # Timer display component
│ │ ├── utils/
│ │ │ └── timer-actions.ts # Timer logic and actions
│ │ ├── index.html # Main app interface
│ │ ├── index.tsx # React app entry point
│ │ └── style.css # Styling
│ ├── backend/
│ │ └── index.ts # Static file server
│ └── shared/
│ ├── types.ts # Shared TypeScript types
│ └── utils.tsx # Shared utility functions
├── .vscode/ # VSCode settings
├── article.md # Article about the method
├── biome.json # Biome configuration
├── deno.json # Deno configuration
└── README.md # This file