Team name - Kinder Joy

README.md

@@ -1,113 +1,69 @@
-# Development Sprint: 2-Hour Challenge
+# 🛰️ Solar System Explorer
 
-Welcome to the Development Sprint. In this 2-hour team-based event, you will build a fully functional, responsive, and visually appealing frontend application from scratch. 
+An immersive, hardware-accelerated 3D exploration interface pulling live telemetry and mission data from NASA’s deep-space archives.
 
-This challenge evaluates your team's ability to rapidly prototype, effectively utilize a modern JavaScript/React ecosystem, and seamlessly integrate external APIs to build a compelling user interface.
+---
+⚡ Core Integration Stack:
 
-**Below are listed libraries and Public APIs you can use.**
-**You must only use the given libraries, however you can use additional APIs for more functionality.**
+The project was engineered to demonstrate a high-density integration of modern frontend libraries and scientific APIs.
 
-## 🏆 Judging Criteria
+3D Engine | Three.js (r128): 
+Orchestrates the procedural starfield (15k points) and hardware-accelerated WebGL geometry for a smooth 60FPS cosmic environment.
 
-Submissions will be evaluated on the following metrics:
-1. **Library Integration:** The quantity and quality of external libraries successfully implemented. We are looking for meaningful usage of these tools to solve frontend challenges.
-2. **Implementation & UX/UI:** The overall aesthetic, responsiveness, and usability of the application. Clean design and smooth user experiences will be highly rewarded.
-3. **Version Control:** Proper use of Git, including clear, descriptive commit messages and logical branching.
+Styling | Tailwind CSS:
+Utilized to build a custom Glassmorphism HUD, leveraging backdrop-blur and dynamic borders for a futuristic "Space Terminal" aesthetic.
 
-## 🚀 Submission Guidelines
+Icons | Lucide React: 
+Provides a consistent, context-aware iconography system used for real-time planetary classification and navigation.
 
-Please follow these steps carefully to ensure your project is evaluated:
+API | NASA Open API:
+Integrated via live asynchronous fetching to pull official mission intelligence, descriptions, and high-definition imagery directly from NASA archives.
 
-1. **Fork** this repository.
-2. **Clone** your forked repository to your local machines.
-3. Create a new directory named after your team (e.g., `team-horizon` or `team-byte`).
-4. Initialize your project within this directory.
-5. **Showcase Video:** Record a 1-2 minute screen recording demonstrating your working project. Highlight the specific APIs and UI components you implemented.
-6. **Commit & Push:** Add your project files and the showcase video (`.mp4` or a hosted link in your project's README) to your directory.
-7. Open a **Pull Request (PR)** to this main repository before the 2-hour deadline.
+Typography | Google Fonts: 
+Employs Orbitron for high-impact UI headers and JetBrains Mono for the real-time telemetry and coordinate data feeds.
 
-### Version Control Best Practices
-* Utilize feature branches for development (e.g., `feature/authentication`, `fix/layout-shift`).
-* Use conventional commit messages to maintain a clean history (e.g., `feat: added Recharts for data visualization` or `fix: resolved API CORS issue`).
+## 🚀 Technical Highlights
 
----
+### 1. The "Warp Drive" Navigation
+Instead of static cuts, we implemented a **Linear Interpolation (Lerp)** camera system. 
+* The Math: $Camera_{pos} = lerp(current, target, 0.06)$
+* Result: Provides a cinematic, fluid transition that conveys the massive scale of the solar system while maintaining 60FPS performance.
+
+### 2. Live NASA Intelligence Decryption
+We bypassed static data by hooking into the **NASA Image & Video Library API**. 
+* Real-time Fetch: Every "Warp" triggers a new fetch request to NASA's servers.
+* Data Processing: The app "decrypts" raw JSON into the HUD, displaying official mission timestamps and scientific descriptions for each celestial body.
 
-## 🛠️ Approved Libraries & Tools
-
-You are encouraged to utilize tools from the following categories to accelerate your development process and enhance your application's capabilities.
-
-### UI Components & Design Systems
-* **[shadcn/ui](https://ui.shadcn.com/)** - Beautifully designed, accessible components.
-* **[Chakra UI](https://chakra-ui.com/)** - Simple, modular, and accessible component library.
-* **[NextUI](https://nextui.org/)** - Fast and modern React UI library.
-* **[Radix UI](https://www.radix-ui.com/)** - Unstyled, accessible components for building design systems.
-* **[Mantine](https://mantine.dev/)** - A fully featured React components library.
-
-### Icons & Typography
-* **[Lucide React](https://lucide.dev/)** - Consistent, clean icon toolkit.
-* **[React Icons](https://react-icons.github.io/react-icons/)** - Comprehensive library of popular icon sets.
-* **[Heroicons](https://heroicons.com/)** - Hand-crafted SVG icons by the Tailwind CSS team.
-
-### Animation & 3D Graphics
-* **[Framer Motion](https://www.framer.com/motion/)** - Production-ready motion library for React.
-* **[AutoAnimate](https://auto-animate.formkit.com/)** - Zero-config, drop-in animations.
-* **[GSAP](https://gsap.com/)** - Advanced, professional-grade web animation.
-* **[Three.js](https://threejs.org/) & [@react-three/fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)** - Tools for building 3D scenes in React.
-
-### Data Fetching & State Management
-* **[React Query (TanStack Query)](https://tanstack.com/query/latest)** - Robust asynchronous state management.
-* **[Zustand](https://zustand-demo.pmnd.rs/)** - Fast, scalable, and minimalistic state management.
-* **[Axios](https://axios-http.com/)** - Promise-based HTTP client.
-
-### Forms, Validation & Editors
-* **[React Hook Form](https://react-hook-form.com/)** - Performant and flexible form handling.
-* **[Zod](https://zod.dev/)** - TypeScript-first schema validation.
-* **[TipTap](https://tiptap.dev/)** - Headless, highly extensible rich text editor.
-
-### Maps, Charts & Data Visualization
-* **[Recharts](https://recharts.org/)** - Composable charting library built on React components.
-* **[Chart.js](https://www.chartjs.org/) & [react-chartjs-2](https://react-chartjs-2.js.org/)** - Flexible JavaScript charting.
-* **[React Leaflet](https://react-leaflet.js.org/)** - Interactive maps integration for React.
-
-### Advanced Utilities
-* **[dnd-kit](https://dndkit.com/)** - Modern drag-and-drop toolkit for React.
-* **[date-fns](https://date-fns.org/)** - Comprehensive date utility library.
-* **[Wagmi](https://wagmi.sh/) & [viem](https://viem.sh/)** - React Hooks for Ethereum/Web3 integration.
-* **[Sonner](https://sonner.emilkowal.ski/)** - Opinionated toast notification component.
+### 3. Procedural Environment
+* Starfield: A `BufferGeometry` system generating 15,000 unique vertices in 3D space to ensure the environment feels infinite without performance degradation.
+* Dynamic Lighting: A centralized `PointLight` at the Sun's origin creates accurate light-falloff and shadows on planetary surfaces.
 
 ---
 
-## 📡 Public APIs
+## 📟 HUD Telemetry Details
+The Glassmorphism interface provides live feedback to the "pilot":
+* Sector Status: Tracks the current planetary focus in the neural link.
+* Mission Clock: Real-time synchronized timestamping for mission logs.
+* Coordinate Tracker: Live feed of the Three.js `Vector3` camera position.
+* NASA Intel: Dynamic scrollable feed for mission-critical information.
 
-You must integrate at least one of the following APIs to populate your application with dynamic data. 
+---
 
-### Finance & Crypto
-* **[CoinGecko API](https://www.coingecko.com/en/api)**: Cryptocurrency data, live prices, and historical charts.
-* **[Alpha Vantage](https://www.alphavantage.co/)**: *(Free key required)* Real-time and historical stock market data.
+## 🛠️ Installation & Deployment
+This project is optimized for zero-config environments.
+1.  Clone: `git clone [repo-url]`
+2.  Navigate: `cd team-[your-folder]`
+3.  Launch: Open `index.html` in any WebGL-enabled browser.
+    * *Note: All dependencies are served via optimized CDNs for maximum load speed and reliability.*
 
-### E-commerce & Mock Data
-* **[DummyJSON](https://dummyjson.com/)**: Mock data for products, recipes, users, and carts.
-* **[Fake Store API](https://fakestoreapi.com/)**: E-commerce prototype data including products and categories.
+---
 
-### Entertainment & Media
-* **[The Movie Database (TMDB) API](https://developer.themoviedb.org/docs)**: *(Free key required)* Comprehensive data on movies, TV shows, and cast members.
-* **[Spotify Web API](https://developer.spotify.com/documentation/web-api)**: *(Authentication required)* Metadata for artists, albums, and tracks.
-* **[PokeAPI](https://pokeapi.co/)**: Extensive Pokémon database.
-* **[Jikan API](https://jikan.moe/)**: Unofficial MyAnimeList API for anime and manga data.
+## 🎥 Project Showcase
+[Click here to view the Demo Video]
 
-### Science & Geography
-* **[NASA Open APIs](https://api.nasa.gov/)**: *(Free key required)* Astronomy Picture of the Day, Mars Rover photos, and near-Earth object data.
-* **[REST Countries](https://restcountries.com/)**: RESTful API for global country data (population, demographics, flags).
-* **[OpenWeatherMap](https://openweathermap.org/api)**: *(Free key required)* Current weather data and forecasts.
+https://drive.google.com/file/d/1s5n7K85nJYXhDN4pUfikKWtXo8A_bw40/view?usp=sharing
 
-### Sports
-* **[TheSportsDB](https://www.thesportsdb.com/api.php)**: Crowd-sourced sports data, team information, and artwork.
-* **[balldontlie](https://www.balldontlie.io/)**: NBA statistics and game data.
 
 ---
 
-## ⚠️ Rules of Engagement
-
-* **No Pre-built Templates:** Utilizing standard initializers (like Vite, Create React App, or Next.js) is permitted. However, cloning a full boilerplate containing pre-built application features or routing architectures is strictly prohibited.
-* **AI Assistance:** AI tooling (e.g., GitHub Copilot, Gemini, ChatGPT) may be used for debugging, syntax, and scaffolding. The core architectural decisions and library integrations must remain your team's own work.
-* **Time Limits:** All Pull Requests must be opened before the 120-minute mark. Late submissions will be subject to point deductions.
+**Built for the devSprint Challenge.**