# macky2javier2006-prog/autopick architecture

> Architecture diagram of the GitHub repository macky2javier2006-prog/autopick, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-02). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/macky2javier2006-prog/autopick
- Repository: https://github.com/macky2javier2006-prog/autopick

## Overview

Autopick is a browser-based motorcycle discovery and recommendation app. The sampled App.tsx contains vehicle catalog data, preference controls, score adjustment, signup/referral handling, and account display, so the principal workflow and these domain responsibilities appear concentrated in one large React component rather than separate services. The entry point mounts that app, which renders a toast provider. The repository also includes reusable UI primitives; their use by the app is not established by the excerpts, so they are shown as an internal component layer without speculative connections.

Main entry points: [`autopick/app/App.tsx`](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/App.tsx) (Discovery app), [`autopick/app/components/ui/utils.ts`](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/utils.ts) (Class utilities), [`autopick/main.tsx`](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/main.tsx) (React entry), [`autopick/app/components/ui/button.tsx`](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/button.tsx) (Form and action controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_product["Autopick product"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["Discovery app<br/>[App.tsx]"]
  node_catalog["Motorcycle catalog<br/>[App.tsx]"]
  node_preferences["Rider preferences<br/>[App.tsx]"]
  node_ranking["Recommendation scoring<br/>[App.tsx]"]
  node_accounts["Signup and account<br/>[App.tsx]"]
end

subgraph group_ui["Reusable UI"]
  node_notices["Toast notices<br/>[sonner.tsx]"]
  node_controls["Form and action controls<br/>[button.tsx]"]
  node_navigation["Menus and navigation<br/>[menubar.tsx]"]
  node_overlays["Dialog and sheet overlays<br/>[dialog.tsx]"]
  node_sidebar["Responsive sidebar<br/>[sidebar.tsx]"]
  node_charts["Chart components<br/>[chart.tsx]"]
  node_classutils["Class utilities<br/>[utils.ts]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders toaster"| node_notices
node_app -->|"defines data"| node_catalog
node_app -->|"captures choices"| node_preferences
node_app -->|"adjusts scores"| node_ranking
node_app -->|"creates and displays"| node_accounts
node_controls -->|"merges classes"| node_classutils
node_overlays -->|"merges classes"| node_classutils
node_navigation -->|"merges classes"| node_classutils
node_sidebar -->|"merges classes"| node_classutils

click node_entry "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/main.tsx"
click node_app "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/App.tsx"
click node_catalog "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/App.tsx"
click node_preferences "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/App.tsx"
click node_ranking "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/App.tsx"
click node_accounts "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/App.tsx"
click node_notices "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/sonner.tsx"
click node_controls "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/button.tsx"
click node_navigation "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/menubar.tsx"
click node_overlays "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/dialog.tsx"
click node_sidebar "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/sidebar.tsx"
click node_charts "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/chart.tsx"
click node_classutils "https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/utils.ts"

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_entry,node_app,node_catalog,node_preferences,node_ranking,node_accounts toneBlue
class node_notices,node_controls,node_navigation,node_overlays,node_sidebar,node_charts,node_classutils toneAmber
class node_visitor toneIndigo
```

## Components

### Autopick product

- [React entry](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/main.tsx): `autopick/main.tsx`
- [Discovery app](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/App.tsx): `autopick/app/App.tsx`
- [Motorcycle catalog](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/App.tsx): `autopick/app/App.tsx`
- [Rider preferences](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/App.tsx): `autopick/app/App.tsx`
- [Recommendation scoring](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/App.tsx): `autopick/app/App.tsx`
- [Signup and account](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/App.tsx): `autopick/app/App.tsx`

### Reusable UI

- [Toast notices](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/sonner.tsx): `autopick/app/components/ui/sonner.tsx`
- [Form and action controls](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/button.tsx): `autopick/app/components/ui/button.tsx`
- [Menus and navigation](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/menubar.tsx): `autopick/app/components/ui/menubar.tsx`
- [Dialog and sheet overlays](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/dialog.tsx): `autopick/app/components/ui/dialog.tsx`
- [Responsive sidebar](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/sidebar.tsx): `autopick/app/components/ui/sidebar.tsx`
- [Chart components](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/chart.tsx): `autopick/app/components/ui/chart.tsx`
- [Class utilities](https://github.com/macky2javier2006-prog/autopick/blob/main/autopick/app/components/ui/utils.ts): `autopick/app/components/ui/utils.ts`

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens app
- React entry → Discovery app: renders (evidence: `autopick/main.tsx`)
- Discovery app → Toast notices: renders toaster (evidence: `autopick/app/App.tsx`)
- Discovery app → Motorcycle catalog: defines data (evidence: `autopick/app/App.tsx`)
- Discovery app → Rider preferences: captures choices (evidence: `autopick/app/App.tsx`)
- Discovery app → Recommendation scoring: adjusts scores (evidence: `autopick/app/App.tsx`)
- Discovery app → Signup and account: creates and displays (evidence: `autopick/app/App.tsx`)
- Form and action controls → Class utilities: merges classes (evidence: `autopick/app/components/ui/button.tsx`)
- Dialog and sheet overlays → Class utilities: merges classes (evidence: `autopick/app/components/ui/dialog.tsx`)
- Menus and navigation → Class utilities: merges classes (evidence: `autopick/app/components/ui/menubar.tsx`)
- Responsive sidebar → Class utilities: merges classes (evidence: `autopick/app/components/ui/sidebar.tsx`)