Frontend case study
A quieter way to explore the universe.
APOD, Reimagined preserves the daily image and expert explanation while making the experience faster to scan, easier to navigate, and more comfortable to use across devices.
Design direction
Lead with wonder, then add context.
Image first
The daily media occupies the opening view. The explanation follows in a restrained reading layout, so context supports the image instead of delaying it.
Progressive viewing
Every image is a direct link to its full-size source. Supporting browsers enhance that link with a keyboard-operated dialog and four useful zoom levels.
Private convenience
Favorites store only entry slugs in the current browser. Sharing uses the device share sheet when available and otherwise copies the canonical entry link.
Intentional video
Third-party players are not loaded with the page. A poster and native button appear first; the approved video host is contacted only after activation.
Performance architecture
Useful before JavaScript arrives.
PHP renders the daily story, archive results, navigation, pagination, metadata, and image links on the server. The browser receives meaningful HTML immediately instead of waiting for a client application to construct the page.
- Responsive WebP derivatives reduce image transfer size.
- The leading image and primary fonts are preloaded.
- Archive images use native lazy loading.
- Fonts and interface assets are self-hosted and versioned.
- Viewer, video, favorite, and sharing scripts load only where needed.
Security and privacy
A deliberately small public surface.
In this build
Application safeguards
- No database, accounts, content-mutation endpoints, analytics, or advertising trackers.
- Known routes and stored slugs are validated before template selection.
- Data-derived text and attributes are escaped before output.
- JSON, application files, utility scripts, hidden files, and directory listings are blocked from public access.
- Video embeds require HTTPS and an explicit NASA, YouTube, or Vimeo host allowlist.
- Clickjacking, MIME sniffing, opener access, referrer leakage, and unnecessary browser permissions are restricted with response headers.
- A nonce-aware CSP, strict script loading, and Trusted Types are enforced. Violation reports retain only the directive and blocked origin in the server security log.
Public launch gate
Rate limiting belongs at the edge
Request throttling is intentionally not implemented with application-level IP files. That would add privacy-sensitive state and remain easier to exhaust during an attack.
The public deployment should apply per-client burst and sustained request limits at its reverse proxy or web server, return 429 Too Many Requests, exclude normal static-asset delivery where appropriate, and log only enough information to tune false positives. Those rules must be load-tested before this case study describes rate limiting as active.
Inclusive interaction
Native controls and resilient paths.
Navigation, actions, disclosures, and dialogs use native elements. The essential reading experience works without JavaScript; scripts add zoom, video activation, favorites, and sharing without replacing the underlying content.
- Visible focus indicators and 44-pixel minimum action targets.
- Keyboard zoom shortcuts and focus restoration through the native dialog.
- Live status announcements for favorite and sharing results.
- Reduced-motion and forced-colors accommodations.
- Decorative archive thumbnails use empty alt text while primary media retains its title.