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%
| .github | ||
| src | ||
| .gitignore | ||
| .spark-initial-sha | ||
| components.json | ||
| index.html | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| PRD.md | ||
| README.md | ||
| runtime.config.json | ||
| SECURITY.md | ||
| spark.meta.json | ||
| supabase-schema.sql | ||
| SUPABASE.md | ||
| tailwind.config.js | ||
| theme.json | ||
| tsconfig.json | ||
| vite.config.ts | ||
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
-
Clone the repository
-
Install dependencies:
npm install -
Configure your Supabase credentials in
.env:VITE_SUPABASE_URL=your-project-url VITE_SUPABASE_ANON_KEY=your-anon-key -
Set up the database schema (see SUPABASE.md for details)
-
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.