# paro-studio/web architecture

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

- Interactive diagram: https://gitdiagram.com/paro-studio/web
- Repository: https://github.com/paro-studio/web

## Overview

Paro Studio is a community gallery for sharing, discovering, and reusing AI-image prompts. Visitors browse and filter the feed, open prompt details, and copy prompts; signed-in creators upload images and prompt metadata, while members can like, save, follow, rate, and manage profiles. The frontend routes these experiences through pages and hooks to Supabase services for authentication, relational data, and image storage. The graph preserves README-documented capabilities, but several page and service internals were not excerpted, so uncertain connections are omitted.

Main entry points: [`src/hooks/usePrompts.ts`](https://github.com/paro-studio/web/blob/main/src/hooks/usePrompts.ts) (Feed Queries), [`src/services/supabase/profiles.ts`](https://github.com/paro-studio/web/blob/main/src/services/supabase/profiles.ts) (Profile Service), [`src/App.tsx`](https://github.com/paro-studio/web/blob/main/src/App.tsx) (Routes and Providers), [`src/hooks/useSocialMutation.ts`](https://github.com/paro-studio/web/blob/main/src/hooks/useSocialMutation.ts) (Social Mutations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["Routes and Providers<br/>[App.tsx]"]
  node_authui["Google Sign-in<br/>[AuthModal.tsx]"]
  node_authstate["Session and Profile<br/>[useAuth.tsx]"]
end

subgraph group_discovery["Prompt Discovery"]
  node_feedpage["Feed Page<br/>[Index.tsx]"]
  node_feedquery["Feed Queries<br/>[usePrompts.ts]"]
  node_promptui["Prompt Cards<br/>[PromptCard.tsx]"]
  node_detail["Prompt Detail<br/>[PromptDetail.tsx]"]
  node_upload["Prompt Upload<br/>[Upload.tsx]"]
end

subgraph group_community["Community Actions"]
  node_social["Social Mutations"]
  node_liked["Liked Prompts<br/>[Liked.tsx]"]
  node_saved["Saved Prompts<br/>[Saved.tsx]"]
  node_profile["Creator Profiles<br/>[Profile.tsx]"]
  node_creators["Top Creators<br/>[TopCreators.tsx]"]
  node_settings["Account Settings<br/>[Settings.tsx]"]
  node_feedback["Feedback<br/>[Feedback.tsx]"]
end

subgraph group_backend["Supabase Backend"]
  node_authservice["Auth Service<br/>[auth.ts]"]
  node_promptservice["Prompt Service<br/>[prompts.ts]"]
  node_profileservice["Profile Service<br/>[profiles.ts]"]
  node_likeservice["Likes Service<br/>[likes.ts]"]
  node_saveservice["Saves Service<br/>[saves.ts]"]
  node_followservice["Follows Service<br/>[follows.ts]"]
  node_ratingservice["Ratings Service<br/>[ratings.ts]"]
  node_feedbackservice["Feedback Service<br/>[feedback.ts]"]
  node_store[("Supabase Database")]
  node_deletefunction["Account Deletion<br/>[index.ts]"]
end

subgraph group_media["Profile and Media"]
  node_storage["Image Storage Service<br/>[storage.ts]"]
  node_images[("Supabase File Storage")]
end

node_visitor(("Visitor"))
node_member(("Signed-in Member"))

node_visitor -->|"opens"| node_app
node_member -->|"signs in"| node_authui
node_member -->|"browses"| node_feedpage
node_member -->|"submits prompt"| node_upload
node_app -->|"provides auth"| node_authstate
node_app -->|"routes"| node_feedpage
node_app -->|"routes"| node_detail
node_app -->|"routes"| node_upload
node_authui -->|"requests sign-in"| node_authstate
node_authstate -->|"delegates auth"| node_authservice
node_authstate -->|"fetches profile"| node_profileservice
node_feedpage -->|"loads feed"| node_feedquery
node_feedquery -->|"queries prompts"| node_promptservice
node_feedquery -->|"fetches creators"| node_profileservice
node_feedquery -->|"loads likes"| node_likeservice
node_feedquery -->|"loads saves"| node_saveservice
node_feedquery -->|"loads ratings"| node_ratingservice
node_feedpage -->|"renders cards"| node_promptui
node_member -->|"copies or reacts"| node_promptui
node_detail -->|"loads prompt data"| node_feedquery
node_upload -->|"creates prompt"| node_promptservice
node_upload -->|"uploads image"| node_storage
node_promptui -->|"requests reaction"| node_social
node_social -->|"sets like"| node_likeservice
node_social -->|"sets save"| node_saveservice
node_social -->|"sets follow"| node_followservice
node_liked -->|"loads liked prompts"| node_feedquery
node_saved -->|"loads saved prompts"| node_feedquery
node_profile -.->|"loads profile"| node_profileservice
node_creators -.->|"loads creator data"| node_profileservice
node_settings -.->|"updates profile"| node_profileservice
node_feedback -.->|"submits feedback"| node_feedbackservice
node_authservice -.->|"reads auth data"| node_store
node_promptservice -.->|"reads and writes"| node_store
node_profileservice -.->|"reads and writes"| node_store
node_likeservice -->|"reads and writes"| node_store
node_saveservice -->|"reads and writes"| node_store
node_followservice -.->|"reads and writes"| node_store
node_ratingservice -->|"reads and writes"| node_store
node_feedbackservice -.->|"writes feedback"| node_store
node_storage -->|"uploads and deletes"| node_images
node_promptservice -->|"deletes prompt image"| node_storage
node_deletefunction -.->|"deletes account data"| node_store

click node_app "https://github.com/paro-studio/web/blob/main/src/App.tsx"
click node_authui "https://github.com/paro-studio/web/blob/main/src/components/auth/AuthModal.tsx"
click node_authstate "https://github.com/paro-studio/web/blob/main/src/hooks/useAuth.tsx"
click node_feedpage "https://github.com/paro-studio/web/blob/main/src/pages/Index.tsx"
click node_feedquery "https://github.com/paro-studio/web/blob/main/src/hooks/usePrompts.ts"
click node_promptui "https://github.com/paro-studio/web/blob/main/src/components/prompts/PromptCard.tsx"
click node_detail "https://github.com/paro-studio/web/blob/main/src/pages/PromptDetail.tsx"
click node_upload "https://github.com/paro-studio/web/blob/main/src/pages/Upload.tsx"
click node_social "https://github.com/paro-studio/web/blob/main/src/hooks/useSocialMutation.ts"
click node_liked "https://github.com/paro-studio/web/blob/main/src/pages/Liked.tsx"
click node_saved "https://github.com/paro-studio/web/blob/main/src/pages/Saved.tsx"
click node_profile "https://github.com/paro-studio/web/blob/main/src/pages/Profile.tsx"
click node_creators "https://github.com/paro-studio/web/blob/main/src/pages/TopCreators.tsx"
click node_settings "https://github.com/paro-studio/web/blob/main/src/pages/Settings.tsx"
click node_feedback "https://github.com/paro-studio/web/blob/main/src/pages/Feedback.tsx"
click node_authservice "https://github.com/paro-studio/web/blob/main/src/services/supabase/auth.ts"
click node_promptservice "https://github.com/paro-studio/web/blob/main/src/services/supabase/prompts.ts"
click node_profileservice "https://github.com/paro-studio/web/blob/main/src/services/supabase/profiles.ts"
click node_likeservice "https://github.com/paro-studio/web/blob/main/src/services/supabase/likes.ts"
click node_saveservice "https://github.com/paro-studio/web/blob/main/src/services/supabase/saves.ts"
click node_followservice "https://github.com/paro-studio/web/blob/main/src/services/supabase/follows.ts"
click node_ratingservice "https://github.com/paro-studio/web/blob/main/src/services/supabase/ratings.ts"
click node_feedbackservice "https://github.com/paro-studio/web/blob/main/src/services/supabase/feedback.ts"
click node_storage "https://github.com/paro-studio/web/blob/main/src/services/supabase/storage.ts"
click node_deletefunction "https://github.com/paro-studio/web/blob/main/supabase/functions/delete-account/index.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_authui,node_authstate toneBlue
class node_feedpage,node_feedquery,node_promptui,node_detail,node_upload toneAmber
class node_social,node_liked,node_saved,node_profile,node_creators,node_settings,node_feedback toneMint
class node_authservice,node_promptservice,node_profileservice,node_likeservice,node_saveservice,node_followservice,node_ratingservice,node_feedbackservice,node_store,node_deletefunction toneRose
class node_storage,node_images,node_visitor,node_member toneIndigo
```

## Components

### Application

- [Routes and Providers](https://github.com/paro-studio/web/blob/main/src/App.tsx): `src/App.tsx`
- [Google Sign-in](https://github.com/paro-studio/web/blob/main/src/components/auth/AuthModal.tsx): `src/components/auth/AuthModal.tsx`
- [Session and Profile](https://github.com/paro-studio/web/blob/main/src/hooks/useAuth.tsx): `src/hooks/useAuth.tsx`

### Prompt Discovery

- [Feed Page](https://github.com/paro-studio/web/blob/main/src/pages/Index.tsx): `src/pages/Index.tsx`
- [Feed Queries](https://github.com/paro-studio/web/blob/main/src/hooks/usePrompts.ts): `src/hooks/usePrompts.ts`
- [Prompt Cards](https://github.com/paro-studio/web/blob/main/src/components/prompts/PromptCard.tsx): `src/components/prompts/PromptCard.tsx`
- [Prompt Detail](https://github.com/paro-studio/web/blob/main/src/pages/PromptDetail.tsx): `src/pages/PromptDetail.tsx`
- [Prompt Upload](https://github.com/paro-studio/web/blob/main/src/pages/Upload.tsx): `src/pages/Upload.tsx`

### Community Actions

- [Social Mutations](https://github.com/paro-studio/web/blob/main/src/hooks/useSocialMutation.ts): `src/hooks/useSocialMutation.ts`
- [Liked Prompts](https://github.com/paro-studio/web/blob/main/src/pages/Liked.tsx): `src/pages/Liked.tsx`
- [Saved Prompts](https://github.com/paro-studio/web/blob/main/src/pages/Saved.tsx): `src/pages/Saved.tsx`
- [Creator Profiles](https://github.com/paro-studio/web/blob/main/src/pages/Profile.tsx): `src/pages/Profile.tsx`
- [Top Creators](https://github.com/paro-studio/web/blob/main/src/pages/TopCreators.tsx): `src/pages/TopCreators.tsx`
- [Account Settings](https://github.com/paro-studio/web/blob/main/src/pages/Settings.tsx): `src/pages/Settings.tsx`
- [Feedback](https://github.com/paro-studio/web/blob/main/src/pages/Feedback.tsx): `src/pages/Feedback.tsx`

### Supabase Backend

- [Auth Service](https://github.com/paro-studio/web/blob/main/src/services/supabase/auth.ts): `src/services/supabase/auth.ts`
- [Prompt Service](https://github.com/paro-studio/web/blob/main/src/services/supabase/prompts.ts): `src/services/supabase/prompts.ts`
- [Profile Service](https://github.com/paro-studio/web/blob/main/src/services/supabase/profiles.ts): `src/services/supabase/profiles.ts`
- [Likes Service](https://github.com/paro-studio/web/blob/main/src/services/supabase/likes.ts): `src/services/supabase/likes.ts`
- [Saves Service](https://github.com/paro-studio/web/blob/main/src/services/supabase/saves.ts): `src/services/supabase/saves.ts`
- [Follows Service](https://github.com/paro-studio/web/blob/main/src/services/supabase/follows.ts): `src/services/supabase/follows.ts`
- [Ratings Service](https://github.com/paro-studio/web/blob/main/src/services/supabase/ratings.ts): `src/services/supabase/ratings.ts`
- [Feedback Service](https://github.com/paro-studio/web/blob/main/src/services/supabase/feedback.ts): `src/services/supabase/feedback.ts`
- **Supabase Database**
- [Account Deletion](https://github.com/paro-studio/web/blob/main/supabase/functions/delete-account/index.ts): `supabase/functions/delete-account/index.ts`

### Profile and Media

- [Image Storage Service](https://github.com/paro-studio/web/blob/main/src/services/supabase/storage.ts): `src/services/supabase/storage.ts`
- **Supabase File Storage**

### Other components

- **Visitor**
- **Signed-in Member**

## Connections

- Visitor → Routes and Providers: opens (evidence: `src/App.tsx`)
- Signed-in Member → Google Sign-in: signs in (evidence: `src/components/auth/AuthModal.tsx`)
- Signed-in Member → Feed Page: browses (evidence: `README.md`)
- Signed-in Member → Prompt Upload: submits prompt (evidence: `README.md`)
- Routes and Providers → Session and Profile: provides auth (evidence: `src/App.tsx`)
- Routes and Providers → Feed Page: routes (evidence: `src/App.tsx`)
- Routes and Providers → Prompt Detail: routes (evidence: `src/App.tsx`)
- Routes and Providers → Prompt Upload: routes (evidence: `src/App.tsx`)
- Google Sign-in → Session and Profile: requests sign-in (evidence: `src/components/auth/AuthModal.tsx`)
- Session and Profile → Auth Service: delegates auth (evidence: `src/hooks/useAuth.tsx`)
- Session and Profile → Profile Service: fetches profile (evidence: `src/hooks/useAuth.tsx`)
- Feed Page → Feed Queries: loads feed (evidence: `src/pages/Index.tsx`)
- Feed Queries → Prompt Service: queries prompts (evidence: `src/hooks/usePrompts.ts`)
- Feed Queries → Profile Service: fetches creators (evidence: `src/hooks/usePrompts.ts`)
- Feed Queries → Likes Service: loads likes (evidence: `src/hooks/usePrompts.ts`)
- Feed Queries → Saves Service: loads saves (evidence: `src/hooks/usePrompts.ts`)
- Feed Queries → Ratings Service: loads ratings (evidence: `src/hooks/usePrompts.ts`)
- Feed Page → Prompt Cards: renders cards (evidence: `src/pages/Index.tsx`)
- Signed-in Member → Prompt Cards: copies or reacts (evidence: `README.md`)
- Prompt Detail → Feed Queries: loads prompt data (evidence: `src/pages/PromptDetail.tsx`)
- Prompt Upload → Prompt Service: creates prompt (evidence: `src/pages/Upload.tsx`)
- Prompt Upload → Image Storage Service: uploads image (evidence: `src/pages/Upload.tsx`)
- Prompt Cards → Social Mutations: requests reaction (evidence: `src/components/prompts/PromptCard.tsx`)
- Social Mutations → Likes Service: sets like (evidence: `src/hooks/useSocialMutation.ts`)
- Social Mutations → Saves Service: sets save (evidence: `src/hooks/useSocialMutation.ts`)
- Social Mutations → Follows Service: sets follow (evidence: `src/hooks/useSocialMutation.ts`)
- Liked Prompts → Feed Queries: loads liked prompts (evidence: `README.md`)
- Saved Prompts → Feed Queries: loads saved prompts (evidence: `README.md`)
- Creator Profiles → Profile Service: loads profile
- Top Creators → Profile Service: loads creator data
- Account Settings → Profile Service: updates profile
- Feedback → Feedback Service: submits feedback
- Auth Service → Supabase Database: reads auth data
- Prompt Service → Supabase Database: reads and writes
- Profile Service → Supabase Database: reads and writes
- Likes Service → Supabase Database: reads and writes (evidence: `src/services/supabase/likes.ts`)
- Saves Service → Supabase Database: reads and writes (evidence: `src/services/supabase/saves.ts`)
- Follows Service → Supabase Database: reads and writes
- Ratings Service → Supabase Database: reads and writes (evidence: `src/services/supabase/ratings.ts`)
- Feedback Service → Supabase Database: writes feedback
- Image Storage Service → Supabase File Storage: uploads and deletes (evidence: `src/services/supabase/storage.ts`)
- Prompt Service → Image Storage Service: deletes prompt image (evidence: `src/services/supabase/prompts.ts`)
- Account Deletion → Supabase Database: deletes account data