TimeTracker - Smart Countdown Timer

TimeTracker is a modern, responsive React application designed to help you manage your time effectively. It features multiple concurrent timers, a stopwatch, and audio notifications to keep you on track. Built with performance and user experience in mind, it utilizes local storage to persist your timers across sessions.

🌟 Features

• Multiple Timers: Create and manage multiple countdown timers simultaneously.
• Stopwatch: A precise stopwatch for tracking elapsed time.
• Smart Controls: Start, pause, reset, and delete timers with ease.
• Persistance: Timers are saved to your browser's local storage, so you never lose your progress.
• Audio Notifications: Get alerted with a sound when a timer completes.
• Responsive Design: Works seamlessly on desktop and mobile devices.
• Clean UI: A polished interface built with Tailwind CSS and Lucide icons.

🛠️ Technology Stack

• Frontend Framework: React
• Language: TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Icons: Lucide React
• State Management: React Hooks (useState, useEffect, custom hooks)

🚀 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine.

Prerequisites

Ensure you have Node.js installed on your system.

Installation

1. Clone the repository:

   git clone https://github.com/ashishvora1997/time-master.git
   cd time-master

2. Install dependencies:

   npm install

Running the Application

Start the development server:

npm run dev

Open your browser and navigate to http://localhost:5173 (or the port shown in your terminal).

Building for Production

To build the application for production:

npm run build

To preview the production build:

npm run preview

📁 Project Structure

src/
├── components/      # Reusable UI components (Header, TimerCard, etc.)
├── hooks/           # Custom React hooks (useTimers, useNotification)
├── types/           # TypeScript type definitions
├── utils/           # Utility functions (time formatting)
├── App.tsx          # Main application component
└── main.tsx         # Entry point

📝 Usage

1. Add a Timer: Enter a title, hours, minutes, and seconds, then click "Add Timer".
2. Manage Timers: Use the play/pause, reset, and delete buttons on each timer card.
3. Switch Views: Toggle between "Timers" and "Stopwatch" using the top navigation buttons.
4. Notifications: Allow browser notifications when prompted to receive alerts when timers finish.

📄 License

This project is open source and available under the MIT License.