An interactive, high-performance web application exploring exoplanets, 3D celestial bodies, space trivia, and Spider-Verse news. Built for the Web Sprint Hackathon.
🌐 Live Demo: web-sprint-liard.vercel.app
Here is how our project satisfies each core evaluation criteria of the competition:
| # | Evaluation Metric | Website Feature & Implementation Justification |
|---|---|---|
| 1 | UI / Visual Replication Accuracy | The application accurately reproduces the exact typography, deep-space dark palette (#0f172a, #020617), glowing neon accents, card spacing, and component alignments. Starfield backgrounds, meteor tails, and glassmorphism cards seamlessly match reference specifications down to exact border radiuses and gradients. |
| 2 | Responsiveness Across Devices | Built using Tailwind CSS v4 responsive utilities with custom mobile-first breakpoints (sm, md, lg, xl). Fully responsive across mobile smartphones, tablets, laptops, and 4K desktop viewports. The 3D planet globe canvas dynamically resizes and supports touch-drag rotation and pinch-to-zoom on touchscreens. |
| 3 | Code Quality & Project Structure | Architected with a clean, modular React 19 component structure (src/components/, src/lib/, src/assets/). Strictly separates data stores (planets.js, trivia.js, audio.js) from UI view components. Passes all oxlint static code analysis checks with zero syntax errors. |
| 4 | Functionality & Interactivity | Fully working single-page view router with zero dead-end screens or broken links. Every page features top navigation bars, back-to-home triggers, interactive 3D WebGL sphere viewers with OrbitControls, interactive trivia cards, JSON asset exporter, and an audio engine for playing the Spider-Man theme background music via the bottom THWIP: AUDIO ON/OFF toggle. |
| 5 | Creativity & Spider-Man Theme Integration | Thoughtfully blends cosmic exploration with iconic Spider-Man lore. Features interactive web-particle canvas overlay FX, a custom web-slinger cursor, a Spider-Sense activation badge, transparent space planet graphics, and an integrated Spider-Man theme audio soundtrack player. |
| 6 | Page & Section Coverage | Replicates 100% of all specified site sections including the Akashganga Hero Landing Portal, Exoplanet Gallery & Carousel, Interactive 3D Planet Globe Inspection, Space Trivia Challenge Grid, News/Facts Subscription Portal, and Portal Authentication (Sign In). |
| 7 | Animations & Micro-interactions | Fluid page transitions powered by Framer Motion (AnimatePresence), hover scaling micro-interactions on cards and buttons, animated meteor shower SVG tails, glowing ambient drop-shadows on planets, and real-time audio wave pulse animations. |
Here are previews of the Exoplanet Explorer and 3D Interactive Planet Viewer sections:
| 🪐 Exoplanet Gallery & Carousel | 🌐 Interactive 3D Planet Viewer |
|---|---|
 |
 |
| Browse exoplanets with distance & orbital statistics | Rotate & zoom 3D globe with live habitability specs |
- 🌌 Akashganga Landing Portal: Immersive space-themed dashboard with animated constellations, satellite dishes, telescopes, and meteor visual effects.
- 🪐 Exoplanet Gallery Carousel: Interactive paginated grid displaying distant worlds (WASP-17b, Kepler-22b, Proxima Centauri b, K2-18b, 55 Cancri e, LHS 1140b, LP 791-18c/d) with distance stats and habitability indicators.
- 🔮 Interactive 3D Planet Globe Viewer: Powered by Three.js and React Three Fiber. Click into any planet for full 3D interactive controls (drag to rotate, scroll to zoom) rendered against realistic starfield backdrops.
- 📊 Detailed Specs Sidebar: Slide-in glassmorphism panel displaying host star classification, planet mass, orbital distribution, equilibrium temperature, and asset download capabilities.
- 🚀 Space Trivia Hub: Interactive question-and-answer cards paired with custom astronaut graphics to test your cosmic knowledge.
- 🕸️ Spider-Verse & Latest News: News portal with transparent theme-matched planetary graphics, Spider-Sense feedback, and social links.
- 🎵 Spider-Man Theme Background Music: Toggle background audio on/off directly via the bottom-left
THWIP: AUDIO ON/OFFbutton featuring soundwave pulse animations and audio playback across all views. - 🕹️ Custom Spider-Sense FX: Interactive custom cursor, web particle overlay effects, and audio-visual toggle triggers (
Spider-Sense Engaged,Thwip: ON). - 🧭 Universal Navigation: Top header navbar with quick back buttons (
Back to Home) and slide-out navigation drawer accessible from every section.
- Framework & Build Tool: Vite + React 19
- 3D Graphics & Rendering: Three.js + @react-three/fiber + @react-three/drei
- Styling & UI: Tailwind CSS v4 + PostCSS + CSS Modules + Custom Starfield Animations
- Audio Engine: Web Audio API + HTML5 Audio Spider-Man Theme Engine
- Animations: Framer Motion
- Icons: Lucide React
- Linting & Code Quality: Oxlint
spider-man/
├── public/
│ ├── planet_1.png # Exoplanet carousel gallery screenshot
│ ├── planet_2.png # 3D Interactive planet detail screenshot
│ ├── spiderman-theme.mp3 # Spider-Man theme background audio track
│ ├── spiderman-theme.wav # High-definition theme audio PCM source
│ ├── planets/ # High-res transparent PNG planet assets
│ │ ├── 55-cancri-e.png
│ │ ├── k2-18b.png
│ │ ├── kepler-22b.png
│ │ ├── lhs-1140b.png
│ │ ├── lp-791-18c.png
│ │ ├── lp-791-18d.png
│ │ ├── proxima-centauri-b.png
│ │ └── wasp-17b.png
│ ├── textures/ # 3D texture maps for Three.js sphere rendering
│ ├── images/ # Astronaut & space suit illustration assets
│ ├── cricut-spiderman.png # Spider-Man graphic assets
│ ├── cricut-spiderman.svg
│ ├── spiderman.jpg
│ └── favicon.svg
├── src/
│ ├── assets/ # Branding logo & vector assets
│ ├── components/ # UI Components & Page Views
│ │ ├── Home.jsx # Hero Landing Dashboard
│ │ ├── Exoplanets.jsx # Exoplanet Gallery Controller
│ │ ├── Facts.jsx # News & Spider-Verse Facts Page
│ │ ├── SignIn.jsx # Portal Authentication Page
│ │ ├── Sidebar.jsx # Global Navigation Drawer
│ │ ├── FixedToggles.jsx # Spider-Sense & Audio FX Controls
│ │ ├── CustomCursor.jsx # Interactive Spider-Cursor
│ │ ├── WebEffect.jsx # Web Particle FX Canvas
│ │ ├── SvgOverlay.jsx # SVG Constellation Overlay
│ │ ├── exoplanets/ # 3D Planet Viewer Components
│ │ │ ├── planet-card.jsx
│ │ │ ├── planet-carousel.jsx
│ │ │ ├── planet-detail.jsx
│ │ │ ├── planet-globe.jsx
│ │ │ └── ui/
│ │ └── trivia/ # Space Trivia Section Components
│ │ ├── explore-trivia.jsx
│ │ ├── explore-trivia.css
│ │ └── trivia-card.jsx
│ ├── lib/ # Data Sources & Audio Engine
│ │ ├── audio.js # Spider-Man Web Audio theme synthesizer & player
│ │ ├── planets.js # Exoplanet catalog data & stats
│ │ ├── trivia.js # Space trivia items data
│ │ └── utils.js # Tailwind class merger helpers
│ ├── App.jsx # Main Routing & View State Handler
│ ├── App.css # Global Component Styles
│ ├── index.css # Tailwind Directives & Starfield FX
│ └── main.jsx # React DOM Entry Point
├── .oxlintrc.json # Linter configuration
├── index.html # HTML Template & Font Links
├── package.json # Dependencies & Scripts
├── postcss.config.js # PostCSS configuration
├── tailwind.config.js # Tailwind CSS configuration
├── vite.config.js # Vite configuration
└── README.md # Project Documentation
- Node.js
v18.xor higher - npm or pnpm or yarn
-
Clone the Repository:
git clone https://github.com/madhavzanwar/Web-Sprint.git cd Web-Sprint -
Install Dependencies:
npm install -
Run Development Server:
npm run devOpen
http://localhost:5173in your browser. -
Lint Code:
npm run lint -
Build for Production:
npm run build -
Preview Production Build:
npm run preview
Distributed under the MIT License for educational and hackathon purposes. Built with ❤️ for Web Sprint.