How samyakkk11/autometrics-analytics-studio works
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: sections.jsx Page sections · showcase.js Showcase ordering · App.jsx App shell · World.jsx Three.js scene
Components 21
Site experience
- App shell
src/App.jsx - Page sections
src/sections.jsx - Navigation and modal
src/ui.jsx - Scroll behavior
src/scroll.js - Site configuration
src/config.js - Contact icons
src/contact-icons.jsx
Project showcase
- Case study content
src/data.js - Partner projects
src/partner-projects.js - Freelance project
src/freelance-project.js - Showcase ordering
src/showcase.js - Project screenshots
public
Visual layer
- Three.js scene
src/gl/World.jsx - Scene layouts
src/gl/layouts.js - Shared UI state
src/state.js - Logo rendering
src/logos.jsx
Inquiry handling
- Vercel adapter
api/contact.js - Netlify adapter
netlify/functions/contact.mjs - Inquiry validation
server/contact-handler.js
Inquiry storage
- Supabase Postgres
supabase/contact_inquiries.sql
Other components
- Visitor
- Hosting function runtime
Connections 27
- Visitor → App shell: opens site
README.md - App shell → Page sections: renders sections
src/App.jsx - App shell → Three.js scene: renders scene
src/App.jsx - App shell → Navigation and modal: renders controls
src/App.jsx - App shell → Scroll behavior: initializes scrolling
src/App.jsx - Page sections → Site configuration: uses settings
src/sections.jsx - Page sections → Contact icons: renders icons
src/sections.jsx - Page sections → Case study content: uses case studies
src/sections.jsx - Page sections → Showcase ordering: uses project collection
src/sections.jsx - Navigation and modal → Case study content: reads case studies
src/ui.jsx - Navigation and modal → Partner projects: reads partner details
src/ui.jsx - Navigation and modal → Freelance project: reads client details
src/ui.jsx - Showcase ordering → Case study content: builds collection
src/showcase.js - Showcase ordering → Partner projects: adds partner work
src/showcase.js - Showcase ordering → Freelance project: adds freelance work
src/showcase.js - Showcase ordering → Project screenshots: references images
README.md - Three.js scene → Shared UI state: reads UI state
src/gl/World.jsx - Three.js scene → Scene layouts: uses layouts
src/gl/World.jsx - Three.js scene → Logo rendering: draws logos
src/gl/World.jsx - Three.js scene → Showcase ordering: loads project shots
src/gl/World.jsx - Page sections → Vercel adapter: posts inquiry
README.md - Page sections → Netlify adapter: posts inquiry
README.md - Hosting function runtime → Vercel adapter: invokes
README.md - Hosting function runtime → Netlify adapter: invokes
README.md - Vercel adapter → Inquiry validation: delegates to
api/contact.js - Netlify adapter → Inquiry validation: delegates to
netlify/functions/contact.mjs - Inquiry validation → Supabase Postgres: inserts inquiry
server/contact-handler.js