A modern, minimalist productivity timer and task manager built with React, TypeScript, and Tailwind CSS, featuring the beautiful Catppuccin color scheme.
🚀 Try it out here! ✨
- 🕒 Customizable Pomodoro-style timer
- ✅ Task management with drag-and-drop reordering
- 🌓 Light/Dark mode with Catppuccin theme
- 🎯 Push notifications via NTFY
- 🎉 Celebration animations on task completion
- 📲 Responsive design and Progressive Web App (PWA) support
- 💾 Persistent state across page reloads and browser restarts
- 🔔 Timer completion sound alert
- React 18
- TypeScript
- Tailwind CSS
- Vite
- dnd-kit (drag and drop)
- Lucide React (icons)
- Headless UI (accessible components)
- NTFY (push notifications)
- Node.js (v14 or higher)
- npm or yarn
- NTFY app (optional, for push notifications)
- Clone the repository:
git clone https://github.com/lperez37/productivy-clock.git
cd productivy-clock- Install dependencies:
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev- Open http://localhost:5173 in your browser.
- Set your desired time using the input field
- Start/pause the timer using the play/pause button
- Reset the timer using the reset button
- Get an extra 5 minutes up to 3 times when the timer is up
- Add tasks using the input field
- Mark tasks as complete by clicking the checkbox
- Edit tasks by clicking the pencil icon
- Delete tasks using the trash icon
- Reorder tasks by dragging the grip handle
- Click "Set up push notifications" at the bottom of the page
- Choose between default NTFY server (ntfy.sh) or a custom server
- Enter a unique topic for your notifications
- Optionally customize the notification message
- Install the NTFY app from ntfy.sh on your devices
- Subscribe to your topic in the NTFY app to receive notifications
The app uses the Catppuccin color scheme, which can be customized in src/index.css. The theme includes both light (Latte) and dark (Mocha) variants.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Catppuccin for the beautiful color scheme
- Lucide for the icons
- dnd kit for drag and drop functionality
- NTFY for the push notification service
- FreeSound.org and user greenvwbeetle for the timer sound