GSD Submission devSprint

GSD/.env

@@ -0,0 +1 @@
+VITE_NASA_API_KEY=UYkUnHB3OWVXkNWpga6uPuDRbC4ThZ8B5Dxoe4do

GSD/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

GSD/README.md

@@ -0,0 +1,133 @@
+# ☄️ Asteroid Watch Command
+
+A high-tech, dark-themed dashboard for tracking near-Earth objects (NEOs) in real time. Built with a cinematic deep-space aesthetic featuring glassmorphic UI panels, threat analysis visualizations, and detailed asteroid data cards.
+
+![React](https://img.shields.io/badge/React-19-61DAFB?style=flat-square&logo=react&logoColor=white)
+![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.2-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white)
+![Vite](https://img.shields.io/badge/Vite-7-646CFF?style=flat-square&logo=vite&logoColor=white)
+![License](https://img.shields.io/badge/License-MIT-green?style=flat-square)
+
+---
+
+## Video 
+- [video](https://youtu.be/-MuKd1avUJA)
+
+## 🚀 Overview
+
+Asteroid Watch Command is an interactive dashboard that displays near-Earth asteroid data with a mission-control inspired interface. The app features:
+
+- **Hero Panel** — Highlights the closest approaching asteroid with a cinematic full-viewport display
+- **Threat Radar** — Grid of asteroid cards with real-time proximity indices and hazard classification
+- **Trajectory Analysis** — Scatter plot visualization mapping miss distance vs. velocity
+- **Relatable Scale System** — Compares asteroid diameters to everyday objects (car, bus, building, stadium)
+- **Technical Aesthetic** — Crosshair card decorations, ruler marks, coordinate overlays, and scan-line animations
+
+## 🖼️ Design Aesthetic
+
+| Element | Detail |
+|---------|--------|
+| **Background** | Pure black (`#000000`) void with gradient overlays |
+| **Accent Colors** | Neon Cyan (`#00E5FF`) for safe • Pulsing Red (`#FF3D3D`) for hazardous |
+| **Typography** | Inter (headings) + JetBrains Mono (data readouts) |
+| **UI Style** | Glassmorphism, backdrop-blur, crosshair card corners |
+| **Animations** | Fade-up entrances, pulsing hazard indicators, smooth hover transitions |
+
+## 🛠️ Tech Stack
+
+| Technology | Purpose |
+|------------|---------|
+| [React 19](https://react.dev/) | UI framework with React Compiler |
+| [Tailwind CSS 4](https://tailwindcss.com/) | Utility-first styling via Vite plugin |
+| [Vite 7](https://vite.dev/) | Build tool & dev server |
+| [Recharts](https://recharts.org/) | Scatter plot data visualization |
+| [Lucide React](https://lucide.dev/) | Icon system |
+
+## 📦 Getting Started
+
+### Prerequisites
+
+- **Node.js** ≥ 18
+- **npm** ≥ 9
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/Ewan-Dkhar/devSprint.git
+cd devSprint/GSD
+
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+The app will be available at `http://localhost:5173`.
+
+### Build for Production
+
+```bash
+npm run build
+npm run preview
+```
+
+## 📁 Project Structure
+
+```
+GSD/
+├── index.html              # Entry HTML with meta tags & Google Fonts
+├── vite.config.js          # Vite + Tailwind CSS + React Compiler config
+├── package.json
+├── public/
+│   └── asteroid-hero.png   # Hero section background image
+└── src/
+    ├── main.jsx            # React root
+    ├── App.jsx             # App shell — layout & section composition
+    ├── index.css           # Design tokens, utilities & animations
+    ├── data/
+    │   ├── asteroids.js    # Mock asteroid data & helper functions
+    │   └── nasaapi.js      # NASA NeoWs API integration
+    └── components/
+        ├── Header.jsx      # Fixed top navigation bar
+        ├── HeroPanel.jsx   # Full-viewport closest encounter display
+        ├── AsteroidCard.jsx# Individual asteroid data card
+        └── ScatterChart.jsx# Trajectory analysis scatter plot
+```
+
+## 📊 Mock Data
+
+The dashboard uses simulated near-Earth object data:
+
+| Asteroid | Diameter | Hazardous | Velocity (km/h) | Miss Distance (LD) |
+|----------|----------|-----------|------------------|---------------------|
+| 2024 YR4 | 72m | ⚠️ Yes | 48,230 | 0.8 |
+| APOPHIS | 370m | ⚠️ Yes | 31,200 | 0.1 |
+| 2023 BU | 5.5m | ✅ No | 53,600 | 3.2 |
+| BENNU | 490m | ⚠️ Yes | 22,400 | 1.9 |
+| 2024 MK | 24m | ✅ No | 74,100 | 5.1 |
+| 2005 ED224 | 54m | ✅ No | 41,700 | 7.4 |
+
+> **LD** = Lunar Distance (~384,400 km). Values < 1 LD mean the asteroid passes closer than the Moon.
+
+## 🤖 AI Tools Used
+
+This project was developed with the assistance of the following AI tools:
+
+| Tool | Role |
+|------|------|
+| [**Google Gemini**](https://gemini.google.com/) | Research, ideation, and code generation |
+| [**Claude** (Anthropic)](https://claude.ai/) | Architecture design, component development, and code review |
+| [**Antigravity**](https://github.com/google-deepmind/antigravity) | Agentic AI coding assistant — end-to-end implementation, file creation, and iterative development |
+
+> These AI tools were used as pair-programming assistants. All code was reviewed and curated by the developer.
+
+## 📄 License
+
+This project is licensed under the MIT License — see the [LICENSE](LICENSE) file for details.
+
+---
+
+<p align="center">
+  <sub>Built with ☕ and AI · Data Simulated · 2025</sub>
+</p>

GSD/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

GSD/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Asteroid Watch Command — Real-time near-Earth object tracking dashboard with threat analysis and trajectory visualization." />
+    <title>Asteroid Watch Command</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>