WeatherXM Pro — Hyperlocal Weather Platform

WeatherXM Pro is a B2B/B2C platform and dashboard for hyperlocal weather data, backed by a blockchain-integrated hardware network of weather stations. I joined as the sole frontend engineer, paired with one backend engineer, to build the entire web surface from scratch.

The challenge: no existing frontend, no design system, no CI/CD. The company needed a production-ready SSR web app that could handle interactive maps with thousands of station markers, real-time weather data, time-series dashboards, and a full Stripe billing flow — shipped fast enough to hit a market window.

The result: empty repo to first production release in 4 months. Then 14 months of continuous feature delivery, owning every technical decision on the web surface.

Set up the entire technical foundation: strict TypeScript with vue-tsc enforced as a build gate, ESLint flat config, Prettier with Tailwind sort plugin, Pinia with persisted state, TanStack Vue Query with SSR dehydrate/hydrate, Docker multi-stage images, and GitHub Actions pipelines covering PR checks, dev deploys, main pushes, and release cuts.

This wasn't just scaffolding. Every choice was made to keep a two-person team moving fast without accumulating debt: type safety caught bugs before review, SSR hydration kept first-paint fast, and the CI pipeline meant every merge to main was deployable.

Designed and implemented a multi-tier auth flow on top of Clerk: a 5-state machine orchestrating Clerk session tokens, organization-scoped tokens, and a backend-issued portal API key. Built an axios interceptor that transparently refreshes the org token on 401 and retries the failing request. Paired client-side and SSR middleware guards keep redirects correct on both hard navigation and SPA routing.

The complexity here came from the multi-tenant model. Users belong to organizations, organizations have different subscription tiers, and the backend API expects a different token shape than Clerk issues natively. The state machine made this predictable instead of brittle.

Built interactive station discovery on Mapbox GL with Uber's H3 hexagonal cell indexing (h3-js): search, cell-level device lookup, forecast overlays, and 429 rate-limit-aware data fetching.

The map needed to render thousands of station markers without choking the browser. H3 hex cells solved this by clustering at zoom levels and resolving to individual stations on zoom-in, while the rate-limit-aware fetching layer kept the backend from getting hammered during fast pan/zoom interactions.

Shipped forecast and data-quality dashboards with ECharts: time-series views, daily/hourly breakdowns, FACT and QoD (Quality of Data) scoring. Users can drill from a 7-day overview down to hourly readings for any metric.

Delivered the full subscription lifecycle end-to-end: plan comparison UI, Stripe-backed checkout redirect, plan upgrade and cancellation flows, usage metering, billing profile, and invoicing surfaces.

This was a complete Stripe integration, not a drop-in widget. Plan changes trigger proration calculations, downgrades defer to end-of-cycle, and the billing profile surfaces invoice history and payment method management.

Built the design system from scratch: custom Tailwind palette, 10-tier breakpoint scale, Vuetify 3 dark theme layered over Tailwind utilities, MDI icon set. Created a responsive app shell with separate mobile-overlay and desktop-collapsible-with-hover sidebar modes.

Instrumented the platform with Mixpanel via a TypeScript-enforced event taxonomy covering page views and user actions. The typed event layer meant new events couldn't ship without matching the taxonomy, keeping analytics data clean from day one.

Owned technical decisions across the entire web surface: library choices, release cadence, code-review standards, and the cross-team API contract with the backend engineer. Operated as the single point of accountability for everything the user sees in the browser.