# savitp/spotshare architecture

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

- Interactive diagram: https://gitdiagram.com/savitp/spotshare
- Repository: https://github.com/savitp/spotshare

## Overview

SpotShare is a map-based community app for discovering and contributing public amenities and group-only spots, including scheduled group events. The main flow is sign-in, select a public or member group map, browse and filter markers, then place and submit a spot; App coordinates Supabase reads and writes. Group management separately supports creating groups, joining them with optional join codes, and choosing the active map. The map uses OpenStreetMap tiles through Leaflet. The README is empty and some App.tsx sections are omitted, so the graph limits links to behavior evidenced by sampled source.

Main entry points: [`App.tsx`](https://github.com/savitp/spotshare/blob/main/App.tsx) (App state), [`supabaseClient.ts`](https://github.com/savitp/spotshare/blob/main/supabaseClient.ts) (Supabase client), [`components/MapUI.tsx`](https://github.com/savitp/spotshare/blob/main/components/MapUI.tsx) (Map and markers), [`components/GroupManager.tsx`](https://github.com/savitp/spotshare/blob/main/components/GroupManager.tsx) (Group management)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App coordination"]
  node_entry["React mount<br/>[index.tsx]"]
  node_app_shell["App state<br/>[App.tsx]"]
end

subgraph group_amenity["Spot mapping"]
  node_filter["Spot filters<br/>[FilterBar.tsx]"]
  node_map["Map and markers<br/>[MapUI.tsx]"]
  node_spot_form["Spot entry<br/>[AddAmenityForm.tsx]"]
  node_domain_types["Spot and group models<br/>[types.ts]"]
  node_osm_tiles["OpenStreetMap tiles"]
end

subgraph group_groups["Group spaces"]
  node_group_manager["Group management<br/>[GroupManager.tsx]"]
end

subgraph group_backend["Identity and data"]
  node_auth_ui["Sign-in UI<br/>[AuthUI.tsx]"]
  node_supabase_client["Supabase client<br/>[supabaseClient.ts]"]
  node_supabase[("Supabase service")]
end

node_visitor(("Map user"))

node_visitor -->|"opens app"| node_entry
node_entry -->|"mounts"| node_app_shell
node_app_shell -->|"shows signed out"| node_auth_ui
node_auth_ui -->|"authenticates"| node_supabase_client
node_app_shell -->|"loads and saves spots"| node_supabase_client
node_app_shell -->|"loads memberships"| node_supabase_client
node_app_shell -->|"sets filter"| node_filter
node_filter -->|"selects type"| node_app_shell
node_app_shell -->|"renders filtered spots"| node_map
node_map -->|"reports map clicks"| node_app_shell
node_map -->|"requests deletion"| node_app_shell
node_app_shell -->|"opens at location"| node_spot_form
node_spot_form -->|"submits spot"| node_app_shell
node_app_shell -->|"opens group panel"| node_group_manager
node_group_manager -->|"selects active group"| node_app_shell
node_group_manager -->|"reads and updates groups"| node_supabase_client
node_supabase_client -->|"queries and writes"| node_supabase
node_map -->|"loads map tiles"| node_osm_tiles

click node_entry "https://github.com/savitp/spotshare/blob/main/index.tsx"
click node_app_shell "https://github.com/savitp/spotshare/blob/main/App.tsx"
click node_auth_ui "https://github.com/savitp/spotshare/blob/main/components/AuthUI.tsx"
click node_filter "https://github.com/savitp/spotshare/blob/main/components/FilterBar.tsx"
click node_map "https://github.com/savitp/spotshare/blob/main/components/MapUI.tsx"
click node_spot_form "https://github.com/savitp/spotshare/blob/main/components/AddAmenityForm.tsx"
click node_group_manager "https://github.com/savitp/spotshare/blob/main/components/GroupManager.tsx"
click node_domain_types "https://github.com/savitp/spotshare/blob/main/types.ts"
click node_supabase_client "https://github.com/savitp/spotshare/blob/main/supabaseClient.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_entry,node_app_shell,node_visitor toneBlue
class node_filter,node_map,node_spot_form,node_domain_types,node_osm_tiles toneAmber
class node_group_manager toneMint
class node_auth_ui,node_supabase_client,node_supabase toneRose
```

## Components

### App coordination

- [React mount](https://github.com/savitp/spotshare/blob/main/index.tsx): `index.tsx`
- [App state](https://github.com/savitp/spotshare/blob/main/App.tsx): `App.tsx`

### Spot mapping

- [Spot filters](https://github.com/savitp/spotshare/blob/main/components/FilterBar.tsx): `components/FilterBar.tsx`
- [Map and markers](https://github.com/savitp/spotshare/blob/main/components/MapUI.tsx): `components/MapUI.tsx`
- [Spot entry](https://github.com/savitp/spotshare/blob/main/components/AddAmenityForm.tsx): `components/AddAmenityForm.tsx`
- [Spot and group models](https://github.com/savitp/spotshare/blob/main/types.ts): `types.ts`
- **OpenStreetMap tiles**

### Group spaces

- [Group management](https://github.com/savitp/spotshare/blob/main/components/GroupManager.tsx): `components/GroupManager.tsx`

### Identity and data

- [Sign-in UI](https://github.com/savitp/spotshare/blob/main/components/AuthUI.tsx): `components/AuthUI.tsx`
- [Supabase client](https://github.com/savitp/spotshare/blob/main/supabaseClient.ts): `supabaseClient.ts`
- **Supabase service**

### Other components

- **Map user**

## Connections

- Map user → React mount: opens app
- React mount → App state: mounts
- App state → Sign-in UI: shows signed out
- Sign-in UI → Supabase client: authenticates
- App state → Supabase client: loads and saves spots
- App state → Supabase client: loads memberships
- App state → Spot filters: sets filter
- Spot filters → App state: selects type
- App state → Map and markers: renders filtered spots
- Map and markers → App state: reports map clicks
- Map and markers → App state: requests deletion
- App state → Spot entry: opens at location
- Spot entry → App state: submits spot
- App state → Group management: opens group panel
- Group management → App state: selects active group
- Group management → Supabase client: reads and updates groups
- Supabase client → Supabase service: queries and writes
- Map and markers → OpenStreetMap tiles: loads map tiles