# aleksei-nika/reactstopwatch architecture

> Architecture diagram of the GitHub repository aleksei-nika/reactstopwatch, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aleksei-nika/reactstopwatch
- Repository: https://github.com/aleksei-nika/reactstopwatch

## Overview

This is a small React stopwatch app. The user-facing flow is to open the app, start or resume elapsed-time measurement, stop or reset it, and optionally record lap points shown as cumulative and split times. The runtime uses refs for timer state and direct display updates, and React state for lap rendering. The README also describes an earlier basic version; the sampled source implements the more precise Date.now()-based version. Styling is present but omitted from the runtime graph.

Main entry points: [`src/Stopwatch.jsx`](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx) (Timer controls), [`src/App.jsx`](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/App.jsx) (App shell), [`src/main.jsx`](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/main.jsx) (React mount)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_main["React mount<br/>[main.jsx]"]
  node_app["App shell<br/>[App.jsx]"]
end

subgraph group_timer["Stopwatch runtime"]
  node_stopwatch["Stopwatch UI<br/>[Stopwatch.jsx]"]
  node_controls["Timer controls<br/>[Stopwatch.jsx]"]
  node_timer_state["Timer refs<br/>[Stopwatch.jsx]"]
  node_time_display["Elapsed display<br/>[Stopwatch.jsx]"]
  node_format["Time formatter<br/>[Stopwatch.jsx]"]
end

subgraph group_laps["Lap display"]
  node_lap_state["Lap state<br/>[Stopwatch.jsx]"]
  node_lap_list["Lap list<br/>[Stopwatch.jsx]"]
end

node_user(("User"))
node_browser["Browser APIs"]

node_main -->|"renders"| node_app
node_app -->|"renders"| node_stopwatch
node_user -->|"clicks"| node_controls
node_controls -->|"updates"| node_timer_state
node_controls -->|"starts / clears"| node_browser
node_browser -->|"ticks"| node_time_display
node_time_display -->|"formats"| node_format
node_controls -->|"records laps"| node_lap_state
node_lap_state -->|"renders"| node_lap_list
node_lap_list -->|"formats times"| node_format

click node_main "https://github.com/aleksei-nika/reactstopwatch/blob/main/src/main.jsx"
click node_app "https://github.com/aleksei-nika/reactstopwatch/blob/main/src/App.jsx"
click node_stopwatch "https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx"
click node_controls "https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx"
click node_timer_state "https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx"
click node_time_display "https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx"
click node_format "https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx"
click node_lap_state "https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx"
click node_lap_list "https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_app,node_user,node_browser toneBlue
class node_stopwatch,node_controls,node_timer_state,node_time_display,node_format toneAmber
class node_lap_state,node_lap_list toneMint
```

## Components

### App entry

- [React mount](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/main.jsx): `src/main.jsx`
- [App shell](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/App.jsx): `src/App.jsx`

### Stopwatch runtime

- [Stopwatch UI](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx): `src/Stopwatch.jsx`
- [Timer controls](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx): `src/Stopwatch.jsx`
- [Timer refs](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx): `src/Stopwatch.jsx`
- [Elapsed display](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx): `src/Stopwatch.jsx`
- [Time formatter](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx): `src/Stopwatch.jsx`

### Lap display

- [Lap state](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx): `src/Stopwatch.jsx`
- [Lap list](https://github.com/aleksei-nika/reactstopwatch/blob/main/src/Stopwatch.jsx): `src/Stopwatch.jsx`

### Other components

- **User**
- **Browser APIs**

## Connections

- React mount → App shell: renders
- App shell → Stopwatch UI: renders
- User → Timer controls: clicks
- Timer controls → Timer refs: updates
- Timer controls → Browser APIs: starts / clears
- Browser APIs → Elapsed display: ticks
- Elapsed display → Time formatter: formats
- Timer controls → Lap state: records laps
- Lap state → Lap list: renders
- Lap list → Time formatter: formats times