https://github.com/pikocanfly/electron-js-and-react-timer-overlay-application

A timer overlay application created with Electron.js and React.js to help you keep track of how long each of your tasks take.
https://github.com/pikocanfly/electron-js-and-react-timer-overlay-application

Last synced: about 1 month ago
JSON representation

A timer overlay application created with Electron.js and React.js to help you keep track of how long each of your tasks take.

• Host: GitHub
• URL: https://github.com/pikocanfly/electron-js-and-react-timer-overlay-application
• Owner: PikoCanFly
• Created: 2024-03-19T13:31:58.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-30T15:30:40.000Z (10 months ago)
• Last Synced: 2024-03-30T17:37:53.473Z (10 months ago)
• Language: JavaScript
• Homepage:
• Size: 279 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Timer Overlay App Built with Electron.js and React.js

## About:

I created this timer-app to help me track down how much time I spend on coding tasks. Being able to use the app while utilizing my entire screen was a priority that's why I opted for creating an overlay mode that makes the app visible but allows me to click through it. Entering and exiting overlay is done with hotkeys.

### Regular Mode:

![Timer Interface](preview/timer-interface.JPG)

### Overlay Mode

![Overlay Mode](preview/overlay-mode.JPG)

## Features: 

- Input the desired time to be counted down from.

- Overlay mode activated with hotkey "control/command + 6"

- An alarm sound.




#### Feel free to clone and run the project on your system! Have fun with it and let me know what you think. Your feedback is valuable in improving the app for everyone.

#### ⭐ If you find the project useful please give it a start so others can find it too! :)




## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

## Dependencies:

- Make sure you have node.js and NPM installed. 

## Project Setup

### Install

```bash

$ npm install

```

### Development

```bash

$ npm run dev

```

### Build

```bash

# For windows

$ npm run build:win

# For macOS

$ npm run build:mac

# For Linux

$ npm run build:linux

```

## If you would like to see how I made it, and find ways to customize it, you can watch step by step tutorial on Youtube:

[![Fractal Tree Generator Demo](https://img.youtube.com/vi/6sMM5tGZUaQ/0.jpg)](https://www.youtube.com/watch?v=6sMM5tGZUaQ)

### 😀Happy Coding!