Interactive 3D globe visualization of AeThex developers in real-time
  • TypeScript 88.9%
  • CSS 7.2%
  • PLpgSQL 1.9%
  • JavaScript 1.7%
  • HTML 0.3%
Find a file
2026-01-03 03:34:01 +00:00
.github Initial commit 2026-01-03 00:43:21 +00:00
src Edited Spark 2026-01-03 03:33:50 +00:00
.gitignore Initial commit 2026-01-03 00:43:21 +00:00
.spark-initial-sha Generated by Spark: # CreativeFlow Studio 2026-01-03 00:49:48 +00:00
components.json Initial commit 2026-01-03 00:43:21 +00:00
index.html Generated by Spark: # CreativeFlow Studio 2026-01-03 00:49:48 +00:00
LICENSE Initial commit 2026-01-03 00:43:21 +00:00
package-lock.json Generated by Spark: ATTATCH THE SUPABASE VARS I GAVE YOU 2026-01-03 01:57:04 +00:00
package.json Generated by Spark: ATTATCH THE SUPABASE VARS I GAVE YOU 2026-01-03 01:57:04 +00:00
PRD.md Generated by Spark: Add arcs connecting developers who worked on the same projects 2026-01-03 01:49:20 +00:00
README.md Generated by Spark: ATTATCH THE SUPABASE VARS I GAVE YOU 2026-01-03 01:57:04 +00:00
runtime.config.json Add spark configuration 2026-01-03 02:13:56 +00:00
SECURITY.md Initial commit 2026-01-03 00:43:21 +00:00
spark.meta.json Generated by Spark: Could we make it a wireframe? 2026-01-03 01:16:44 +00:00
supabase-schema.sql Generated by Spark: ATTATCH THE SUPABASE VARS I GAVE YOU 2026-01-03 01:57:04 +00:00
SUPABASE.md Generated by Spark: ATTATCH THE SUPABASE VARS I GAVE YOU 2026-01-03 01:57:04 +00:00
tailwind.config.js Initial commit 2026-01-03 00:43:21 +00:00
theme.json Initial commit 2026-01-03 00:43:21 +00:00
tsconfig.json Initial commit 2026-01-03 00:43:21 +00:00
vite.config.ts Initial commit 2026-01-03 00:43:21 +00:00

AeThex Global Developer Directory

An immersive 3D interactive Earth visualization displaying AeThex developers as glowing nodes across the globe, with division-specific color coding and detailed developer profiles accessible through node interaction.

🌍 Features

  • 3D Earth Globe: Realistic Earth rendering with NASA Blue Marble texture
  • Interactive Developer Nodes: Click on any developer location to view their profile
  • Division Filtering: Filter developers by their organizational division
  • Real-time Updates: Changes to the developer database are reflected instantly
  • Project Connections: Visualize collaboration with arcs between developers working on the same projects
  • Time Zone Overlay: See local times for each developer location
  • Technical Annotations: Measurement lines and data overlays showing globe metrics

🚀 Getting Started

Prerequisites

  • Node.js (v18+)
  • A Supabase account and project

Installation

  1. Clone the repository

  2. Install dependencies:

    npm install
    
  3. Configure your Supabase credentials in .env:

    VITE_SUPABASE_URL=your-project-url
    VITE_SUPABASE_ANON_KEY=your-anon-key
    
  4. Set up the database schema (see SUPABASE.md for details)

  5. Run the development server:

    npm run dev
    

📦 Tech Stack

  • React 19 with TypeScript
  • Three.js & three-globe for 3D visualization
  • Supabase for database and real-time updates
  • Tailwind CSS for styling
  • shadcn/ui components
  • Phosphor Icons for UI icons

🗄️ Database

This project uses Supabase as the backend database. See SUPABASE.md for detailed setup instructions and API documentation.

🎨 Design

The app features a technical blueprint aesthetic with:

  • Monochromatic wireframe palette
  • Inter font family for UI
  • JetBrains Mono for technical elements
  • Division-specific accent colors
  • Minimal, purposeful animations

📄 License

The Spark Template files and resources from GitHub are licensed under the terms of the MIT license, Copyright GitHub, Inc.