This WordPress plugin is a fully custom-built REST API integration designed to showcase my ability to create a secure, end-to-end connection with the Google Analytics Data API and deliver real-time (and historical usage) insights directly within a web page.

Key Features:

• • Secure REST Endpoint
    Implements a custom /wp-json/portfolio-analytics/v1/stats route that authenticates via a service-account JSON key and the Google API Client, ensuring read-only access to Analytics data.
  • GA4 Data Fetching
    Retrieves real-time(ish) active user counts, 7-day breakdowns by device category, browser type, new vs. returning users, and channel grouping, plus location-based session data (continent, country, region, city).
  • Clean JSON Formatting
    Parses Google Analytics responses into a streamlined JSON payload—abstracting away raw API complexity and delivering only the fields needed for front-end display.
  • Modular, Extensible Architecture
    Encapsulates data-fetching logic, shortcodes, and styling within a single plugin, making it easy to extend with new dimensions, metrics, or visualizations (charts, tables, maps) without touching theme code.
  • Script & Style Enqueueing
    All JS and CSS assets are enqueued via wp_enqueue_scripts, so there’s no inline styling or blocking scripts, and it plays nicely with other plugins/themes.
  • Transient-Based Caching
    Uses WordPress transients to cache Analytics responses for a configurable interval, dramatically reducing API calls and speeding up page loads.
  • Leaflet Map Integration
    Rendered a geolocation map showing user locations on page load and refreshed it cleanly on demand—without duplicate initializations or endless loops.
  • Shortcodes & Widgets
    1. [realtime_stats] – Active user count.
    2. [historical_stats] – Flexible panels for device, browser, new/returning, channel breakdowns, and a top-10 location table with cache-busting refresh.
    3. [user_location_map] – A standalone geolocation map using the Google Maps JS API

    All widgets employ CSS Grid and Flexbox to maintain equal-height panels and gracefully wrap on smaller screens, ensuring optimal readability on any device.