# losborne24/react-mono architecture

> Architecture diagram of the GitHub repository losborne24/react-mono, 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/losborne24/react-mono
- Repository: https://github.com/losborne24/react-mono
- Video tour (about a minute): https://gitdiagram.com/losborne24/react-mono/video

## Overview

Mosaify is a browser-based React app that turns a selected image into a mosaic assembled from Spotify playlist artwork. Its user workflow connects a Spotify account, selects a playlist, chooses an image, generates and views the mosaic, then can export it. The feature, data, UI, and utility libraries divide wizard orchestration, Spotify access, matching/rendering, and image/export support. A separate tic-tac-toe app and a minimal API are also present but are not part of this product workflow. The README describes a different shop repository; the tree and sampled source support the Mosaify map below.

Main entry points: [`apps/mosaify/src/app/app.tsx`](https://github.com/losborne24/react-mono/blob/main/apps/mosaify/src/app/app.tsx) (Mosaify React App), [`libs/mosaify/feature/src/lib/use-mosaify-wizard.ts`](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/use-mosaify-wizard.ts) (Wizard Orchestrator), [`libs/mosaify/ui/src/lib/mosaic-grid.tsx`](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/mosaic-grid.tsx) (Mosaic Grid), [`libs/mosaify/feature/src/lib/use-spotify-auth.ts`](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/use-spotify-auth.ts) (Spotify Auth Hook)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Mosaify App"]
  node_app["Mosaify React App<br/>[app.tsx]"]
  node_entry["React Entry<br/>[main.tsx]"]
end

subgraph group_feature["Wizard Features"]
  node_wizard["Wizard Orchestrator"]
  node_authfeature["Spotify Auth Hook"]
  node_connect["Connect Spotify"]
  node_playlist["Select Playlist"]
  node_image["Select Image<br/>[select-image.tsx]"]
  node_mosaic["Mosaic View<br/>[mosaic.tsx]"]
end

subgraph group_data["Spotify Data"]
  node_spotifydata["Spotify Data API<br/>[index.ts]"]
  node_auth["OAuth and Tokens<br/>[auth.ts]"]
  node_client["Authenticated Client<br/>[client.ts]"]
  node_samples["Sample Images<br/>[sample-images.ts]"]
end

subgraph group_render["Mosaic Rendering"]
  node_grid["Mosaic Grid<br/>[mosaic-grid.tsx]"]
  node_matcher["Tile Matching<br/>[mosaic-match.ts]"]
  node_worker["Matching Worker"]
  node_canvas["Canvas Sampling<br/>[mosaic-canvas.ts]"]
  node_export["Mosaic Export<br/>[mosaic-export.ts]"]
  node_layout["Wizard Layout<br/>[wizard-layout.tsx]"]
  node_color["Average Color<br/>[average-color.ts]"]
end

node_user(("User"))
node_spotify{{"Spotify Services"}}

node_user -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"reads wizard state"| node_wizard
node_app -->|"renders steps"| node_layout
node_app -->|"renders connect step"| node_connect
node_app -->|"renders playlist step"| node_playlist
node_app -->|"renders image step"| node_image
node_app -->|"renders mosaic step"| node_mosaic
node_wizard -->|"coordinates auth"| node_authfeature
node_authfeature -->|"manages session"| node_auth
node_authfeature -->|"loads profile"| node_spotifydata
node_connect -->|"starts sign-in"| node_authfeature
node_auth -.->|"requests tokens"| node_spotify
node_client -->|"gets valid token"| node_auth
node_client -.->|"requests Spotify data"| node_spotify
node_spotifydata -->|"uses authenticated client"| node_client
node_wizard -->|"supplies playlist state"| node_playlist
node_wizard -->|"supplies image state"| node_image
node_wizard -->|"supplies mosaic inputs"| node_mosaic
node_image -->|"offers image choices"| node_samples
node_mosaic -->|"renders mosaic"| node_grid
node_grid -->|"samples source image"| node_canvas
node_grid -->|"dispatches matching"| node_worker
node_worker -->|"runs matching"| node_matcher
node_grid -->|"uses image colors"| node_color
node_mosaic -->|"exports mosaic"| node_export

click node_app "https://github.com/losborne24/react-mono/blob/main/apps/mosaify/src/app/app.tsx"
click node_entry "https://github.com/losborne24/react-mono/blob/main/apps/mosaify/src/main.tsx"
click node_wizard "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/use-mosaify-wizard.ts"
click node_authfeature "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/use-spotify-auth.ts"
click node_connect "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/connect-to-spotify.tsx"
click node_playlist "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/select-playlist.tsx"
click node_image "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/select-image.tsx"
click node_mosaic "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/mosaic.tsx"
click node_spotifydata "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/data/src/lib/spotify/index.ts"
click node_auth "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/data/src/lib/spotify/auth.ts"
click node_client "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/data/src/lib/spotify/client.ts"
click node_samples "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/data/src/lib/sample-images.ts"
click node_grid "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/mosaic-grid.tsx"
click node_matcher "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/mosaic-match.ts"
click node_worker "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/mosaic-match.worker.ts"
click node_canvas "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/mosaic-canvas.ts"
click node_export "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/mosaic-export.ts"
click node_layout "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/wizard-layout.tsx"
click node_color "https://github.com/losborne24/react-mono/blob/main/libs/mosaify/util/src/lib/average-color.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_app,node_entry,node_user toneBlue
class node_wizard,node_authfeature,node_connect,node_playlist,node_image,node_mosaic toneAmber
class node_spotifydata,node_auth,node_client,node_samples toneMint
class node_grid,node_matcher,node_worker,node_canvas,node_export,node_layout,node_color toneRose
class node_spotify toneIndigo
```

## Components

### Mosaify App

- [Mosaify React App](https://github.com/losborne24/react-mono/blob/main/apps/mosaify/src/app/app.tsx): `apps/mosaify/src/app/app.tsx`
- [React Entry](https://github.com/losborne24/react-mono/blob/main/apps/mosaify/src/main.tsx): `apps/mosaify/src/main.tsx`

### Wizard Features

- [Wizard Orchestrator](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/use-mosaify-wizard.ts): `libs/mosaify/feature/src/lib/use-mosaify-wizard.ts`
- [Spotify Auth Hook](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/use-spotify-auth.ts): `libs/mosaify/feature/src/lib/use-spotify-auth.ts`
- [Connect Spotify](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/connect-to-spotify.tsx): `libs/mosaify/feature/src/lib/connect-to-spotify.tsx`
- [Select Playlist](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/select-playlist.tsx): `libs/mosaify/feature/src/lib/select-playlist.tsx`
- [Select Image](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/select-image.tsx): `libs/mosaify/feature/src/lib/select-image.tsx`
- [Mosaic View](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/feature/src/lib/mosaic.tsx): `libs/mosaify/feature/src/lib/mosaic.tsx`

### Spotify Data

- [Spotify Data API](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/data/src/lib/spotify/index.ts): `libs/mosaify/data/src/lib/spotify/index.ts`
- [OAuth and Tokens](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/data/src/lib/spotify/auth.ts): `libs/mosaify/data/src/lib/spotify/auth.ts`
- [Authenticated Client](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/data/src/lib/spotify/client.ts): `libs/mosaify/data/src/lib/spotify/client.ts`
- [Sample Images](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/data/src/lib/sample-images.ts): `libs/mosaify/data/src/lib/sample-images.ts`

### Mosaic Rendering

- [Mosaic Grid](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/mosaic-grid.tsx): `libs/mosaify/ui/src/lib/mosaic-grid.tsx`
- [Tile Matching](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/mosaic-match.ts): `libs/mosaify/ui/src/lib/mosaic-match.ts`
- [Matching Worker](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/mosaic-match.worker.ts): `libs/mosaify/ui/src/lib/mosaic-match.worker.ts`
- [Canvas Sampling](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/mosaic-canvas.ts): `libs/mosaify/ui/src/lib/mosaic-canvas.ts`
- [Mosaic Export](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/mosaic-export.ts): `libs/mosaify/ui/src/lib/mosaic-export.ts`
- [Wizard Layout](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/ui/src/lib/wizard-layout.tsx): `libs/mosaify/ui/src/lib/wizard-layout.tsx`
- [Average Color](https://github.com/losborne24/react-mono/blob/main/libs/mosaify/util/src/lib/average-color.ts): `libs/mosaify/util/src/lib/average-color.ts`

### Other components

- **User**
- **Spotify Services**

## Connections

- User → React Entry: opens app
- React Entry → Mosaify React App: renders
- Mosaify React App → Wizard Orchestrator: reads wizard state
- Mosaify React App → Wizard Layout: renders steps
- Mosaify React App → Connect Spotify: renders connect step
- Mosaify React App → Select Playlist: renders playlist step
- Mosaify React App → Select Image: renders image step
- Mosaify React App → Mosaic View: renders mosaic step
- Wizard Orchestrator → Spotify Auth Hook: coordinates auth
- Spotify Auth Hook → OAuth and Tokens: manages session
- Spotify Auth Hook → Spotify Data API: loads profile
- Connect Spotify → Spotify Auth Hook: starts sign-in
- OAuth and Tokens → Spotify Services: requests tokens
- Authenticated Client → OAuth and Tokens: gets valid token
- Authenticated Client → Spotify Services: requests Spotify data
- Spotify Data API → Authenticated Client: uses authenticated client
- Wizard Orchestrator → Select Playlist: supplies playlist state
- Wizard Orchestrator → Select Image: supplies image state
- Wizard Orchestrator → Mosaic View: supplies mosaic inputs
- Select Image → Sample Images: offers image choices
- Mosaic View → Mosaic Grid: renders mosaic
- Mosaic Grid → Canvas Sampling: samples source image
- Mosaic Grid → Matching Worker: dispatches matching
- Matching Worker → Tile Matching: runs matching
- Mosaic Grid → Average Color: uses image colors
- Mosaic View → Mosaic Export: exports mosaic