ABOUT THIS SITE

SynaptechLabs is a real-time data visualization platform showcasing live feeds from NASA, USGS, open-notify, and CoinGecko APIs. Built with Next.js, TypeScript, PostgreSQL, and Three.js, this site demonstrates full-stack development with interactive data visualization and continuous background data collection.

LIVE DATA FEEDS

ISS Tracker: Real-time International Space Station position updates (5-second polling) with interactive orbit visualization, current velocity, altitude, and live astronaut roster displayed via open-notify API.

Earthquake Feed: 24-hour USGS earthquake data with magnitude-color-coded global epicenter map, detailed event information including depth and location, updated every 60 seconds.

Space Data Feed: NASA Astronomy Picture of the Day (APOD) combined with near-Earth asteroid tracking including orbital distance, approach dates, velocity, and hazard status assessment.

Crypto Prices: Live BTC and ETH pricing from CoinGecko with 24-hour change percentages, market capitalization, and ASCII sparkline charts showing price history (30-second updates).

TECHNICAL ARCHITECTURE

Frontend: Next.js 16 with TypeScript, React hooks for state management, inline CSS styling with 1970s retro aesthetic (IBM Plex Mono monospace, cream background, green terminal text).

Content Management: SGML-based documentation system with custom parser and DTD validation. All documentation content is stored as SGML files and processed through a TypeScript parser that validates against documentation.dtd, ensuring structural integrity and consistent content organization.

Visualization: Three.js 3D orbital plot with automatic WebGL fallback to interactive SVG when GPU acceleration unavailable. Includes OrbitControls, CSS2D text labels, and hazard-based color coding.

Backend: Node.js background tracker scripts running continuous polling intervals for all data sources, with error handling and graceful fallbacks.

Database: PostgreSQL with optimized schemas for ISS positions, earthquake events, space data (APOD + asteroids), and cryptocurrency prices. Indexes on timestamp and categorical columns for fast queries.

KEY FEATURES

Real-Time Updates: Multiple polling intervals (5s for ISS, 60s for earthquakes, 30s for crypto, 6h for space data) keeping all feeds current without page refresh.

Status Indicators: Live LOADING/LIVE/ERROR badges on all feeds with color-coded status and last-update timestamps.

Error Handling: Comprehensive try-catch blocks, graceful API failure fallbacks, WebGL error recovery with automatic 2D rendering.

Responsive Design: Full-page width SVG/3D visualizations, responsive grid layouts for multi-column displays, monospace typography for consistent retro aesthetic.

API INTEGRATIONS

open-notify.org: ISS position (latitude/longitude), velocity, altitude, astronaut query API (no auth required).

USGS GeoJSON: Real-time earthquake feed with magnitude, location, depth, and temporal data.

NASA APIs: Astronomy Picture of the Day (APOD) with metadata, near-Earth object tracking with orbital mechanics data.

CoinGecko API: Cryptocurrency market data (price, market cap, 24h change) with free tier access and User-Agent support.

DEVELOPMENT STACK

Runtime: Node.js 20+
Framework: Next.js 16.1.6 with App Router
Language: TypeScript 5
3D Graphics: Three.js r182 with OrbitControls
Database: PostgreSQL 12+
Key Dependencies: pg (PostgreSQL client), dotenv (environment config)
Styling: Inline CSS with retro color palette (#f5f1de, #00ff44, #1a1a1a, #333)

DOCUMENTATION & CONTENT MANAGEMENT

The site's documentation system is built on SGML (Standard Generalized Markup Language), a powerful, semantically-rich markup language that predates XML. SGML is the core content management architecture:

SGML Parser: Custom TypeScript parser (`sgml.ts`) with full DTD validation that processes all documentation content files stored in `/content/sgml/`. The parser validates document structure, extracts semantic elements (sections, headings, code blocks, lists), and converts SGML to JSON representation for rendering.

DTD Validation: All SGML documents are validated against `/content/dtd/documentation.dtd` which defines permissible element hierarchies, required elements, allowed attributes, and semantic constraints. This ensures content consistency and structural integrity.