How peterquads/odylic-constellation works
Odylic Constellation is a local, read-only Meta Ads explorer. The user connects an account, chooses a date range, and the app loads ad data for a 3D creative space; selecting an ad opens metrics and on-demand charts. Separate capabilities include funnel and naming-based grouping, metric-axis layouts, creative variations, and group grid/slideshow views. Backend details beyond the excerpts are represented only where the README or SOURCE INDEX supports them; the API-to-Meta request flow is documented, but not every endpoint implementation was sampled.
Main entry points: App.tsx App workflow · CreativeSpace3D.tsx 3D creative space · api.ts API client · main.py API service
Components 24
Ad exploration
- App workflow
web/src/App.tsx - Account connection
web/src/components/Onboarding.tsx - Range and settings
web/src/components/Header.tsx - Ad model and stacks
web/src/lib/adModel.ts - Ad detail drawer
web/src/components/AdDrawer.tsx - Chart data requests
web/src/lib/adCharts.ts - Date ranges
web/src/lib/dateRanges.ts
Space and insights
- Name parsing
web/src/lib/autoNaming.ts - Funnel ranking
web/src/space/funnelPosition.ts - Grouping and layout
web/src/space/spaceLayout.ts - 3D creative space
web/src/space/CreativeSpace3D.tsx - Canvas renderer
web/src/space/spaceEngine.ts - Creative thumbnails
web/src/space/spaceThumbs.ts - Group views
web/src/space/GroupGrid.tsx - Variation stepping
web/src/components/VariationStepper.tsx - Performance charts
web/src/components/charts/PerformanceCharts.tsx
Local service
- API client
web/src/lib/api.ts - API service
api/main.py - Meta Ads access
api/meta.py - Rate governor
api/governor.py - Demo account data
api/demo_data.py
Local state
- Config and cache
api/store.py
Other components
- User
- Meta Graph API
Connections 27
- User → App workflow: uses
README.md - App workflow → Account connection: opens connect
web/src/App.tsx - App workflow → Range and settings: shows controls
web/src/App.tsx - Account connection → API client: connects through
web/src/App.tsx - Range and settings → App workflow: sets range
web/src/App.tsx - App workflow → API client: loads data
web/src/App.tsx - API client → API service: requests
web/src/lib/api.ts - API service → Meta Ads access: fetches account data
api/main.py - Meta Ads access → Meta Graph API: reads ads
README.md - Meta Ads access → Rate governor: passes requests through
api/meta.py - API service → Config and cache: reads and writes
api/main.py - API service → Demo account data: loads demo data
api/main.py - App workflow → Ad model and stacks: enriches and stacks
web/src/App.tsx - App workflow → Funnel ranking: derives positions
web/src/App.tsx - App workflow → 3D creative space: renders cards
web/src/App.tsx - 3D creative space → Grouping and layout: builds layouts
web/src/space/CreativeSpace3D.tsx - Grouping and layout → Name parsing: uses parsed fields
web/src/space/spaceLayout.ts - 3D creative space → Canvas renderer: drives rendering
web/src/space/CreativeSpace3D.tsx - 3D creative space → Creative thumbnails: loads thumbnails
web/src/space/CreativeSpace3D.tsx - 3D creative space → Group views: offers alternatives
README.md - 3D creative space → Variation stepping: steps variations
README.md - App workflow → Ad detail drawer: opens selected ad
README.md - Ad detail drawer → Chart data requests: requests charts
web/src/lib/adCharts.ts - Chart data requests → API client: uses API requests
web/src/lib/adCharts.ts - Ad detail drawer → Performance charts: shows chart views
README.md - App workflow → Date ranges: selects default range
web/src/App.tsx - API client → Meta Graph API: fetches chart data