https://github.com/ines-om/pixel-pomodoro

Customizable and animated Pomodoro timer featuring pixel-art characters. Users can choose a character, set study and break times, and stay focused with engaging animations. The app runs as an Electron desktop application with custom window controls and an optional always-on-top mode.
https://github.com/ines-om/pixel-pomodoro

electron electron-app pomodoro

Last synced: 2 months ago
JSON representation

Customizable and animated Pomodoro timer featuring pixel-art characters. Users can choose a character, set study and break times, and stay focused with engaging animations. The app runs as an Electron desktop application with custom window controls and an optional always-on-top mode.

• Host: GitHub
• URL: https://github.com/ines-om/pixel-pomodoro
• Owner: ines-om
• Created: 2025-02-11T21:54:10.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-12T01:25:06.000Z (over 1 year ago)
• Last Synced: 2025-05-17T01:36:22.316Z (about 1 year ago)
• Topics: electron, electron-app, pomodoro
• Language: JavaScript
• Homepage:
• Size: 2.38 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Pomodoro Pixel Timer

Pomodoro Pixel Timer is a **custom Pomodoro app** built with **React and Electron**, featuring **animated pixel-art characters** that accompany users during their study and break sessions. The app includes a **frameless, custom-designed window**, character selection, and the ability to stay **always on top** for a distraction-free workflow.

## 🚀 Features

- **Custom Pomodoro Timer**: Set your study time, break time, and number of rounds.

- **Animated Pixel Characters**: Choose from multiple characters, each with unique frame-based animations.

- **Frameless Electron Window**: A sleek, custom-designed UI with built-in **close and minimize** buttons.

- **Always-on-Top Mode**: Keep the app visible on top of other windows for better focus.

- **Character Selection Carousel**: Easily switch between characters before starting a session.

- **Smooth UI & Controls**: Pause, reset, and manually start breaks or study sessions.

## 🛠️ Installation

1. Clone the repository:

   - git clone https://github.com/ines-om/pixel-pomodoro

   - cd pixel-pomodoro

     

2. Install dependencies:

     - npm install

3. Run the app:

     - npm run electron:dev

## 📦 Packaging & Distribution

To create a **standalone** version of the app:

1️⃣ Build the React App 

   - npm run build

2️⃣ Package the App

Using Electron Packager:

   - npx electron-packager . PixelPomodoro --platform=win32 --arch=x64 --out=release-build --overwrite

     

## 🔧 Technologies Used

- React (Frontend UI)

- Electron (Desktop App Framework)

- CSS & Bootstrap (Styling)

- React Router (Navigation)

- Node.js & IPC (Electron communication)

## 📸 Screenshots

![Pomodoro Timer UI - HomePage](https://i.imgur.com/TBVRmkH.png) 

![Pomodoro Timer UI - Character Selection](https://i.imgur.com/SLCpNj7.png) 

![Pomodoro Timer UI - Pomodoro Timer](https://i.imgur.com/dOVDOWE.png)

## ❓ How to Use

Set Study & Break Durations and Number of Rounds.

Select Your Character from the animated carousel.

Click Start to begin the Pomodoro session.

The character animation will play during your study and break phases.

Use Pause, Reset, and Manual Start to control the timer.

## 🛠️ Customization

Modify the character frames in /assets/ to add new animations.

Adjust the window settings in main.js for transparency, resizing, or always-on-top behaviour.

## 👨‍💻 Author

Created by Inês O. Martins

GitHub: @ines-om

## 📜 License

This project is licensed under the MIT License.