How losborne24/react-mono works
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: app.tsx Mosaify React App · use-mosaify-wizard.ts Wizard Orchestrator · mosaic-grid.tsx Mosaic Grid · use-spotify-auth.ts Spotify Auth Hook
Components 21
Mosaify App
- Mosaify React App
apps/mosaify/src/app/app.tsx - React Entry
apps/mosaify/src/main.tsx
Wizard Features
- Wizard Orchestrator
libs/mosaify/feature/src/lib/use-mosaify-wizard.ts - Spotify Auth Hook
libs/mosaify/feature/src/lib/use-spotify-auth.ts - Connect Spotify
libs/mosaify/feature/src/lib/connect-to-spotify.tsx - Select Playlist
libs/mosaify/feature/src/lib/select-playlist.tsx - Select Image
libs/mosaify/feature/src/lib/select-image.tsx - Mosaic View
libs/mosaify/feature/src/lib/mosaic.tsx
Spotify Data
- Spotify Data API
libs/mosaify/data/src/lib/spotify/index.ts - OAuth and Tokens
libs/mosaify/data/src/lib/spotify/auth.ts - Authenticated Client
libs/mosaify/data/src/lib/spotify/client.ts - Sample Images
libs/mosaify/data/src/lib/sample-images.ts
Mosaic Rendering
- Mosaic Grid
libs/mosaify/ui/src/lib/mosaic-grid.tsx - Tile Matching
libs/mosaify/ui/src/lib/mosaic-match.ts - Matching Worker
libs/mosaify/ui/src/lib/mosaic-match.worker.ts - Canvas Sampling
libs/mosaify/ui/src/lib/mosaic-canvas.ts - Mosaic Export
libs/mosaify/ui/src/lib/mosaic-export.ts - Wizard Layout
libs/mosaify/ui/src/lib/wizard-layout.tsx - Average Color
libs/mosaify/util/src/lib/average-color.ts
Other components
- User
- Spotify Services
Connections 26
- 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