astro-global-market-terminal Svelte Themes

Astro Global Market Terminal

📈 A high-performance real-time global market dashboard showcasing Astro Islands with React, Vue, and Svelte simultaneously.

#astro#astro6#astrojs#charts#dashboard#lightweight-charts#nanostores#netlify#netlify-deployment#react
Demo Download

📈 Astro Global Market Terminal

A high-performance real-time global market dashboard showcasing Astro Islands with React, Vue, and Svelte simultaneously.


Experience the power of micro-frontends with Astro Islands. This terminal uses React for complex charts, Vue for interactive controls, and Svelte for high-frequency data tickers—all without compromising on load speed or performance.

✨ Highlights

  • React Trading Charts: Utilizes lightweight-charts within React for professional-grade, high-performance financial data visualization.
  • Vue Reactive Controls: Features a comprehensive settings and filtering sidebar powered by Vue 3's reactive core.
  • Svelte Market Ticker: Implements a fast, compiled Svelte component for real-time, high-frequency price updates.
  • Zero-JS Shell: The core layout and structure are strictly static HTML generated by Astro, loading framework code only where necessary.

🧭 Pages

  • / - Main dashboard and trading terminal
  • /robots.txt - Crawler rules generated dynamically
  • /sitemap-index.xml - Auto-generated sitemap

🛠️ Tech Stack

Layer Technology
Framework Astro
Components React, Vue 3, Svelte
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-market-terminal/
├── public/
│   ├── favicon.svg
│   └── og.svg
├── src/
│   ├── components/
│   │   ├── MainChart.tsx
│   │   ├── Sidebar.vue
│   │   └── Ticker.svelte
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── robots.txt.ts
│   ├── store/
│   │   └── marketStore.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