David Yang Shopify Front-End Challenge

[davidy838]

Objective:
Developed a stopwatch application with start, stop, reset, and lap functionalities as part of the Shopify Front-End Engineering Intern Assessment. Edited the App.tsx, Stopwatch.tsx, and StopwatchButton.tsx files, and introduced the App.css for styling. Additionally, a "Types" folder was created to host interfaces defining prop types for the Stopwatch and StopwatchButton components.

Implementation:
Implemented handleStart, handleStop, handleReset, and handleLap functions to control the behavior of the stopwatch. When the start function is invoked, the timer increments using setInterval logic, and the time is converted to a displayable format for proper presentation on the front end. These functions are designed to trigger the useEffect, ensuring that the stopwatch display is updated in real-time for the user. The addition of lap functionality keeps track of the time differences between each lap, presenting a list on the front end to provide a comprehensive record of elapsed times.

Purpose:
The implemented functionalities enhance the user experience by allowing them to interact seamlessly with the stopwatch. The continuous update of the display reflects the real-time progress of the stopwatch, while lap functionality provides users with a detailed history of elapsed time intervals. The modular code structure and use of TypeScript interfaces contribute to code organization and maintainability.