Antiz-1126 "Sentinel"

Advanced environmental monitoring platform powered by NASA data sources, providing real-time insights into air quality, space weather, and natural events for climate safety using AI prediction.

✨ Features

• Real-time Environmental Monitoring: NASA GIBS satellite imagery, EONET natural events, DONKI space weather
• Air Quality Forecasting: NO₂ predictions with TEMPO satellite data
• Space Weather Alerts: Solar flares, CMEs, geomagnetic storms impact analysis
• Sky Safety Index (SSI): Unified environmental safety metric (0-100)
• Economic Impact Analysis: Estimated losses from environmental factors
• Interactive 2D Maps: Leaflet-based visualization with time controls
• AI-Powered Insights: Real-time analysis and recommendations
• WebSocket Alerts: Live notifications for critical events

🚀 Quick Start

Prerequisites

• Node.js 18+ and pnpm
• Backend API running (see backend documentation)

Installation

# Clone the repository
git clone <repository-url>
cd antiz-1126

# Install dependencies
pnpm install

# Set up environment variables
cp .env.example .env
# Edit .env with your backend URL and WebSocket endpoint

# Start development server
pnpm dev

Environment Variables

Create a .env file:

# NASA Earthdata Authentication (Required for live data)
VITE_NASA_TOKEN_1=your_first_earthdata_bearer_token
VITE_NASA_TOKEN_2=your_second_earthdata_bearer_token

# Backend API (Optional - for additional features)
VITE_API_BASE=https://your-backend-api
# VITE_WS_URL=wss://your-backend-api/ws/alerts  # Optional - leave commented if backend not available

🛠️ Tech Stack

• React 18 + TypeScript + Vite - Modern development setup
• Tailwind CSS + shadcn/ui - Beautiful, accessible components
• React Router - Client-side routing
• Zustand - Lightweight state management
• TanStack Query - Server state management and caching
• React Leaflet - Interactive maps with NASA GIBS layers
• Recharts - Data visualization and charts
• Framer Motion - Smooth animations and transitions
• Sonner - Toast notifications
• Lottie React - Animated loaders and empty states

📊 Data Sources

NASA APIs Integration

• EONET - Natural events (wildfires, storms, volcanoes) ✅ Live Data
• GIBS - Real-time satellite imagery ✅ Live Data
• DONKI - Space weather events
• TEMPO - Air quality measurements ✅ Integrated

🔑 Authentication: The app now uses your NASA Earthdata bearer tokens for direct API access, providing real-time data without requiring a backend server.

Key Metrics

• Sky Safety Index (SSI): Composite score (Air Quality 40% + Space Weather 35% + Visibility 25%)
• NO₂ Forecast: 6-hour predictions with confidence intervals
• Economic Impact: Daily estimated losses across aviation, agriculture, health sectors

📂 Project Structure

public/
├── assets/
└── tle/
src/
├── components/
│   ├── cards/
│   ├── charts/
│   ├── controls/
│   ├── dashboard/
│   ├── layout/
│   ├── loaders/
│   ├── map/
│   ├── models/
│   ├── space/
│   ├── ui/
│   └── widgets/
├── hooks/
├── keeptrack/
│   ├── components/
│   ├── orbit/
│   ├── cards/
│   ├── tle/
├── lib/
├── routes/
├── store/
├── styles/
└── types/

🌍 Deployment

Vercel (Recommended)

# Build for production
pnpm build

# Deploy to Vercel
npx vercel --prod

# Or connect your GitHub repo to Vercel dashboard

Other Platforms

The app builds to static files in /dist and can be deployed to:

• Netlify
• AWS S3 + CloudFront
• Digital Ocean App Platform
• Any static hosting service

🔧 Development

Available Scripts

pnpm dev          # Start development server
pnpm build        # Build for production
pnpm preview      # Preview production build
pnpm lint         # Lint code

Key Features to Explore

1. Interactive Map: Navigate between Caribbean cities, toggle data layers
2. Time Controls: Animate satellite imagery and events over time
3. Real-time Alerts: WebSocket notifications for environmental changes
4. SSI Dashboard: Comprehensive safety index with component breakdown
5. Economic Modeling: Adjust assumptions and see impact estimates

🎨 Design System

• Colors: Primary (#00D1FF), Secondary (#9C6BFF), Accent (#6b72804d)
• Typography: Inter (sans-serif), JetBrains Mono (monospace)
• Theme: Dark space theme with starfield background
• Animations: Framer Motion for smooth transitions and micro-interactions

📱 Responsive Design

• Mobile: < 768px (stacked layout, touch-optimized controls)
• Tablet: 768px - 1024px (hybrid layout)
• Desktop: > 1024px (full dashboard with sidebars)

🔌 API Integration

The frontend consumes REST APIs and WebSocket connections:

// Example API calls
GET /api/v1/events/recent?bbox=-85,8,-60,26&days=7
GET /api/v1/predict/air-quality?city=SDQ&h=6
GET /api/v1/ssi?city=SDQ
WebSocket /ws/alerts (real-time notifications)

🚧 Roadmap

• 3D Globe View: CesiumJS integration for immersive visualization
• Advanced AI: Machine learning predictions and anomaly detection
• Mobile App: React Native version
• Historical Analysis: Time series data and trend analysis
• Multi-language: i18n support for Spanish, French, Creole

🤝 Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• NASA for providing open data APIs
• shadcn/ui for beautiful component primitives
• Leaflet and OpenStreetMap for mapping capabilities
• Caribbean meteorological community for regional insights

---

Created with ❤️ for climate safety and prevention