Timekeeper Stopwatch

A precise stopwatch for focused work

An elegant, responsive stopwatch experience built with React, Vite, and Tailwind CSS. Track elapsed time down to centiseconds, record lap splits, and stay focused with a refined timekeeper interface.

Live Demo · Report an Issue

Features

• Start, pause, and resume timing without losing elapsed time
• Centisecond precision display with hours, minutes, and seconds
• Lap recording with automatic best-lap highlighting
• One-click reset for the timer and session log
• Responsive layout for desktop, tablet, and mobile screens
• Premium dark interface with orange accent system
• Provided stopwatch artwork used as the visual background
• Custom viewport and panel scrollbar styling
• Accessible button states with keyboard focus indicators

Tech Stack

Layer	Technology
UI	React 19
Build tool	Vite 8
Styling	Tailwind CSS 4
Typography	Manrope, DM Serif Display, DM Mono
Language	JavaScript (ES Modules)

Getting Started

Prerequisites

• Node.js 18 or newer
• npm 9 or newer

Installation

git clone <your-repository-url>
cd 27-9-2026-Stop-Watch
npm install

Run locally

npm run dev

Open the local URL shown by Vite, usually http://localhost:5173.

Available Scripts

Command	Purpose
npm run dev	Start the development server
npm run build	Create an optimized production build
npm run preview	Preview the production build locally
npm run lint	Run ESLint checks

Project Structure

src/
├── assets/
│   └── pngwing.com (5).png
├── components/
│   └── Stopwatch/
│       └── Stopwatch.jsx
├── App.jsx
├── index.css
└── main.jsx

Quality Checks

Before opening a pull request, run:

npm run lint
npm run build

License

This project is intended for personal learning and portfolio use.