# hrk84ya/cron-expression-builder architecture

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

- Interactive diagram: https://gitdiagram.com/hrk84ya/cron-expression-builder
- Repository: https://github.com/hrk84ya/cron-expression-builder

## Overview

tick.works is a browser-based cron expression builder. Users configure a schedule, then see its cron expression, a plain-English summary, and upcoming matching run times; they can also load popular patterns or copy the expression. The UI, schedule state, and cron calculations are implemented together in `src/App.tsx`, so the internal stages below represent responsibilities within that component, not separate modules. The sampled entry point shows `src/main.tsx` mounting the app. No backend or persistent store is evidenced.

Main entry points: [`src/App.tsx`](https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx) (Schedule state), [`src/main.tsx`](https://github.com/hrk84ya/cron-expression-builder/blob/main/src/main.tsx) (React mount)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_mount["React mount<br/>[main.tsx]"]
end

subgraph group_builder["Schedule builder"]
  node_app["Builder app<br/>[App.tsx]"]
  node_controls["Schedule controls<br/>[App.tsx]"]
  node_state["Schedule state<br/>[App.tsx]"]
  node_patterns["Popular patterns<br/>[App.tsx]"]
end

subgraph group_results["Schedule results"]
  node_expression["Cron expression<br/>[App.tsx]"]
  node_summary["Schedule summary<br/>[App.tsx]"]
  node_preview["Upcoming runs<br/>[App.tsx]"]
end

node_user(("User"))
node_clipboard["Clipboard API"]

node_user -->|"opens app"| node_mount
node_mount -->|"mounts UI"| node_app
node_user -->|"sets schedule"| node_controls
node_user -->|"selects pattern"| node_patterns
node_controls -->|"updates values"| node_state
node_patterns -->|"loads values"| node_state
node_state -->|"formats expression"| node_expression
node_state -->|"describes schedule"| node_summary
node_state -->|"computes run dates"| node_preview
node_user -->|"requests copy"| node_expression
node_expression -->|"writes expression"| node_clipboard

click node_mount "https://github.com/hrk84ya/cron-expression-builder/blob/main/src/main.tsx"
click node_app "https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx"
click node_controls "https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx"
click node_state "https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx"
click node_patterns "https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx"
click node_expression "https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx"
click node_summary "https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx"
click node_preview "https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx"

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_mount,node_user toneBlue
class node_app,node_controls,node_state,node_patterns toneAmber
class node_expression,node_summary,node_preview,node_clipboard toneMint
```

## Components

### App entry

- [React mount](https://github.com/hrk84ya/cron-expression-builder/blob/main/src/main.tsx): `src/main.tsx`

### Schedule builder

- [Builder app](https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx): `src/App.tsx`
- [Schedule controls](https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx): `src/App.tsx`
- [Schedule state](https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx): `src/App.tsx`
- [Popular patterns](https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx): `src/App.tsx`

### Schedule results

- [Cron expression](https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx): `src/App.tsx`
- [Schedule summary](https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx): `src/App.tsx`
- [Upcoming runs](https://github.com/hrk84ya/cron-expression-builder/blob/main/src/App.tsx): `src/App.tsx`

### Other components

- **User**
- **Clipboard API**

## Connections

- User → React mount: opens app
- React mount → Builder app: mounts UI
- User → Schedule controls: sets schedule
- User → Popular patterns: selects pattern
- Schedule controls → Schedule state: updates values
- Popular patterns → Schedule state: loads values
- Schedule state → Cron expression: formats expression
- Schedule state → Schedule summary: describes schedule
- Schedule state → Upcoming runs: computes run dates
- User → Cron expression: requests copy
- Cron expression → Clipboard API: writes expression