Brutal Pomodoro Timer

adresa projektu: https://brutaltimer.com

Základný popis

Pomodoro timer na zvýšenie produktivity pomocou techniky práce v intervaloch (work / short break / long break). Aplikácia je postavená ako Progressive Web App, takže sa dá nainštalovať na počítač alebo mobil a funguje aj offline. Časovač je počítaný pomocou epoch-based prístupu, takže nedochádza k posunu času a stav sa po zatvorení/reštarte prehliadača presne obnoví.

Súčasti projektu:

• návrh a implementácia neobrutalistického UI,
• vlastná logika časovača (epoch-based countdown) s perzistenciou v localStorage,
• štatistiky odpracovaných session,
• PWA s offline podporou a notifikáciami,
• light/dark mode,
• knižnica reusable form komponentov.

Design

• neobrutalizmus - výrazné okraje, tvrdé tiene a kontrastné farby namiesto klasického "soft" UI,
• light/dark mode - prepínanie témy uložené v localStorage,
• dynamický favicon a title - počas behu časovača sa v title zobrazuje odpočítavanie a favicon sa mení podľa aktívneho módu (práca/pauza),
• mobile-first - jednoduché ovládanie prispôsobené na mobilné zariadenia.

Použité technológie

• React 19 + TypeScript,
• Vite 7,
• Tailwind CSS 4 + Neobrutalism UI,
• Radix UI primitívy,
• react-hook-form + yup pre formuláre,
• vite-plugin-pwa (Workbox) - offline cache, auto-update service worker,
• vite-prerender-plugin - prerendering statických stránok pri builde,
• vlastné React hooky pre state management (bez externej state knižnice) - useTimer, useSessionStats, useTheme, useSound,
• Claude Code - agentické programovanie.

Ukážky z webu

Homepage

Štatistiky

Nastavenia

Mobil