This is a compact and straightforward yet aesthetically appealing stopwatch demo. Users have the ability to initiate time tracking, stop it (completely, without resume option), and reset the timer.
My goal was to develop a modern UI/UX design from scratch: from a design concept up to the implementation in React and TypeScript.
![image](https://private-user-images.githubusercontent.com/52240221/294205004-ad1c155d-7f51-4281-98a6-c31b3c45c4bc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMyMTA2MzksIm5iZiI6MTcyMzIxMDMzOSwicGF0aCI6Ii81MjI0MDIyMS8yOTQyMDUwMDQtYWQxYzE1NWQtN2Y1MS00MjgxLTk4YTYtYzMxYjNjNDVjNGJjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODA5VDEzMzIxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ0ODNlMGE1NzQ1MTAyOWU2M2UyMWQ5NTk1NTQzMThhZmRhMDZhMjkxYWU2ZjgyMzE4NjQwNzU4Mjc5MDRiZDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.V09h5TV_KEu-XScaE5xRHN14ffkdBD2oCfDQPsrSs8M)
- user can start, stop (completely, without resume option) and reset the timer;
- modern and slick glassmorphism effect is built with
backdrop-filter
; - fully responsive (up to 280px, Galaxy Fold compatible);
- install dependencies
npm install
// or
yarn
- start local server via Vite
npm start dev
// or
yarn dev