From 8383fe91b9cabcf5638919a29a3c0b6e85d03764 Mon Sep 17 00:00:00 2001 From: Nehaaa191 Date: Sat, 4 Apr 2026 17:12:02 +0530 Subject: [PATCH 1/2] final code --- README.md | 113 -------------------------- index.html | 229 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 229 insertions(+), 113 deletions(-) delete mode 100644 README.md create mode 100644 index.html diff --git a/README.md b/README.md deleted file mode 100644 index c507d02c4..000000000 --- a/README.md +++ /dev/null @@ -1,113 +0,0 @@ -# Development Sprint: 2-Hour Challenge - -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. - -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. - -**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.** - -## ๐Ÿ† Judging Criteria - -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. - -## ๐Ÿš€ Submission Guidelines - -Please follow these steps carefully to ensure your project is evaluated: - -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. - -### 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`). - ---- - -## ๐Ÿ› ๏ธ 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. - ---- - -## ๐Ÿ“ก Public APIs - -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. - -### 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. - -### 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. - -### 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. diff --git a/index.html b/index.html new file mode 100644 index 000000000..7d5ba0f69 --- /dev/null +++ b/index.html @@ -0,0 +1,229 @@ + + + + + + Solar System Explorer Pro | Final Sprint + + + + + + + + + +
+ +
+ +
+
+

SOLAR SYSTEM EXPLORER

+

STATUS: INITIALIZING_NEURAL_LINK...

+
+
+

CLOCK

+

00:00:00

+
+
+ +
+ +
+ + + + + + + + + +
+ +
+
+ DECRYPTING_PLANETARY_DATA... +
+ + +
+
+
+ + + + \ No newline at end of file From 32e2dfddbc1aacac31f8b7080904634600c8a2bf Mon Sep 17 00:00:00 2001 From: Nehaaa191 Date: Sat, 4 Apr 2026 17:13:19 +0530 Subject: [PATCH 2/2] final code --- README.md | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 000000000..11bcdfe1e --- /dev/null +++ b/README.md @@ -0,0 +1,69 @@ +# ๐Ÿ›ฐ๏ธ Solar System Explorer + +An immersive, hardware-accelerated 3D exploration interface pulling live telemetry and mission data from NASAโ€™s deep-space archives. + +--- +โšก Core Integration Stack: + +The project was engineered to demonstrate a high-density integration of modern frontend libraries and scientific APIs. + +3D Engine | Three.js (r128): +Orchestrates the procedural starfield (15k points) and hardware-accelerated WebGL geometry for a smooth 60FPS cosmic environment. + +Styling | Tailwind CSS: +Utilized to build a custom Glassmorphism HUD, leveraging backdrop-blur and dynamic borders for a futuristic "Space Terminal" aesthetic. + +Icons | Lucide React: +Provides a consistent, context-aware iconography system used for real-time planetary classification and navigation. + +API | NASA Open API: +Integrated via live asynchronous fetching to pull official mission intelligence, descriptions, and high-definition imagery directly from NASA archives. + +Typography | Google Fonts: +Employs Orbitron for high-impact UI headers and JetBrains Mono for the real-time telemetry and coordinate data feeds. + +## ๐Ÿš€ 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. + +### 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. + +--- + +## ๐Ÿ“Ÿ 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. + +--- + +## ๐Ÿ› ๏ธ 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.* + +--- + +## ๐ŸŽฅ Project Showcase +[Click here to view the Demo Video] + +https://drive.google.com/file/d/1s5n7K85nJYXhDN4pUfikKWtXo8A_bw40/view?usp=sharing + + +--- + +**Built for the devSprint Challenge.**