JR Logo
PomoDev
Updated Sep 2024React

PomoDev - Pomodoro Timer Extension

A Pomodoro Timer Chrome Extension built with React, TypeScript, and Vite to help manage time effectively. Featuring customizable timers, task management, and theme options.

PomoDev is a Chrome extension designed to boost productivity using the Pomodoro Technique. It offers a customizable timer, task management, and theme customization, all built with modern web technologies.

Build Key Features

  1. 01

    Customizable Pomodoro Timer

    Allows users to start, stop, and reset the timer. Time can be customized by clicking on the display.

    Customizable Pomodoro Timer
  2. 02

    Task Management

    Users can add, complete, and delete tasks. All tasks persist in local storage for continuity across sessions.

    Task Management
  3. 03

    Theme Customization

    Offers both light and dark themes to suit user preferences and reduce eye strain.

    Theme Customization
  4. 04

    Cross-Browser Compatibility

    Designed to work seamlessly on both Chrome and Firefox browsers.

    Cross-Browser Compatibility

Friction Challenges

  1. 1

    Browser Extension Development

    Adapting to the specific requirements and limitations of browser extension development, including manifest v3 for Chrome.

  2. 2

    Cross-Browser Compatibility

    Ensuring the extension works consistently across different browsers, particularly Chrome and Firefox.

  3. 3

    State Persistence

    Implementing persistent storage to maintain timer state and tasks across browser sessions.

Takeaways Learnings

Modern Web Development Stack

  • Gained hands-on experience with React 18, TypeScript, and Vite for building efficient and type-safe applications.
  • Learned to leverage TailwindCSS for rapid UI development and consistent styling.

Browser Extension Development

  • Mastered the intricacies of developing extensions for Chrome and Firefox, including manifest differences and API usage.
  • Implemented persistent storage solutions specific to browser extensions.

Project Structure and Build Process

  • Developed a clean and maintainable project structure suitable for browser extension development.
  • Set up an efficient build process using Vite, including custom plugins for Hot Module Replacement in extension context.