• About the Project
• Features
• Design & Branding
• How It Works
• Why PomoTrack?
• Built With
• License

PomoTrack is a productivity web app that blends the Pomodoro Technique with a structured To-Do list, helping you balance focus and rest.
Created to promote mindful work sessions, this app allows users to personalize their workflow, track time, and stay consistent through visual feedback and dynamic design.

• 3 customizable modes: Focus, Short Break, Long Break
• Smooth transitions and real-time updates
• Ambient focus sounds for deep concentration

• Add, edit, and categorize tasks
• Prioritize work by urgency (Low / Medium / High)
• Delete completed or all tasks at once

• Track total focus time and completed tasks
• View logs by day for better reflection

• Theme adjusts automatically or manually
• Colors shift dynamically with Pomodoro phases

• Optimized for desktop, tablet, and mobile
• Fluid, component-based layout

PomoTrack’s branding is based on a calm yet energetic palette that reflects different states of focus and rest.
Each mode uses distinct colors and font contrast to help users visually feel their workflow.

• Albert Sans – clean, geometric, and humanist, used for primary UI and buttons.
• Barlow – versatile sans-serif for headings and labels.
• Chivo Mono – used in the timer display and coding-inspired components for contrast.

1. Set Your Timer — Choose Focus or Break mode.
2. Manage Tasks — Add and prioritize tasks.
3. Track Progress — View logs and stats.
4. Stay Consistent — Let the design and sound guide your rhythm.

Unlike generic Pomodoro apps, PomoTrack merges time tracking, task management, and UX design principles into one minimalist interface.
Every color, font, and animation is meant to reduce cognitive load and enhance focus — form meets function.

• ⚛️ React – Component-based UI
• ⚡ Vite – Fast build tool
• 🎨 CSS Modules – Scoped, maintainable styling
• 🧠 Custom React Hooks – Reusable logic for timer and tasks
• 💾 LocalStorage – Persistent data without backend
• 🔊 Audio Integration – Ambient focus sounds
• 📱 Media Queries – Responsive design

Clone the repository and start focusing smarter:

git clone https://github.com/yourusername/pomotrack.git
cd pomotrack
npm install
npm run dev