# samyakkk11/autometrics-analytics-studio architecture

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

- Interactive diagram: https://gitdiagram.com/samyakkk11/autometrics-analytics-studio
- Repository: https://github.com/samyakkk11/autometrics-analytics-studio

## Overview

This is a collaborative analytics studio website: visitors explore services, skills, case studies, and freelance work, then can submit an inquiry. The frontend combines page sections, project content and a Three.js visual layer; inquiry submissions pass through a serverless adapter, shared validation, and Supabase storage. The README documents both hosting adapters and the database setup. Some frontend and project-viewer connections are based on the SOURCE INDEX or README rather than complete excerpts, so unsampled implementation details are not expanded.

Main entry points: [`src/sections.jsx`](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/sections.jsx) (Page sections), [`src/showcase.js`](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/showcase.js) (Showcase ordering), [`src/App.jsx`](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/App.jsx) (App shell), [`src/gl/World.jsx`](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/gl/World.jsx) (Three.js scene)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Site experience"]
  node_app["App shell<br/>[App.jsx]"]
  node_sections["Page sections<br/>[sections.jsx]"]
  node_ui["Navigation and modal<br/>[ui.jsx]"]
  node_scroll["Scroll behavior<br/>[scroll.js]"]
  node_config["Site configuration<br/>[config.js]"]
  node_contacticons["Contact icons<br/>[contact-icons.jsx]"]
end

subgraph group_work["Project showcase"]
  node_projectdata["Case study content<br/>[data.js]"]
  node_partnerdata["Partner projects"]
  node_freelancedata["Freelance project"]
  node_showcase["Showcase ordering<br/>[showcase.js]"]
  node_screenshots["Project screenshots"]
end

subgraph group_visuals["Visual layer"]
  node_world["Three.js scene<br/>[World.jsx]"]
  node_layouts["Scene layouts<br/>[layouts.js]"]
  node_state["Shared UI state<br/>[state.js]"]
  node_logos["Logo rendering<br/>[logos.jsx]"]
end

subgraph group_inquiries["Inquiry handling"]
  node_vercel["Vercel adapter<br/>[contact.js]"]
  node_netlify["Netlify adapter<br/>[contact.mjs]"]
  node_handler["Inquiry validation<br/>[contact-handler.js]"]
end

subgraph group_storage["Inquiry storage"]
  node_supabase[("Supabase Postgres")]
end

node_visitor(("Visitor"))
node_host{{"Hosting function runtime"}}

node_visitor -->|"opens site"| node_app
node_app -->|"renders sections"| node_sections
node_app -->|"renders scene"| node_world
node_app -->|"renders controls"| node_ui
node_app -->|"initializes scrolling"| node_scroll
node_sections -->|"uses settings"| node_config
node_sections -->|"renders icons"| node_contacticons
node_sections -->|"uses case studies"| node_projectdata
node_sections -->|"uses project collection"| node_showcase
node_ui -->|"reads case studies"| node_projectdata
node_ui -->|"reads partner details"| node_partnerdata
node_ui -->|"reads client details"| node_freelancedata
node_showcase -->|"builds collection"| node_projectdata
node_showcase -->|"adds partner work"| node_partnerdata
node_showcase -->|"adds freelance work"| node_freelancedata
node_showcase -->|"references images"| node_screenshots
node_world -->|"reads UI state"| node_state
node_world -->|"uses layouts"| node_layouts
node_world -->|"draws logos"| node_logos
node_world -->|"loads project shots"| node_showcase
node_sections -->|"posts inquiry"| node_vercel
node_sections -->|"posts inquiry"| node_netlify
node_host -->|"invokes"| node_vercel
node_host -->|"invokes"| node_netlify
node_vercel -->|"delegates to"| node_handler
node_netlify -->|"delegates to"| node_handler
node_handler -->|"inserts inquiry"| node_supabase

click node_app "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/App.jsx"
click node_sections "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/sections.jsx"
click node_ui "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/ui.jsx"
click node_scroll "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/scroll.js"
click node_config "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/config.js"
click node_contacticons "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/contact-icons.jsx"
click node_projectdata "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/data.js"
click node_partnerdata "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/partner-projects.js"
click node_freelancedata "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/freelance-project.js"
click node_showcase "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/showcase.js"
click node_screenshots "https://github.com/samyakkk11/autometrics-analytics-studio/tree/main/public"
click node_world "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/gl/World.jsx"
click node_layouts "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/gl/layouts.js"
click node_state "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/state.js"
click node_logos "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/logos.jsx"
click node_vercel "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/api/contact.js"
click node_netlify "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/netlify/functions/contact.mjs"
click node_handler "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/server/contact-handler.js"
click node_supabase "https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/supabase/contact_inquiries.sql"

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_sections,node_ui,node_scroll,node_config,node_contacticons toneBlue
class node_projectdata,node_partnerdata,node_freelancedata,node_showcase,node_screenshots toneAmber
class node_world,node_layouts,node_state,node_logos toneMint
class node_vercel,node_netlify,node_handler toneRose
class node_supabase,node_visitor,node_host toneIndigo
```

## Components

### Site experience

- [App shell](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/App.jsx): `src/App.jsx`
- [Page sections](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/sections.jsx): `src/sections.jsx`
- [Navigation and modal](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/ui.jsx): `src/ui.jsx`
- [Scroll behavior](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/scroll.js): `src/scroll.js`
- [Site configuration](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/config.js): `src/config.js`
- [Contact icons](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/contact-icons.jsx): `src/contact-icons.jsx`

### Project showcase

- [Case study content](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/data.js): `src/data.js`
- [Partner projects](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/partner-projects.js): `src/partner-projects.js`
- [Freelance project](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/freelance-project.js): `src/freelance-project.js`
- [Showcase ordering](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/showcase.js): `src/showcase.js`
- [Project screenshots](https://github.com/samyakkk11/autometrics-analytics-studio/tree/main/public): `public`

### Visual layer

- [Three.js scene](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/gl/World.jsx): `src/gl/World.jsx`
- [Scene layouts](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/gl/layouts.js): `src/gl/layouts.js`
- [Shared UI state](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/state.js): `src/state.js`
- [Logo rendering](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/src/logos.jsx): `src/logos.jsx`

### Inquiry handling

- [Vercel adapter](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/api/contact.js): `api/contact.js`
- [Netlify adapter](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/netlify/functions/contact.mjs): `netlify/functions/contact.mjs`
- [Inquiry validation](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/server/contact-handler.js): `server/contact-handler.js`

### Inquiry storage

- [Supabase Postgres](https://github.com/samyakkk11/autometrics-analytics-studio/blob/main/supabase/contact_inquiries.sql): `supabase/contact_inquiries.sql`

### Other components

- **Visitor**
- **Hosting function runtime**

## Connections

- Visitor → App shell: opens site (evidence: `README.md`)
- App shell → Page sections: renders sections (evidence: `src/App.jsx`)
- App shell → Three.js scene: renders scene (evidence: `src/App.jsx`)
- App shell → Navigation and modal: renders controls (evidence: `src/App.jsx`)
- App shell → Scroll behavior: initializes scrolling (evidence: `src/App.jsx`)
- Page sections → Site configuration: uses settings (evidence: `src/sections.jsx`)
- Page sections → Contact icons: renders icons (evidence: `src/sections.jsx`)
- Page sections → Case study content: uses case studies (evidence: `src/sections.jsx`)
- Page sections → Showcase ordering: uses project collection (evidence: `src/sections.jsx`)
- Navigation and modal → Case study content: reads case studies (evidence: `src/ui.jsx`)
- Navigation and modal → Partner projects: reads partner details (evidence: `src/ui.jsx`)
- Navigation and modal → Freelance project: reads client details (evidence: `src/ui.jsx`)
- Showcase ordering → Case study content: builds collection (evidence: `src/showcase.js`)
- Showcase ordering → Partner projects: adds partner work (evidence: `src/showcase.js`)
- Showcase ordering → Freelance project: adds freelance work (evidence: `src/showcase.js`)
- Showcase ordering → Project screenshots: references images (evidence: `README.md`)
- Three.js scene → Shared UI state: reads UI state (evidence: `src/gl/World.jsx`)
- Three.js scene → Scene layouts: uses layouts (evidence: `src/gl/World.jsx`)
- Three.js scene → Logo rendering: draws logos (evidence: `src/gl/World.jsx`)
- Three.js scene → Showcase ordering: loads project shots (evidence: `src/gl/World.jsx`)
- Page sections → Vercel adapter: posts inquiry (evidence: `README.md`)
- Page sections → Netlify adapter: posts inquiry (evidence: `README.md`)
- Hosting function runtime → Vercel adapter: invokes (evidence: `README.md`)
- Hosting function runtime → Netlify adapter: invokes (evidence: `README.md`)
- Vercel adapter → Inquiry validation: delegates to (evidence: `api/contact.js`)
- Netlify adapter → Inquiry validation: delegates to (evidence: `netlify/functions/contact.mjs`)
- Inquiry validation → Supabase Postgres: inserts inquiry (evidence: `server/contact-handler.js`)