AI-Powered Satellite Data Intelligence Interface
A modern, space-themed web application for AstraQ — an AI assistant that provides intelligent access to ISRO's MOSDAC satellite datasets through natural language conversation, knowledge graph exploration, and semantic document search.
Features • Tech Stack • Getting Started • Project Structure • Deployment • Contributing
- Markdown-rendered answers with collapsible source citations and retrieval mode badges (KG / RAG / Both)
- AI-generated follow-up question chips for guided exploration
- Voice input via Web Speech API for hands-free querying
- File attachments (PDF, DOCX, TXT) for custom context grounding
- Thread management with favorites, full-text export (Markdown/JSON), and public share links
- Interactive force-directed graph visualization of the Neo4j satellite knowledge graph
- Type-based filtering, search-to-focus, and node detail panels with relationship traversal
- Deep linking into chat for contextual follow-up questions
- Browsable catalog of Indian Earth-observation satellites with category filtering
- Per-satellite detail pages showing products, parameters, regions, payloads, and inline document viewer
- "Ask AstraQ" shortcuts for instant contextual queries
- Debounced semantic search over the MOSDAC documentation corpus with relevance scoring
- Personal message history search across all conversation threads
- Direct navigation to source documents and chat threads
- Fully responsive design (mobile, tablet, desktop) with glassmorphism UI
- Dark-mode space theme with animated starfield background
- Public read-only conversation sharing (no authentication required)
- Cold-start detection with automatic backend warm-up banner
- Route-level code splitting for optimal loading performance
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript (strict mode) |
| Build | Vite 7 with SWC |
| Styling | Tailwind CSS v4 (@tailwindcss/vite) — custom design tokens via @theme |
| Animations | Framer Motion (page transitions, staggered reveals, micro-interactions) |
| Auth | Firebase Authentication (email/password) with auto-attached ID tokens |
| Icons | lucide-react |
| Markdown | react-markdown + remark-gfm |
| Graph Viz | react-force-graph-2d (lazy-loaded) |
| Testing | Vitest + Testing Library |
| Linting | ESLint (typescript-eslint flat config) |
- Node.js 18+ and npm 9+
- A Firebase project with Authentication enabled (email/password provider)
- The AstraQ Backend running locally or deployed
git clone https://github.com/a6hinandh/AstraQ_Frontend.git
cd AstraQ_Frontend
npm cicp .env.example .env| Variable | Development | Production |
|---|---|---|
VITE_API_BASE_URL |
Omit (Vite proxies /api to localhost:8000) |
https://<backend-host>/api |
VITE_FIREBASE_API_KEY |
Firebase Console value | Same |
VITE_FIREBASE_AUTH_DOMAIN |
Firebase Console value | Same |
VITE_FIREBASE_PROJECT_ID |
Firebase Console value | Same |
VITE_FIREBASE_STORAGE_BUCKET |
Firebase Console value | Same |
VITE_FIREBASE_MESSAGING_SENDER_ID |
Firebase Console value | Same |
VITE_FIREBASE_APP_ID |
Firebase Console value | Same |
All
VITE_*values are baked in at build time. Firebase web config is public by design — security is enforced server-side via ID token verification.
npm run dev # Start dev server at http://localhost:5173The Vite dev server proxies /api requests to http://127.0.0.1:8000, so run the backend locally for full functionality. The UI degrades gracefully when the API is unavailable.
| Command | Description |
|---|---|
npm run dev |
Start development server with HMR |
npm run build |
Type-check + production build to dist/ |
npm run typecheck |
Run TypeScript compiler (strict, no emit) |
npm run lint |
Run ESLint |
npm run test |
Run Vitest test suite |
npm run preview |
Preview production build locally |
flowchart LR
L["/ Landing"] --> LM["/learn-more"]
L --> LOGIN["/login & /signup"]
LOGIN --> C["/chat & /chat/:threadId"]
C --> E["/explorer<br/>KG Force Graph"]
C --> S["/satellites<br/>Catalog + Detail"]
C --> SE["/search<br/>Docs + Messages"]
C -. share link .-> SH["/share/:token<br/>Public Read-Only"]
All routes marked with authenticated access redirect to /login when unauthenticated. The /share/:token route is publicly accessible without login.
src/
├── lib/ # Typed API client, Firebase config, shared types & utilities
├── context/ # AuthContext (Firebase session + token provider)
├── hooks/ # useSpeech (voice), useWakeBackend (cold-start detection)
├── components/
│ ├── ui/ # Button, Input, Modal, GlassPanel, Spinner, Badge, WakeBanner
│ ├── layout/ # Navbar (responsive + mobile drawer), AppShell, SpaceBackground
│ └── landing/ # Hero, Features, Services (Query Lifecycle), FAQ, Footer
├── features/
│ ├── chat/ # Sidebar, messages, input, follow-ups, export, share, modals
│ └── kg/ # GraphExplorer (lazy chunk) + node color tokens
└── pages/ # One component per route (ChatPage, ExplorerPage, etc.)
- Route-level
React.lazy()for data-heavy pages (Explorer, Satellites, Search) - Manual vendor chunks: react, firebase, framer-motion, markdown, force-graph
- Main bundle: ~85 KB gzipped
- Total initial load: ~120 KB gzipped (excluding lazy routes)
- Connect repo to Render → New Static Site
- Build command:
npm ci && npm run build - Publish directory:
dist - Rewrite rule:
/* → /index.html(action: Rewrite) — required for SPA routing - Set environment variables (build-time
VITE_*values) - Add the deployed frontend URL to Firebase Auth → Authorized Domains
Works with any static hosting (Vercel, Netlify, Cloudflare Pages). Configure:
- SPA fallback to
index.htmlfor client-side routing - Build-time environment variables for Firebase and API URL
For the complete deployment guide (both repos + Firebase + Neo4j), see docs/DEPLOYMENT.md in the backend repo.
The visual identity is built on a space/glassmorphism theme:
- Color palette: Deep-space navy scale (
space-950tospace-600), accent blues, nebula purples, and knowledge-graph type colors - Typography: Outfit (headings/body) + Space Grotesk (monospace accents)
- Glass utilities:
glassandglass-strongfor backdrop-blur surfaces with luminous borders - Responsive: Mobile-first with breakpoints at
sm(640px),md(768px),lg(1024px) - Animations: Framer Motion for page transitions; CSS keyframes for ambient effects
All design tokens are defined in src/index.css under the @theme directive.
- Firebase ID tokens are verified server-side on every authenticated API call
- No secrets are stored client-side — Firebase web config is public, security is backend-enforced
- All user data (threads, messages, preferences) is scoped per-user via Firebase Auth UID
- CORS is restricted to the configured frontend origin
- Content Security Policy headers are set by the backend
See CONTRIBUTING.md for development guidelines, code style, and PR requirements.
This project is licensed under the MIT License — see the LICENSE file for details.
- ISRO / MOSDAC — Source satellite data documentation and product specifications
- AstraMind — Student-led team of data engineers, AI researchers, and space enthusiasts
- Built with React, Firebase, and the open-source ecosystem