# sofie-kirk22/matchmuse-next architecture

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

- Interactive diagram: https://gitdiagram.com/sofie-kirk22/matchmuse-next
- Repository: https://github.com/sofie-kirk22/matchmuse-next

## Overview

MatchMuse is a wardrobe-management and AI outfit-generation web app. Its main workflow is to add clothing images to a categorized closet, derive searchable garment metadata, filter and generate an outfit, then log wears and review usage insights. The graph follows the documented product capabilities and sampled route implementations; some UI-to-API wiring and unsampled page details are inferred only at the feature level, so uncertain internal call chains are omitted.

Main entry points: [`src/lib/db.ts`](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/lib/db.ts) (Postgres database), [`src/app/api/closet/[category]/route.ts`](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/closet/%5Bcategory%5D/route.ts) (Closet API), [`src/app/components/outfitGenerator.tsx`](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/outfitGenerator.tsx) (Outfit generator), [`src/app/api/outfit/generate/route.ts`](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/outfit/generate/route.ts) (Outfit generation API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Web experience"]
  node_home["Home and generator<br/>[page.tsx]"]
  node_closet_page["Closet page<br/>[page.tsx]"]
  node_stats_page["Statistics page<br/>[page.tsx]"]
end

subgraph group_wardrobe["Digital closet"]
  node_closet_manager["Closet manager<br/>[closetManager.tsx]"]
  node_closet_category["Category views"]
  node_closet_api["Closet API<br/>[route.ts]"]
  node_metadata["Garment metadata<br/>[garment-prompts.ts]"]
end

subgraph group_styling["Outfit styling"]
  node_filters_api["Filter options API<br/>[route.ts]"]
  node_filters_ui["Outfit filters<br/>[outfitFilters.tsx]"]
  node_generator_ui["Outfit generator"]
  node_generator_api["Outfit generation API<br/>[route.ts]"]
  node_preview["Generated preview<br/>[outfitPreview.tsx]"]
end

subgraph group_insights["Wear insights"]
  node_wear_form["Log outfit form<br/>[logOutfitForm.tsx]"]
  node_wear_history["Outfit history<br/>[outfitHistory.tsx]"]
  node_wear_api["Wear log API<br/>[route.ts]"]
  node_wear_delete["Delete wear API<br/>[route.ts]"]
  node_stats_api["Usage statistics API<br/>[route.ts]"]
  node_summary_api["Analytics summary API<br/>[route.ts]"]
  node_stats_views["Statistics views"]
end

subgraph group_services["Data and integrations"]
  node_postgres[("Postgres database<br/>[db.ts]")]
  node_blob[("Vercel Blob")]
  node_openai["OpenAI API"]
end

node_user(("Wardrobe user"))

node_user -->|"opens"| node_home
node_user -->|"manages wardrobe"| node_closet_page
node_user -->|"reviews usage"| node_stats_page
node_closet_page -->|"renders"| node_closet_manager
node_closet_manager -->|"shows categories"| node_closet_category
node_closet_category -->|"manages garments"| node_closet_api
node_closet_api -->|"stores images"| node_blob
node_closet_api -->|"analyzes image"| node_metadata
node_metadata -->|"requests metadata"| node_openai
node_closet_api -->|"reads and writes"| node_postgres
node_home -->|"renders"| node_generator_ui
node_generator_ui -->|"offers filtering"| node_filters_ui
node_filters_ui -->|"loads valid options"| node_filters_api
node_filters_api -->|"reads garments"| node_postgres
node_generator_ui -->|"requests outfit"| node_generator_api
node_generator_api -->|"selects garments"| node_postgres
node_generator_api -->|"generates image"| node_openai
node_generator_api -->|"stores result"| node_blob
node_generator_ui -->|"displays result"| node_preview
node_wear_form -->|"logs garments"| node_wear_api
node_wear_history -->|"loads wear logs"| node_wear_api
node_wear_history -->|"deletes log"| node_wear_delete
node_wear_api -->|"reads and writes"| node_postgres
node_wear_delete -->|"deletes log"| node_postgres
node_stats_page -->|"renders insights"| node_stats_views
node_stats_views -->|"loads rankings"| node_stats_api
node_stats_views -->|"loads summaries"| node_summary_api
node_stats_api -->|"aggregates wear data"| node_postgres
node_summary_api -->|"aggregates wear data"| node_postgres

click node_home "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/page.tsx"
click node_closet_page "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/closet/page.tsx"
click node_closet_manager "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/closetManager.tsx"
click node_closet_category "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/closetCategoryContent.tsx"
click node_closet_api "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/closet/%5Bcategory%5D/route.ts"
click node_metadata "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/lib/garment-prompts.ts"
click node_filters_api "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/outfitFilters/route.ts"
click node_filters_ui "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/outfitFilters.tsx"
click node_generator_ui "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/outfitGenerator.tsx"
click node_generator_api "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/outfit/generate/route.ts"
click node_preview "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/outfitPreview.tsx"
click node_wear_form "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/logOutfitForm.tsx"
click node_wear_history "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/outfitHistory.tsx"
click node_wear_api "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/garmentWears/route.ts"
click node_wear_delete "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/garmentWears/%5Bid%5D/route.ts"
click node_stats_page "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/statistics/page.tsx"
click node_stats_api "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/statistics/route.ts"
click node_summary_api "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/statistics/summary/route.ts"
click node_stats_views "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/statisticsSummary.tsx"
click node_postgres "https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/lib/db.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_home,node_closet_page,node_stats_page,node_user toneBlue
class node_closet_manager,node_closet_category,node_closet_api,node_metadata toneAmber
class node_filters_api,node_filters_ui,node_generator_ui,node_generator_api,node_preview toneMint
class node_wear_form,node_wear_history,node_wear_api,node_wear_delete,node_stats_api,node_summary_api,node_stats_views toneRose
class node_postgres,node_blob,node_openai toneIndigo
```

## Components

### Web experience

- [Home and generator](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/page.tsx): `src/app/page.tsx`
- [Closet page](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/closet/page.tsx): `src/app/closet/page.tsx`
- [Statistics page](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/statistics/page.tsx): `src/app/statistics/page.tsx`

### Digital closet

- [Closet manager](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/closetManager.tsx): `src/app/components/closetManager.tsx`
- [Category views](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/closetCategoryContent.tsx): `src/app/components/closetCategoryContent.tsx`
- [Closet API](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/closet/%5Bcategory%5D/route.ts): `src/app/api/closet/[category]/route.ts`
- [Garment metadata](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/lib/garment-prompts.ts): `src/lib/garment-prompts.ts`

### Outfit styling

- [Filter options API](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/outfitFilters/route.ts): `src/app/api/outfitFilters/route.ts`
- [Outfit filters](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/outfitFilters.tsx): `src/app/components/outfitFilters.tsx`
- [Outfit generator](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/outfitGenerator.tsx): `src/app/components/outfitGenerator.tsx`
- [Outfit generation API](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/outfit/generate/route.ts): `src/app/api/outfit/generate/route.ts`
- [Generated preview](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/outfitPreview.tsx): `src/app/components/outfitPreview.tsx`

### Wear insights

- [Log outfit form](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/logOutfitForm.tsx): `src/app/components/logOutfitForm.tsx`
- [Outfit history](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/outfitHistory.tsx): `src/app/components/outfitHistory.tsx`
- [Wear log API](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/garmentWears/route.ts): `src/app/api/garmentWears/route.ts`
- [Delete wear API](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/garmentWears/%5Bid%5D/route.ts): `src/app/api/garmentWears/[id]/route.ts`
- [Usage statistics API](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/statistics/route.ts): `src/app/api/statistics/route.ts`
- [Analytics summary API](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/api/statistics/summary/route.ts): `src/app/api/statistics/summary/route.ts`
- [Statistics views](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/app/components/statisticsSummary.tsx): `src/app/components/statisticsSummary.tsx`

### Data and integrations

- [Postgres database](https://github.com/sofie-kirk22/matchmuse-next/blob/master/src/lib/db.ts): `src/lib/db.ts`
- **Vercel Blob**
- **OpenAI API**

### Other components

- **Wardrobe user**

## Connections

- Wardrobe user → Home and generator: opens
- Wardrobe user → Closet page: manages wardrobe
- Wardrobe user → Statistics page: reviews usage
- Closet page → Closet manager: renders
- Closet manager → Category views: shows categories
- Category views → Closet API: manages garments
- Closet API → Vercel Blob: stores images
- Closet API → Garment metadata: analyzes image
- Garment metadata → OpenAI API: requests metadata
- Closet API → Postgres database: reads and writes
- Home and generator → Outfit generator: renders
- Outfit generator → Outfit filters: offers filtering
- Outfit filters → Filter options API: loads valid options
- Filter options API → Postgres database: reads garments
- Outfit generator → Outfit generation API: requests outfit
- Outfit generation API → Postgres database: selects garments
- Outfit generation API → OpenAI API: generates image
- Outfit generation API → Vercel Blob: stores result
- Outfit generator → Generated preview: displays result
- Log outfit form → Wear log API: logs garments
- Outfit history → Wear log API: loads wear logs
- Outfit history → Delete wear API: deletes log
- Wear log API → Postgres database: reads and writes
- Delete wear API → Postgres database: deletes log
- Statistics page → Statistics views: renders insights
- Statistics views → Usage statistics API: loads rankings
- Statistics views → Analytics summary API: loads summaries
- Usage statistics API → Postgres database: aggregates wear data
- Analytics summary API → Postgres database: aggregates wear data