astro-global-data-dashboard Svelte Themes

Astro Global Data Dashboard

šŸŒ An immersive, interactive 3D global data dashboard built with Astro, Svelte, and Three.js, featuring real-time data flow visualization.

#astro#astrojs#cyberpunk#dashboard#netlify#netlify-deployment#svelte#svelte5#sveltejs#tailwindcss
Demo Download

šŸŒ Global Data Dashboard

An interactive 3D telemetry visualization combining Astro's static speed with WebGL power.


Immerse yourself in a cyberpunk-inspired control center. This dashboard renders a high-performance 3D Earth using Three.js, wrapped in a lightweight, lightning-fast Svelte UI, providing an optimal mix of static SEO delivery and heavy client-side graphics.

āœØ Highlights

  • Interactive 3D Globe: A wireframe Earth mesh with glowing telemetry nodes powered by WebGL/Three.js.
  • Ultra-Fast Svelte HUD: Complex data panels and counters run without virtual DOM overhead, strictly within client islands.
  • Glassmorphic UI: Built purely with Tailwind CSS 4 utilities for a modern cyberpunk aesthetic.

Note: The data displayed in the HUD (Active Nodes, Threat Level) and the particles rendered on the 3D Globe are currently mocked and run independently. In a future update, they will be synchronized to reflect real-time backend telemetry via WebSockets or SSE.

šŸ§­ Pages

  • / - Main landing page (3D Dashboard)
  • /robots.txt - Crawler rules generated dynamically
  • /sitemap-index.xml - Auto-generated sitemap

šŸ› ļø Tech Stack

Layer Technology
Framework Astro 6
Language TypeScript
UI Svelte 5, Three.js
Styling Tailwind CSS 4
SEO @astrojs/sitemap, canonical metadata, robots.txt
Hosting Static deployment ready (Netlify optimized)

šŸš€ Local Development

šŸ“¦ Install

npm install

ā–¶ļø Run dev server

npm run dev

šŸ—ļø Build

npm run build

šŸ“ Project Structure

astro-global-data-dashboard/
ā”œā”€ā”€ public/
ā”‚   ā”œā”€ā”€ favicon.svg
ā”‚   ā””ā”€ā”€ og.svg
ā”œā”€ā”€ src/
ā”‚   ā”œā”€ā”€ components/
ā”‚   ā”‚   ā”œā”€ā”€ Globe.svelte
ā”‚   ā”‚   ā””ā”€ā”€ HudOverlay.svelte
ā”‚   ā”œā”€ā”€ layouts/
ā”‚   ā”‚   ā””ā”€ā”€ Layout.astro
ā”‚   ā”œā”€ā”€ pages/
ā”‚   ā”‚   ā”œā”€ā”€ index.astro
ā”‚   ā”‚   ā””ā”€ā”€ robots.txt.ts
ā”‚   ā””ā”€ā”€ styles/
ā”‚       ā””ā”€ā”€ global.css
ā”œā”€ā”€ .gitignore
ā”œā”€ā”€ astro.config.mjs
ā”œā”€ā”€ LICENSE
ā”œā”€ā”€ netlify.toml
ā”œā”€ā”€ package-lock.json
ā”œā”€ā”€ package.json
ā”œā”€ā”€ README.md
ā””ā”€ā”€ tsconfig.json

šŸŒ Deployment

  1. Push your code to GitHub
  2. Connect repository to Netlify
  3. Build settings are auto-configured via netlify.toml
  4. Deploy

šŸ“„ License

MIT License. See LICENSE.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes