Focus Web App

Welcome to the Focus Web App! This application is designed to help users enhance their focus through various tools like a Pomodoro timer, background music, and a to-do list and also change the background image. Check out the live version of the app here.

Video Demonstration

Focus.app.run.through.mp4

Features

• Pomodoro Timer: Manage your work and break intervals using the Pomodoro technique.
• Background Music: Select from different types of background music to aid concentration.
• Customizable Background: Choose and set different backgrounds to create an optimal work environment.
• To-Do List: Keep track of your tasks and mark them as complete when done.

Deployment

The app is deployed on Vercel. You can access it here.

Getting Started

To get a local copy up and running, follow these simple steps.

Installation

1. Clone the repo

   git clone https://github.com/DhruvSinha2003/focus.git

2. Install NPM packages

   npm install

3. Start the development server

   npm start

Usage

Pomodoro Timer

• Set your focus and break durations.
• Start the timer to begin your focus session.
• The timer will automatically switch between focus and break intervals.

Background Music

• Choose from a selection of music folders: Lofi, Cafe Ambient, and White Noise.
• Play or pause the music as needed.
• Use the seek bar to navigate through the track.

Customizable Background

• Drag the background selector to your preferred position.
• Choose from a selection of default images to set as your background.
• Toggle fullscreen mode for a distraction-free environment.

To-Do List

• Add new tasks by typing in the input field and pressing Enter.
• Mark tasks as complete by clicking the checkmark button.
• Drag the to-do list to your desired position on the screen.