I designed and built Oklos, a production, full-stack web application for a wealth-management advisory firm — engineered end to end in Next.js 16, React 19, and TypeScript on a Supabase/PostgreSQL backend. It pairs a polished client portal (financial assessments, 15+ planning tools, a guided journey, documents, embedded payments, and a direct line to an advisory team) with an internal advisory & admin console for running the entire book of business.

This isn't a mockup — it's a real, production product: live CRM sync, embedded payments, transactional email, error monitoring, and role-based access control enforced from the browser all the way down to the database.

Wealth-management clients track their financial lives across spreadsheets, PDFs, and scattered advisor emails, and firms have no engaging, branded place to bring it together — or to run their operations on top of it. The advisory firm needed two things at once: a client web app polished and gamified enough that members return weekly, and an internal console to manage the whole practice. And it all had to be genuinely production-grade — real integrations, real payments, and security tight enough for financial data.

Personalized dashboard — a Wealth Health Score with trend sparkline, budget-vs-actual, journey progress, a recent-activity heatmap, upcoming meetings, and the member's assigned advisor + success coach. The grid is drag-to-customize and persists per user.

15+ financial planning tools — FI calculator, budgeting, insurance needs, estate planning, risk tolerance, account allocation, milestone tracker, vision/goals, and more. All math runs client-side in real time; inputs and results are debounced-saved to Postgres, and completion feeds the dashboard KPIs. Tools can be archived without deleting the route.

Guided journey — a multi-week program with pillars, milestones, and weekly accountability check-ins.

Server-authoritative gamification — XP, levels, weekly streaks, and 60+ achievement badges. Awards are computed via locked-down RPCs (clients can't grant their own XP), milestones auto-detect from real activity, and a snapshot-diff guard prevents duplicate/no-op events.

Everything else — a document vault (Supabase Storage with RLS), embedded payments with subscription/installment management, a referral program, a notification center, profile editing, and a gated multi-step onboarding flow with a first-run product tour.

Operational dashboard — a client-lifecycle Sankey flow, onboarding funnel, headline KPIs, an upcoming-meetings widget, and a prioritized "action required" feed (past-due payments, stalled onboarding, and more).

Client management — a full roster with status/program/payment filters, per-client detail views, team assignment, program status, and on-demand "resync from CRM" per record.

Operations — user/team management with invites, audit logs, reporting, a webhooks health page (statuspage-style uptime strips), and a database-backed feature-flag admin UI.

Role-scoped views — admins see everything; advisors see only their assigned clients (own ∪ a shared team pool); support staff get read-only access. Admins can impersonate a client ("view as") to debug without writes.

Frontend — Next.js 16 (App Router, Turbopack, proxy middleware), React 19, TypeScript, Tailwind v4, shadcn/ui + Radix, Recharts v3, Framer Motion, Zustand, Zod, and Pino. Server-component layouts handle auth guards; client shells handle interactivity.

Data & auth — Supabase Postgres with row-level security on every table (35+), SECURITY DEFINER helpers to avoid policy recursion, a custom access-token hook that injects role claims into the JWT, and Supabase Auth supporting email/password, Google, Apple, and magic-link.

Services — an Express backend on Railway for CRM sync, webhook ingestion, and background jobs; Upstash Redis for rate limiting; Sentry for client/server/edge monitoring; and Resend for email.

Delivery — Vercel auto-deploy, Railway services, schema managed through versioned SQL migrations, and a custom domain.

CRM (HubSpot) — bidirectional sync over REST v3 + webhooks (60+ subscriptions). A custom-event pipeline streams portal activity back to the CRM (logins, milestones, pillar/onboarding completions, tool completions, referrals, assessment results) and maps contact properties both ways. Outbound writes are gated per-feature by the feature-flag system so they can be ramped safely. Nightly reconciliation was optimized from hundreds of API calls down to a handful via contact-ID caching and a two-pass (modified-since + batched-drift) strategy.

Payments (Spiffy) — signature-verified webhooks (Stripe-pattern HMAC), subscription + installment tracking, an embedded customer portal, a card-processing-fee tolerance helper for "paid in full" logic, and a rollback/"zombie order" filter. Sync quota was cut ~85% with a weekly cron + active-program filtering.

Intake (Typeform) — a prospect assessment form wired to the CRM with dozens of field mappings and a historical backfill of existing profiles.

Email (Resend + React Email) — a library of auth, portal, and admin templates behind a master kill-switch with per-category overrides; auth emails delivered through a Supabase Send Email Hook.

Five-tier RBAC (prospect, client, support, advisor, admin) enforced in three places: middleware, application permission helpers, and Postgres RLS.

Rate-limited auth endpoints (with a fail-closed in-memory fallback), CSRF protection, and scanner-safe invite links routed through a click-through page so email security scanners can't burn one-time tokens.

No secrets in the browser — every API key and third-party call lives server-side.

A custom, Linear-inspired design system (~2,600 lines of tokens/components): an OKLCH purple-pink accent, a near-black neutral, full dark mode, a ⌘K command palette, motion throughout, and a WebGL "grainient" login. Fixed 240px sidebar, 48px header, 1,120px content column, with WCAG-minded contrast and keyboard navigation.

A multi-role end-to-end QA harness (Playwright) exercising client, advisor, support, and admin flows, plus a CI test suite around the feature-flag/write-gate logic.

Oklos is a complete, production-grade full-stack platform — two role-aware portals, 15+ real-time planning tools, gamified engagement, embedded payments, bidirectional CRM sync, and database-level security — built and shipped end to end. It's the clearest proof of what I do: take a complex, multi-role web application from architecture through integrations, security, and design to a polished, production product. If you're looking to build a serious web app or SaaS platform in Next.js, React, and TypeScript, this is the standard I build to. NOTE: This description has been anonymized.