PROJECT OVERVIEW
What was built?
OrbitX brings space exploration to life by consuming live NASA APIs — including Astronomy Picture of the Day (APOD), Mars Rover Photos, Near-Earth Asteroids, and Earth Observatory imagery.
THE CHALLENGE
Problem Statement
Raw NASA API responses return massive uncompressed high-resolution images and unstructured JSON payloads that can cause browser memory spikes if not handled properly.
Engineering Approach & Architecture
Built a Next.js API proxy with image optimization and thumbnail generation, paired with smooth Framer Motion entrance animations.
System Architecture Data Flow
01User Request -> Next.js Edge Server Handler
02External API -> NASA Open Data Endpoints
03Transform Pipeline -> Image Compression & Data Normalization
04UI Stage -> Framer Motion Interactive Cards
Key Engineering Obstacles
Obstacle: Massive 4K Image Assets Impacting Initial Load
Utilized Next.js Image Optimization to serve responsive WebP formats based on client screen size.
Technologies & Tools Used
Core libraries, frameworks, and deployment services.
Next.jsNASA APITailwind CSSREST APIFramer Motion