Chess Timer

A minimal, customizable online chess clock built with Next.js, React, TypeScript, and Tailwind CSS.

[Quick Links: Introduction · Tech Stack · Prerequisites / Requirements · Installation · Configuration · Usage · Project Structure · Features · Development · Contributing · License · FAQ]

Introduction

Chess Timer is a web‑based chess clock that lets players set game duration, increment, and choose between horizontal or vertical layouts. It offers several visual themes and runs entirely in the browser, making it easy to start a timed game without installing any software.

Tech Stack

• Framework: Next.js (v16)
• Language: TypeScript
• UI Library: React 19
• Styling: Tailwind CSS 3
• Icons: lucide‑react
• Build Tools: Turbopack (via next dev), ESLint, PostCSS

Prerequisites / Requirements

• Node.js (>= 18)
• npm, pnpm, or yarn
• Internet connection for fetching dependencies

Installation

# Clone the repository
git clone https://github.com/Janhvibabani/Chess-Timer.git
cd Chess-Timer

# Install dependencies (choose your package manager)
npm install
# or
pnpm install
# or
yarn install

Configuration

The project uses the default Next.js configuration. If you need to customize Tailwind, edit tailwind.config.js. Environment variables are not required for the core functionality.

Usage

# Start the development server
npm run dev
# or
pnpm dev
# or
yarn dev

Open http://localhost:3000 in a browser to view the timer.

# Build for production
npm run build
# or
pnpm build
# or
yarn build

# Start the production server
npm start
# or
pnpm start
# or
yarn start

Project Structure

Path	Description
app/	Next.js app router components
app/components/	Reusable React components (e.g., dropdown)
app/layout.tsx	Global layout and metadata
app/page.tsx	Main page implementation
public/	Static assets (icons, images)
styles/ or globals.css	Global Tailwind CSS imports
tsconfig.json	TypeScript compiler options
package.json	Scripts, dependencies, and project metadata

Features

• Adjustable total time and increment per move
• Horizontal and vertical layout options
• Multiple visual themes (dark / light)
• Responsive design for desktop and mobile browsers
• Fully client‑side; no backend required

Development

# Run ESLint
npm run lint
# or
pnpm lint
# or
yarn lint

The project is set up with strict TypeScript settings and ESLint rules from eslint-config-next.

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/your-feature).
3. Commit your changes with clear messages.
4. Open a pull request describing the changes.

Make sure linting passes before submitting.

License

This project is licensed under the MIT License. See the LICENSE file for details.

FAQ

Q: Can I use this timer offline?
A: Yes. After the initial load, all assets are cached by the browser, allowing offline use.

Q: How do I change the theme colors?
A: Edit the Tailwind configuration in tailwind.config.js or modify the CSS classes in the component files.

Q: Is there support for chess variants (e.g., blitz, rapid)?
A: The timer’s duration and increment are fully configurable, so you can set any time control you need.

---

_{README generated by Git Friend ✨}