Side Project: Countdown Timer

Project Stack

Frontend

• React - Frontend Library
• Tailwind CSS - CSS Framework
• Vitest/Playwright - Testing Framework
• TypeScript - Transpiler/Type Checking
• Vite - CLI/Build Tool

Project Overview

The countdown timer was created out of frustration from using terrible web-based timer applications. I often found myself with random pockets of free time throughout the day and wanted a way to sit down for an hour quickly, or however long, and work without distractions. Many of the applications I tried felt annoying and introduced their own distractions, either during work time or simply when configuring the timer.

This also allowed me to strengthen my skills and learn new areas, such as using Vitest effectively. Here I learned best practices concerning snapshot testing with playwright integration. During the development, the biggest hurdles were handling sounds for snapshot testing. UX use cases for keyboard and mouse events, and managing a two-layered context pattern for the countdown timer.