Skip to content

yogita005/pomodro-timer

Repository files navigation

GDSC Themed Pomodoro Timer


image

This Pomodoro Timer website, crafted with React.js and Tailwind CSS, is more than just a time management tool—it's a productivity companion infused with the vibrant hues of GDSC (Google Developer Student Clubs). Embracing the Pomodoro Technique, it orchestrates work intervals with refreshing breaks, empowering users to optimize their productivity. Additionally, it offers draggable components like to-do lists, stopwatch, quotes, calendar, and sticky notes, making it a comprehensive productivity solution for users.

Features

  • Timer Controls: Start, pause, and reset the timer according to your work sessions.
  • Session Management: Customize the duration of work sessions and short breaks to suit your preferences.
  • Progress Bar: Visual indicators to show the progress of work sessions and breaks.
  • To do list: Manage your tasks efficiently with a todo list that allows you to edit and delete tasks as needed.
  • Sticky Notes: Organize your notes with customizable sticky notes that allow you to change colors and delete notes as needed.
  • Stopwatch: Track time for various activities with a stopwatch. You can record laps to mark specific intervals or milestones during your stopwatch session.
  • Quotes: Get inspired by random motivational quotes displayed on the website.
  • Calendar: View and manage your schedule with a calendar feature.
  • Draggable Components: All the additional Features are draggable and can be organized accordint to users needs
  • Shortcuts: Convenient keyboard shortcuts for controlling the timer.
  • Session Count: Keep track of completed Pomodoro sessions. The count gets incremented once the page is reloaded.You can also reset Session Count
  • Background Image Customization: Personalize your workspace with a custom background image, effortlessly switching between your own image and the default option.

Installation

To run the Pomodoro Timer website locally, follow these steps:

  1. Clone this repository to your local machine:

    git clone <repository-url>
  2. Navigate to the project directory:

    cd pomodoro-website
  3. Install dependencies using npm or yarn:

    npm install
    # or
    yarn install
  4. Start the development server:

    npm start
    # or
    yarn start
  5. Open your browser and visit https://localhost:3000 to view the website.

Usage

  1. Set the duration of work sessions and breaks using the input fields.
  2. Click the "Start" button to begin the timer.
  3. During a work session, focus on your tasks until the timer completes.
  4. Take short breaks during the break sessions to relax and recharge.
  5. Repeat the cycle as needed to manage your time effectively.
  6. Access additional features like Todo list, Quotes, Stopwatch, Sticky Notes, and Calendar.
  7. Personalize ur workspace according to ur need by adding Custom Background Image and draggable components.

Screenshots

image image image