Pomodoro Timer

A simple Pomodoro timer app built with React, TypeScript, and Wails, styled with Mantine UI components.

Overview

This app implements the classic Pomodoro technique, featuring:

• 25-minute focus timer
• 5-minute short break timer
• 15-minute long break timer

Designed primarily as a practical learning exercise. While the code may not be fully optimized or extensively refactored, the application delivers reliable performance and a clean, professional interface powered by Mantine.

Tech Stack

• React + TypeScript
• Mantine UI for styling and components
• Wails for desktop app packaging (Go + webview)
• Monorepo structure using pnpm with these main parts:
  • apps/web: Web version of the app
  • apps/desktop: Desktop frontend powered by Wails
  • packages/ui: Shared UI components & utilities

Monorepo Structure

/apps
    /web # Web app
    /desktop # Desktop frontend (Wails)
/packages
    /ui # Shared UI components, hooks, utils

Shared code avoids duplication and helps maintain consistency across platforms.

Development

Running the Web App

pnpm --filter web dev

Runs the web version locally in your browser.

Running the Desktop App

You can run the desktop frontend in two ways:

In Browser (for faster iteration):

pnpm --filter desktop-frontend dev

Full Wails Desktop App, Navigate to the desktop app directory and run Wails dev:

cd apps/desktop
wails dev

Alternatively go to respectful folders and run pnpm run dev, wails dev depending on the app.

Features

• Select between Pomodoro (25 min), Short Break (5 min), and Long Break (15 min) timers
• Start/Pause button toggles timer
• Reset button resets the timer to the selected duration
• Responsive UI with Mantine components
• Notifications and sound alert when timer ends
• Clean background with overlay content
• Easy extensibility with shared UI package

Note:

This project is primarily used as a practical learning exercise. The code may not be fully optimized or extensively refactored, but covers basics.