Pomodoro Timer App

A Pomodoro timer built with Next.js, React, and TypeScript. It supports configurable work and break lengths, start/stop/reset controls, automatic session switching, and a small Jest test suite for the UI and timer behavior.

Tech Stack

• Next.js 16
• React 19
• TypeScript 5
• Tailwind CSS 4
• Jest + Testing Library
• ESLint 9

Prerequisites

• Node.js 20.9 or newer
• npm 10 or newer

Getting Started

git clone https://github.com/victorbecerra/learn-nextjs-pomodoro.git
cd learn-nextjs-pomodoro
npm install
npm run dev

Open http://localhost:3000.

Local Verification Before Commit

Run the same checks locally that CI runs:

npm run lint
npm run typecheck
npm run test:ci
npm run build

For day-to-day development:

npm test
npm run test:watch
npm run test:coverage

Available Scripts

Command	Purpose
npm run dev	Start the Next.js development server
npm run build	Create a production build
npm start	Run the production build locally
npm run lint	Run ESLint with zero warnings allowed
npm run lint:fix	Auto-fix lint issues when possible
npm run typecheck	Run the TypeScript compiler without emitting files
npm test	Run the Jest suite
npm run test:watch	Run Jest in watch mode
npm run test:coverage	Run tests with coverage output
npm run test:ci	Run CI-style tests with coverage

Project Structure

app/
	globals.css
	layout.tsx
	page.tsx
	page.test.tsx
components/
	Alert.tsx
	Button.tsx
	Controls.tsx
	LengthSetting.tsx
	PomodoroTimer.tsx
	PomodoroTimer.test.tsx
	TimerDisplay.tsx
public/

Testing Notes

• The component tests cover rendering, button behavior, and alert state.
• The page-level tests cover timer-length synchronization in the main stateful page.
• Coverage thresholds are enforced in Jest so CI fails if test coverage drops too far.

CI

GitHub Actions runs on pushes to main and on pull requests. The workflow installs dependencies with npm ci and runs:

npm run lint
npm run typecheck
npm run test:ci
npm run build

See .github/workflows/ci.yml.

When code lands on main, the same workflow also builds the static out/ export and deploys it to GitHub Pages for the custom domain copilot-nextjs-timer.victorbecerragit.dev.

Deployment

This repo is configured for GitHub Pages deployment using a static Next.js export. For a basic production check locally:

npm run build
python3 -m http.server 3000 -d out

If GitHub Pages is still configured to deploy from a branch, switch the Pages source to GitHub Actions in the repository settings so the workflow can publish out/ directly.

Contributing

See CONTRIBUTING.md for the local workflow and contribution expectations.

• Add session history
• Create mobile app with React Native
• Add notification badges
• Implement custom presets

---

Made by Your Name | Portfolio | LinkedIn

⭐ If you like this project, please consider starring it on GitHub!