# vudigapranav/closiq architecture

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

- Interactive diagram: https://gitdiagram.com/vudigapranav/closiq
- Repository: https://github.com/vudigapranav/closiq
- Video tour (about a minute): https://gitdiagram.com/vudigapranav/closiq/video

## Overview

CLOSIQ is a wardrobe-based AI styling app, with the Expo mobile app as its primary surface and an earlier web companion. The main workflow is account/onboarding, garment capture and cataloging, then personalized outfit generation, saving, and planning. The mobile app also provides weather-aware daily recommendations and profile insights. AI requests are proxied through an authenticated Node backend; Supabase provides auth, cloud data, and image storage, with AsyncStorage supporting offline reads and pending writes. The graph reflects README-described capabilities where source excerpts were not sampled; those uncertain internal call links are omitted.

Main entry points: [`mobile/App.tsx`](https://github.com/vudigapranav/closiq/blob/main/mobile/App.tsx) (App navigation), [`server/apiRouter.js`](https://github.com/vudigapranav/closiq/blob/main/server/apiRouter.js) (AI API dispatch), [`mobile/src/services/wardrobeStorage.ts`](https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/wardrobeStorage.ts) (Wardrobe sync), [`mobile/src/services/savedOutfitsStorage.ts`](https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/savedOutfitsStorage.ts) (Saved looks)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Mobile app"]
  node_mobile_app["App navigation<br/>[App.tsx]"]
  node_auth_screen["Sign in<br/>[LoginScreen.tsx]"]
  node_onboarding["Onboarding"]
  node_collection["Wardrobe collection"]
  node_today["Today recommendations<br/>[TodayScreen.tsx]"]
  node_stylist["AI stylist<br/>[StylistScreen.tsx]"]
  node_planner["Event planner<br/>[PlannerScreen.tsx]"]
  node_profile_screen["Profile settings<br/>[ProfileScreen.tsx]"]
end

subgraph group_styling["Wardrobe and styling"]
  node_vision["Garment analysis<br/>[visionAnalysis.ts]"]
  node_outfit_service["Outfit generation<br/>[outfitStylist.ts]"]
  node_weather["Weather service<br/>[weatherService.ts]"]
end

subgraph group_server["AI backend"]
  node_api_router["AI API dispatch<br/>[apiRouter.js]"]
  node_gemini_handlers["Gemini handlers<br/>[geminiServer.js]"]
  node_gemini["Gemini"]
end

subgraph group_data["Data and integrations"]
  node_auth_service["Auth session<br/>[authService.ts]"]
  node_wardrobe_store["Wardrobe sync<br/>[wardrobeStorage.ts]"]
  node_saved_store["Saved looks"]
  node_planner_store["Planner sync<br/>[plannerStorage.ts]"]
  node_profile_store["Profile sync"]
  node_local_cache[("Offline cache<br/>[wardrobeStorage.ts]")]
  node_supabase[("Supabase")]
  node_weather_api["Open-Meteo"]
end

subgraph group_web["Web companion"]
  node_web_app["Web prototype<br/>[App.tsx]"]
  node_web_ai["Web AI proxy<br/>[geminiClient.ts]"]
end

node_user(("User"))

node_user -->|"uses"| node_mobile_app
node_mobile_app -->|"shows"| node_auth_screen
node_mobile_app -->|"shows"| node_onboarding
node_mobile_app -->|"shows"| node_collection
node_mobile_app -->|"shows"| node_today
node_mobile_app -->|"shows"| node_stylist
node_mobile_app -->|"shows"| node_planner
node_mobile_app -->|"shows"| node_profile_screen
node_auth_screen -->|"authenticates"| node_auth_service
node_onboarding -->|"saves profile"| node_profile_store
node_collection -->|"manages garments"| node_wardrobe_store
node_collection -->|"analyzes photo"| node_vision
node_stylist -->|"requests looks"| node_outfit_service
node_stylist -->|"saves looks"| node_saved_store
node_today -->|"gets weather"| node_weather
node_today -->|"reads wardrobe"| node_wardrobe_store
node_planner -->|"manages events"| node_planner_store
node_profile_screen -->|"loads profile"| node_profile_store
node_profile_screen -->|"loads looks"| node_saved_store
node_wardrobe_store -->|"reads and writes"| node_supabase
node_saved_store -->|"reads and writes"| node_supabase
node_planner_store -->|"reads and writes"| node_supabase
node_profile_store -->|"reads and writes"| node_supabase
node_wardrobe_store -->|"caches wardrobe"| node_local_cache
node_saved_store -->|"caches looks"| node_local_cache
node_planner_store -->|"caches events"| node_local_cache
node_profile_store -->|"caches profile"| node_local_cache
node_auth_service -->|"uses auth"| node_supabase
node_vision -->|"requests analysis"| node_api_router
node_outfit_service -->|"requests outfits"| node_api_router
node_api_router -->|"dispatches"| node_gemini_handlers
node_api_router -->|"verifies token"| node_supabase
node_gemini_handlers -->|"calls"| node_gemini
node_weather -->|"fetches forecast"| node_weather_api
node_web_app -->|"requests AI"| node_web_ai
node_web_ai -.->|"posts requests"| node_api_router

click node_mobile_app "https://github.com/vudigapranav/closiq/blob/main/mobile/App.tsx"
click node_auth_screen "https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/LoginScreen.tsx"
click node_onboarding "https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/OnboardingScreen.tsx"
click node_collection "https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/CollectionScreen.tsx"
click node_today "https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/TodayScreen.tsx"
click node_stylist "https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/StylistScreen.tsx"
click node_planner "https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/PlannerScreen.tsx"
click node_profile_screen "https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/ProfileScreen.tsx"
click node_auth_service "https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/authService.ts"
click node_wardrobe_store "https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/wardrobeStorage.ts"
click node_saved_store "https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/savedOutfitsStorage.ts"
click node_planner_store "https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/plannerStorage.ts"
click node_profile_store "https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/userProfileStorage.ts"
click node_local_cache "https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/wardrobeStorage.ts"
click node_vision "https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/visionAnalysis.ts"
click node_outfit_service "https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/outfitStylist.ts"
click node_weather "https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/weatherService.ts"
click node_api_router "https://github.com/vudigapranav/closiq/blob/main/server/apiRouter.js"
click node_gemini_handlers "https://github.com/vudigapranav/closiq/blob/main/server/geminiServer.js"
click node_web_app "https://github.com/vudigapranav/closiq/blob/main/src/App.tsx"
click node_web_ai "https://github.com/vudigapranav/closiq/blob/main/src/services/ai/geminiClient.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_mobile_app,node_auth_screen,node_onboarding,node_collection,node_today,node_stylist,node_planner,node_profile_screen,node_user toneBlue
class node_vision,node_outfit_service,node_weather toneAmber
class node_api_router,node_gemini_handlers,node_gemini toneMint
class node_auth_service,node_wardrobe_store,node_saved_store,node_planner_store,node_profile_store,node_local_cache,node_supabase,node_weather_api toneRose
class node_web_app,node_web_ai toneIndigo
```

## Components

### Mobile app

- [App navigation](https://github.com/vudigapranav/closiq/blob/main/mobile/App.tsx): `mobile/App.tsx`
- [Sign in](https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/LoginScreen.tsx): `mobile/src/screens/LoginScreen.tsx`
- [Onboarding](https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/OnboardingScreen.tsx): `mobile/src/screens/OnboardingScreen.tsx`
- [Wardrobe collection](https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/CollectionScreen.tsx): `mobile/src/screens/CollectionScreen.tsx`
- [Today recommendations](https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/TodayScreen.tsx): `mobile/src/screens/TodayScreen.tsx`
- [AI stylist](https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/StylistScreen.tsx): `mobile/src/screens/StylistScreen.tsx`
- [Event planner](https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/PlannerScreen.tsx): `mobile/src/screens/PlannerScreen.tsx`
- [Profile settings](https://github.com/vudigapranav/closiq/blob/main/mobile/src/screens/ProfileScreen.tsx): `mobile/src/screens/ProfileScreen.tsx`

### Wardrobe and styling

- [Garment analysis](https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/visionAnalysis.ts): `mobile/src/services/visionAnalysis.ts`
- [Outfit generation](https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/outfitStylist.ts): `mobile/src/services/outfitStylist.ts`
- [Weather service](https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/weatherService.ts): `mobile/src/services/weatherService.ts`

### AI backend

- [AI API dispatch](https://github.com/vudigapranav/closiq/blob/main/server/apiRouter.js): `server/apiRouter.js`
- [Gemini handlers](https://github.com/vudigapranav/closiq/blob/main/server/geminiServer.js): `server/geminiServer.js`
- **Gemini**

### Data and integrations

- [Auth session](https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/authService.ts): `mobile/src/services/authService.ts`
- [Wardrobe sync](https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/wardrobeStorage.ts): `mobile/src/services/wardrobeStorage.ts`
- [Saved looks](https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/savedOutfitsStorage.ts): `mobile/src/services/savedOutfitsStorage.ts`
- [Planner sync](https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/plannerStorage.ts): `mobile/src/services/plannerStorage.ts`
- [Profile sync](https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/userProfileStorage.ts): `mobile/src/services/userProfileStorage.ts`
- [Offline cache](https://github.com/vudigapranav/closiq/blob/main/mobile/src/services/wardrobeStorage.ts): `mobile/src/services/wardrobeStorage.ts`
- **Supabase**
- **Open-Meteo**

### Web companion

- [Web prototype](https://github.com/vudigapranav/closiq/blob/main/src/App.tsx): `src/App.tsx`
- [Web AI proxy](https://github.com/vudigapranav/closiq/blob/main/src/services/ai/geminiClient.ts): `src/services/ai/geminiClient.ts`

### Other components

- **User**

## Connections

- User → App navigation: uses
- App navigation → Sign in: shows
- App navigation → Onboarding: shows
- App navigation → Wardrobe collection: shows
- App navigation → Today recommendations: shows
- App navigation → AI stylist: shows
- App navigation → Event planner: shows
- App navigation → Profile settings: shows
- Sign in → Auth session: authenticates
- Onboarding → Profile sync: saves profile
- Wardrobe collection → Wardrobe sync: manages garments
- Wardrobe collection → Garment analysis: analyzes photo
- AI stylist → Outfit generation: requests looks
- AI stylist → Saved looks: saves looks
- Today recommendations → Weather service: gets weather
- Today recommendations → Wardrobe sync: reads wardrobe
- Event planner → Planner sync: manages events
- Profile settings → Profile sync: loads profile
- Profile settings → Saved looks: loads looks
- Wardrobe sync → Supabase: reads and writes
- Saved looks → Supabase: reads and writes
- Planner sync → Supabase: reads and writes
- Profile sync → Supabase: reads and writes
- Wardrobe sync → Offline cache: caches wardrobe
- Saved looks → Offline cache: caches looks
- Planner sync → Offline cache: caches events
- Profile sync → Offline cache: caches profile
- Auth session → Supabase: uses auth
- Garment analysis → AI API dispatch: requests analysis
- Outfit generation → AI API dispatch: requests outfits
- AI API dispatch → Gemini handlers: dispatches
- AI API dispatch → Supabase: verifies token
- Gemini handlers → Gemini: calls
- Weather service → Open-Meteo: fetches forecast
- Web prototype → Web AI proxy: requests AI
- Web AI proxy → AI API dispatch: posts requests