How paro-studio/web works
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: usePrompts.ts Feed Queries · profiles.ts Profile Service · App.tsx Routes and Providers · useSocialMutation.ts Social Mutations
Components 29
Application
- Routes and Providers
src/App.tsx - Google Sign-in
src/components/auth/AuthModal.tsx - Session and Profile
src/hooks/useAuth.tsx
Prompt Discovery
- Feed Page
src/pages/Index.tsx - Feed Queries
src/hooks/usePrompts.ts - Prompt Cards
src/components/prompts/PromptCard.tsx - Prompt Detail
src/pages/PromptDetail.tsx - Prompt Upload
src/pages/Upload.tsx
Community Actions
- Social Mutations
src/hooks/useSocialMutation.ts - Liked Prompts
src/pages/Liked.tsx - Saved Prompts
src/pages/Saved.tsx - Creator Profiles
src/pages/Profile.tsx - Top Creators
src/pages/TopCreators.tsx - Account Settings
src/pages/Settings.tsx - Feedback
src/pages/Feedback.tsx
Supabase Backend
- Auth Service
src/services/supabase/auth.ts - Prompt Service
src/services/supabase/prompts.ts - Profile Service
src/services/supabase/profiles.ts - Likes Service
src/services/supabase/likes.ts - Saves Service
src/services/supabase/saves.ts - Follows Service
src/services/supabase/follows.ts - Ratings Service
src/services/supabase/ratings.ts - Feedback Service
src/services/supabase/feedback.ts - Supabase Database
- Account Deletion
supabase/functions/delete-account/index.ts
Profile and Media
- Image Storage Service
src/services/supabase/storage.ts - Supabase File Storage
Other components
- Visitor
- Signed-in Member
Connections 43
- Visitor → Routes and Providers: opens
src/App.tsx - Signed-in Member → Google Sign-in: signs in
src/components/auth/AuthModal.tsx - Signed-in Member → Feed Page: browses
README.md - Signed-in Member → Prompt Upload: submits prompt
README.md - Routes and Providers → Session and Profile: provides auth
src/App.tsx - Routes and Providers → Feed Page: routes
src/App.tsx - Routes and Providers → Prompt Detail: routes
src/App.tsx - Routes and Providers → Prompt Upload: routes
src/App.tsx - Google Sign-in → Session and Profile: requests sign-in
src/components/auth/AuthModal.tsx - Session and Profile → Auth Service: delegates auth
src/hooks/useAuth.tsx - Session and Profile → Profile Service: fetches profile
src/hooks/useAuth.tsx - Feed Page → Feed Queries: loads feed
src/pages/Index.tsx - Feed Queries → Prompt Service: queries prompts
src/hooks/usePrompts.ts - Feed Queries → Profile Service: fetches creators
src/hooks/usePrompts.ts - Feed Queries → Likes Service: loads likes
src/hooks/usePrompts.ts - Feed Queries → Saves Service: loads saves
src/hooks/usePrompts.ts - Feed Queries → Ratings Service: loads ratings
src/hooks/usePrompts.ts - Feed Page → Prompt Cards: renders cards
src/pages/Index.tsx - Signed-in Member → Prompt Cards: copies or reacts
README.md - Prompt Detail → Feed Queries: loads prompt data
src/pages/PromptDetail.tsx - Prompt Upload → Prompt Service: creates prompt
src/pages/Upload.tsx - Prompt Upload → Image Storage Service: uploads image
src/pages/Upload.tsx - Prompt Cards → Social Mutations: requests reaction
src/components/prompts/PromptCard.tsx - Social Mutations → Likes Service: sets like
src/hooks/useSocialMutation.ts - Social Mutations → Saves Service: sets save
src/hooks/useSocialMutation.ts - Social Mutations → Follows Service: sets follow
src/hooks/useSocialMutation.ts - Liked Prompts → Feed Queries: loads liked prompts
README.md - Saved Prompts → Feed Queries: loads saved prompts
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
src/services/supabase/likes.ts - Saves Service → Supabase Database: reads and writes
src/services/supabase/saves.ts - Follows Service → Supabase Database: reads and writes
- Ratings Service → Supabase Database: reads and writes
src/services/supabase/ratings.ts - Feedback Service → Supabase Database: writes feedback
- Image Storage Service → Supabase File Storage: uploads and deletes
src/services/supabase/storage.ts - Prompt Service → Image Storage Service: deletes prompt image
src/services/supabase/prompts.ts - Account Deletion → Supabase Database: deletes account data