Solar System — SvelteKit Project

An interactive Solar System page that visualizes the planets (Sun + 8) and shows daily rotating facts for any selected celestial body. Facts are fetched from a custom Planet API via a local SvelteKit proxy to avoid CORS and maintain backend flexibility.

Core Features

• Interactive Solar System visualization with animated planets
• Daily rotating facts for Sun + 8 planets based on current date
• Clickable planet selection with smooth UI updates
• Server-side rendering for fast initial page loads
• Client-side dynamic fact fetching and display
• Responsive design for desktop and mobile devices

Architecture

• Frontend: SvelteKit + TypeScript + CSS Animations
• Backend API: SvelteKit API Routes (planet-api repository)
• Integration: Local SvelteKit proxy (/api/planet-fact) to avoid CORS
• Deployment: Frontend on Vercel, API on Vercel
• Configuration: Environment variables for API endpoint swapping

How It Works

• 1. Initial Load: User visits /projects/solarsystem, server loads default Earth fact via proxy
• 2. Planet Selection: User clicks planet or dropdown to select celestial body
• 3. Fact Fetch: Client calls /api/planet-fact?planet=<name> proxy endpoint
• 4. API Forward: Proxy forwards to PLANET_API_BASE environment variable
• 5. Daily Rotation: API returns fact based on current day (EST timezone)
• 6. UI Update: Fact card updates with new content and planet information