Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jayrichh/pomodev
A Pomodoro Timer extension using React, TypeScript, and Vite with task management and persistent storage. Includes theme customization and built with TailwindCSS for modern styling.
https://github.com/jayrichh/pomodev
chrome productivity task time track
Last synced: about 1 month ago
JSON representation
A Pomodoro Timer extension using React, TypeScript, and Vite with task management and persistent storage. Includes theme customization and built with TailwindCSS for modern styling.
- Host: GitHub
- URL: https://github.com/jayrichh/pomodev
- Owner: JayRichh
- Created: 2024-08-16T07:06:50.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-17T13:21:29.000Z (3 months ago)
- Last Synced: 2024-10-14T08:42:51.867Z (2 months ago)
- Topics: chrome, productivity, task, time, track
- Language: TypeScript
- Homepage: https://chromewebstore.google.com/detail/pomodev/hobmikhocgmaeioaephegeecjmobgkhf
- Size: 442 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pomodoro Timer Chrome Extension
A **Pomodoro Timer** built using **React**, **TypeScript**, and **Vite** to help manage time effectively. This extension includes a timer, a task manager, and theme customization options.
---
## Features and Technologies Used
- **React 18** :
Build dynamic UIs with component-based architecture.
- **TypeScript** :
Static type checking for enhanced maintainability and fewer runtime errors.
- **Vite** :
Lightning-fast development experience with custom Hot Module Replacement (HMR).
- **TailwindCSS** :
Quickly style your app with utility-first CSS.
- **Chrome Extension Manifest 3** :
Ensures compatibility with the latest Chrome extension standards.
- **Persistent Storage** :
Saves tasks and timer state across sessions using local storage.
---
## Table of Contents
- [Introduction](#introduction)
- [Installation](#installation)
- [Chrome Setup](#chrome-setup)
- [Firefox Setup](#firefox-setup)
- [Usage](#usage)
- [Project Structure](#project-structure)
- [Core Components](#core-components)
- [Contributors](#contributors)
- [Community](#community)
- [References](#references)
---
## Introduction
This **Pomodoro Timer Extension** is designed for use within Chrome and Firefox browsers. It helps users manage time effectively using a timer and task manager. The focus is on a fast, efficient, and clean development experience with **Vite**, **React**, and **TypeScript**.
---
## Installation
### Chrome Setup
1. Run the development server: `pnpm dev`.
2. In Chrome, go to `chrome://extensions`.
3. Enable Developer Mode.
4. Click on "Load unpacked extension" and select the `dist` folder.
5. For production, use: `pnpm build`.
### Firefox Setup
1. Run `pnpm dev:firefox` to start the dev server.
2. In Firefox, navigate to `about:debugging#/runtime/this-firefox`.
3. Click "Load Temporary Add-on" and choose the `manifest.json` file in the `dist` folder.
4. Remember, Firefox requires re-loading after the browser is closed.
---
## Usage
The extension offers three main tabs:
1. **Timer**:
- Start, stop, and reset the Pomodoro timer. Customize the time by clicking on the display.
- Timer state is stored persistently so that you can resume even after closing the extension.
2. **Tasks**:
- Manage tasks by adding, completing, or deleting them. Tasks persist in local storage.
3. **Settings**:
- Toggle between light and dark themes to personalize the extension's appearance.
---
## Project Structure
```bash
├── public/
│ └── content.css # CSS for content scripts
├── src/
│ ├── components/
│ ├── hooks/
│ ├── pages/
│ │ ├── content/ # Content scripts for Chrome
│ │ ├── devtools/
│ │ ├── options/
│ │ ├── popup/ # Main UI with Timer, Tasks, and Settings
│ │ └── side-panel/
│ └── storage/ # Helper functions for local storage integration
├── manifest.js # Chrome extension manifest
└── vite.config.js # Vite config for custom HMR plugin
```