var Component=(()=>{var re=Object.create;var b=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var le=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),se=(r,e)=>{for(var d in e)b(r,d,{get:e[d],enumerable:!0})},I=(r,e,d,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of oe(e))!de.call(r,s)&&s!==d&&b(r,s,{get:()=>e[s],enumerable:!(c=ie(e,s))||c.enumerable});return r};var ue=(r,e,d)=>(d=r!=null?re(le(r)):{},I(e||!r||!r.__esModule?b(d,"default",{value:r,enumerable:!0}):d,r)),me=r=>I(b({},"__esModule",{value:!0}),r);var P=y((_e,C)=>{C.exports=React});var O=y(N=>{"use strict";(function(){function r(a){if(a==null)return null;if(typeof a=="function")return a.$$typeof===J?null:a.displayName||a.name||null;if(typeof a=="string")return a;switch(a){case h:return"Fragment";case W:return"Profiler";case V:return"StrictMode";case X:return"Suspense";case K:return"SuspenseList";case Z:return"Activity"}if(typeof a=="object")switch(typeof a.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),a.$$typeof){case L:return"Portal";case G:return a.displayName||"Context";case $:return(a._context.displayName||"Context")+".Consumer";case H:var t=a.render;return a=a.displayName,a||(a=t.displayName||t.name||"",a=a!==""?"ForwardRef("+a+")":"ForwardRef"),a;case Q:return t=a.displayName||null,t!==null?t:r(a.type)||"Memo";case p:t=a._payload,a=a._init;try{return r(a(t))}catch{}}return null}function e(a){return""+a}function d(a){try{e(a);var t=!1}catch{t=!0}if(t){t=console;var i=t.error,l=typeof Symbol=="function"&&Symbol.toStringTag&&a[Symbol.toStringTag]||a.constructor.name||"Object";return i.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",l),e(a)}}function c(a){if(a===h)return"<>";if(typeof a=="object"&&a!==null&&a.$$typeof===p)return"<...>";try{var t=r(a);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function s(){var a=T.A;return a===null?null:a.getOwner()}function x(){return Error("react-stack-top-frame")}function z(a){if(S.call(a,"key")){var t=Object.getOwnPropertyDescriptor(a,"key").get;if(t&&t.isReactWarning)return!1}return a.key!==void 0}function M(a,t){function i(){R||(R=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}i.isReactWarning=!0,Object.defineProperty(a,"key",{get:i,configurable:!0})}function U(){var a=r(this.type);return A[a]||(A[a]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),a=this.props.ref,a!==void 0?a:null}function B(a,t,i,l,u,_){var o=i.ref;return a={$$typeof:k,type:a,key:t,props:i,_owner:l},(o!==void 0?o:null)!==null?Object.defineProperty(a,"ref",{enumerable:!1,get:U}):Object.defineProperty(a,"ref",{enumerable:!1,value:null}),a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(a,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(a,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:u}),Object.defineProperty(a,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:_}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a}function F(a,t,i,l,u,_){var o=t.children;if(o!==void 0)if(l)if(ee(o)){for(l=0;l React keys must be passed directly to JSX without using spread: let props = %s; <%s key={someKey} {...props} />`,l,o,m,o),j[o+l]=!0)}if(o=null,i!==void 0&&(d(i),o=""+i),z(t)&&(d(t.key),o=""+t.key),"key"in t){i={};for(var g in t)g!=="key"&&(i[g]=t[g])}else i=t;return o&&M(i,typeof a=="function"?a.displayName||a.name||"Unknown":a),B(a,o,i,s(),u,_)}function v(a){w(a)?a._store&&(a._store.validated=1):typeof a=="object"&&a!==null&&a.$$typeof===p&&(a._payload.status==="fulfilled"?w(a._payload.value)&&a._payload.value._store&&(a._payload.value._store.validated=1):a._store&&(a._store.validated=1))}function w(a){return typeof a=="object"&&a!==null&&a.$$typeof===k}var f=P(),k=Symbol.for("react.transitional.element"),L=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),V=Symbol.for("react.strict_mode"),W=Symbol.for("react.profiler"),$=Symbol.for("react.consumer"),G=Symbol.for("react.context"),H=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),K=Symbol.for("react.suspense_list"),Q=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),Z=Symbol.for("react.activity"),J=Symbol.for("react.client.reference"),T=f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,S=Object.prototype.hasOwnProperty,ee=Array.isArray,E=console.createTask?console.createTask:function(){return null};f={react_stack_bottom_frame:function(a){return a()}};var R,A={},ne=f.react_stack_bottom_frame.bind(f,x)(),ae=E(c(x)),j={};N.Fragment=h,N.jsxDEV=function(a,t,i,l){var u=1e4>T.recentlyCreatedOwnerStacks++;return F(a,t,i,l,u?Error("react-stack-top-frame"):ne,u?E(c(a)):ae)}})()});var Y=y((ye,D)=>{"use strict";D.exports=O()});var he={};se(he,{default:()=>be,frontmatter:()=>ce});var n=ue(Y()),ce={title:"Building Yieldr: Speed, Consistency, and Data Users Can Trust",date:"2026-06-26",excerpt:"A look under the hood at Yieldr, a dividend-investing dashboard. How I kept it fast despite hundreds of market-data requests and heavy per-page math, kept every number consistent across the app, engineered a rigorous data layer so every figure is accurate and dependable, and why Tailwind plus shadcn made the UI a genuine pleasure to build.",tags:["Next.js","React","Performance","Architecture","TypeScript","Tailwind CSS","shadcn/ui","Fintech"]};function q(r){let e=Object.assign({p:"p",a:"a",ul:"ul",li:"li",strong:"strong",code:"code",hr:"hr",h2:"h2",h3:"h3",pre:"pre"},r.components);return(0,n.jsxDEV)(n.Fragment,{children:[(0,n.jsxDEV)(e.p,{children:["It has been a while since I last posted, and the reason is sitting in a monorepo called ",(0,n.jsxDEV)(e.a,{href:"https://yieldrapp.com",children:"Yieldr"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:16,columnNumber:89},this),": a dividend-investing tracking and research app I have been stealth-building with a team of incredibly talented and dedicated investing and design experts. The timing feels right, too, because we are getting ready to launch Yieldr to the world, so there is no better moment to pop the hood and walk through how it is built. It is also the kind of engineering challenge I love: every page pulls live prices, fundamentals, dividend histories, and forward projections for dozens (sometimes hundreds) of symbols, then renders the lot as charts and forecasts. And because it deals in real money drawn from messy real-world financial data, every number has to be right, consistent everywhere, and resilient to endless edge cases."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:16,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:"That combination forced a lot of decisions I think are worth writing down. This post walks through four of them: how I'm making the app fast under heavy load, keeping data consistent across the whole surface area, guaranteeing every number is accurate, and building the UI with Tailwind and shadcn without losing my mind."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:18,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["First, a quick map of the stack, since these names recur throughout. Yieldr is a ",(0,n.jsxDEV)(e.a,{href:"https://nextjs.org",children:"Next.js"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:20,columnNumber:82},this)," app (App Router, React Server Components) written in TypeScript and deployed on ",(0,n.jsxDEV)(e.a,{href:"https://vercel.com",children:"Vercel"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:20,columnNumber:192},this),", built as a pnpm monorepo so the heavy logic lives in shared packages instead of the UI (a setup that, not by accident, makes the native mobile app we are building next far less daunting):"]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:20,columnNumber:1},this),` `,(0,n.jsxDEV)(e.ul,{children:[` `,(0,n.jsxDEV)(e.li,{children:[(0,n.jsxDEV)(e.strong,{children:"Database and auth:"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:22,columnNumber:3},this)," ",(0,n.jsxDEV)(e.a,{href:"https://supabase.com",children:"Supabase"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:22,columnNumber:26},this)," (Postgres), with TypeScript types generated directly from the schema."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:22,columnNumber:1},this),` `,(0,n.jsxDEV)(e.li,{children:[(0,n.jsxDEV)(e.strong,{children:"Client data and state:"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:23,columnNumber:3},this)," ",(0,n.jsxDEV)(e.a,{href:"https://tanstack.com/query",children:"TanStack Query"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:23,columnNumber:30},this)," for fetching and caching server state, and ",(0,n.jsxDEV)(e.a,{href:"https://zustand.docs.pmnd.rs/",children:"Zustand"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:23,columnNumber:118},this)," for the local UI state that does not belong to the server."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:23,columnNumber:1},this),` `,(0,n.jsxDEV)(e.li,{children:[(0,n.jsxDEV)(e.strong,{children:"Caching:"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:24,columnNumber:3},this)," a Redis layer in front of external data, plus an in-process memory cache for the hottest reads."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:24,columnNumber:1},this),` `,(0,n.jsxDEV)(e.li,{children:[(0,n.jsxDEV)(e.strong,{children:"Market data and brokerage:"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:25,columnNumber:3},this)," various third-party market data providers for quotes, fundamentals, and dividend history, and ",(0,n.jsxDEV)(e.a,{href:"https://snaptrade.com",children:"SnapTrade"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:25,columnNumber:128},this)," for linking real brokerage accounts."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:25,columnNumber:1},this),` `,(0,n.jsxDEV)(e.li,{children:[(0,n.jsxDEV)(e.strong,{children:"Shared logic:"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:26,columnNumber:3},this)," a framework-agnostic ",(0,n.jsxDEV)(e.code,{children:"@yieldr/domain"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:26,columnNumber:42},this)," package that owns every financial calculation."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:26,columnNumber:1},this),` `,(0,n.jsxDEV)(e.li,{children:[(0,n.jsxDEV)(e.strong,{children:"UI:"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:27,columnNumber:3},this)," ",(0,n.jsxDEV)(e.a,{href:"https://tailwindcss.com",children:"Tailwind CSS"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:27,columnNumber:11},this)," v4 with ",(0,n.jsxDEV)(e.a,{href:"https://ui.shadcn.com",children:"shadcn/ui"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:27,columnNumber:59},this),", and ",(0,n.jsxDEV)(e.a,{href:"https://www.chartjs.org",children:"Chart.js"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:27,columnNumber:99},this)," for the dashboard charts."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:27,columnNumber:1},this),` `]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:22,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:"With that map in hand, let's get into it."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:29,columnNumber:1},this),` `,(0,n.jsxDEV)(e.hr,{},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:31,columnNumber:1},this),` `,(0,n.jsxDEV)(e.h2,{children:"1. Fast, Despite Everything"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:33,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:"A dividend dashboard is a performance trap. The naive version makes one API call per symbol per metric, recalculates the same totals in five different components, and renders every chart on first paint. Open a portfolio with 40 holdings and you have fired several hundred requests before the user sees anything. The way out is not a single trick: it is a layered architecture where each layer removes work from the one above it."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:35,columnNumber:1},this),` `,(0,n.jsxDEV)(e.h3,{children:"Batch first, always"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:37,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["The single biggest win was refusing to make per-symbol requests. Our market data provider's API accepts comma-separated symbols on many endpoints, so I lean on that everywhere. ",(0,n.jsxDEV)(e.code,{children:"getBatchQuoteShort"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:39,columnNumber:178},this)," chunks symbols by total character length to stay under URL limits and fires one request per chunk instead of one per symbol:"]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:39,columnNumber:1},this),` `,(0,n.jsxDEV)(e.pre,{children:(0,n.jsxDEV)(e.code,{className:"language-ts",children:`export async function getBatchQuoteShort(symbols: string[]) { const syms = [...new Set(symbols.map(standardizeSymbol).filter(Boolean))] const chunks = chunkByCharLength(syms, SYMBOL_CHARS_BUDGET) const results = await Promise.all( chunks.map((chunk) => { const key = \`batch-quote-short:\${chunk.slice().sort().join(',')}\` return cached(key, 5 * 60, () => providerGet('/batch-quote-short', { symbols: chunk.join(',') }), ) }), ) return results.flat() } `},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:41,columnNumber:1},this)},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:41,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["A portfolio of 600 symbols collapses from 600 requests to roughly 5 to 10. The detail page fans out the same way: instead of one endpoint per metric, the stock-analyzer route fires a dozen calls in parallel, each wrapped in its own ",(0,n.jsxDEV)(e.code,{children:".catch()"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:58,columnNumber:233},this)," so one slow or unavailable endpoint degrades a single metric, never the whole page."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:58,columnNumber:1},this),` `,(0,n.jsxDEV)(e.h3,{children:"Cache in layers, then precompute the rest"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:60,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["Caching is not one thing here. An in-process memory cache is checked first (zero network latency), backed by Redis for durability across requests and deploys, with React's ",(0,n.jsxDEV)(e.code,{children:"cache()"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:62,columnNumber:173},this)," deduplicating calls within a single render. The TTLs are tuned to how fast each thing actually changes: live quotes for 5 minutes, company fundamentals (which barely move) for 24 hours. Matching cache lifetime to data volatility quietly removes thousands of requests a day."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:62,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:"For anything too heavy to compute on request, I precompute. Yieldr caches multiple financial metric quality scores of 600+ symbols, and each score needs seven endpoints from the market data provider. Doing that live would be absurd, so a nightly cron job does it in off-peak hours, walking symbols through a concurrency limiter so I stay under the provider rate limits, and writes each result straight into Redis and the database. By the time a user opens the app, the hard work is already done and sitting in cache."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:64,columnNumber:1},this),` `,(0,n.jsxDEV)(e.h3,{children:"Render the shell, defer the rest"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:66,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["The last layer is about first paint. The rule I follow: get a meaningful shell and most obvious data on screen first, then stream and lazy-load everything heavy or secondary. On the server, the dashboard layout prefetches the critical queries, dehydrates the React Query cache, and hands it to the client through a ",(0,n.jsxDEV)(e.code,{children:"HydrationBoundary"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:68,columnNumber:316},this),", so there is no client-side fetch waterfall on load. Heavy charts come in through ",(0,n.jsxDEV)(e.code,{children:"next/dynamic"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:68,columnNumber:418},this)," with skeletons and ",(0,n.jsxDEV)(e.code,{children:"ssr: false"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:68,columnNumber:452},this),", and charts behind tabs do not even mount until their tab is activated."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:68,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["My favorite example of deferring the heavy thing is a ",(0,n.jsxDEV)(e.code,{children:""},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:70,columnNumber:55},this)," boundary around the movers grid on the stock analyzer. The comment I left in the code says it best:"]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:70,columnNumber:1},this),` `,(0,n.jsxDEV)(e.pre,{children:(0,n.jsxDEV)(e.code,{className:"language-ts",children:`/* * Suspense lets the RSC stream respond immediately without waiting for * fetchMovers() to complete. Without this, a hover-triggered prefetch * holds an open HTTP connection for the full duration of the market-data * batch quote + profile lookups (~10-20s), exhausting the browser's per-host * connection pool and freezing the page. */ `},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:72,columnNumber:1},this)},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:72,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["That one was learned the hard way: a hover prefetch was holding a connection open for the entire market-data batch call, and a handful of those exhausted the browser's sockets and froze the page. Streaming the slow part behind Suspense fixed it completely. ",(0,n.jsxDEV)(e.strong,{children:"Architecture is not an abstract virtue here. It is the difference between a page that paints in 200ms and one that hangs for twenty seconds."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:82,columnNumber:258},this)]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:82,columnNumber:1},this),` `,(0,n.jsxDEV)(e.hr,{},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:84,columnNumber:1},this),` `,(0,n.jsxDEV)(e.h2,{children:"2. One Number, Everywhere"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:86,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:'Performance gets the attention, but the thing that keeps me up at night with a financial app is consistency. If the dividend yield on the summary card disagrees with the yield in the table, which is wrong? The honest answer in most apps is "both, slightly," because the number is computed in three different places with three subtly different formulas.'},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:88,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["I designed Yieldr so that can't happen. Every financial calculation (yield, cost basis, CAGR, dividend growth streaks, portfolio aggregations) lives in one place: a framework-agnostic ",(0,n.jsxDEV)(e.code,{children:"@yieldr/domain"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:90,columnNumber:185},this)," package full of pure functions."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:90,columnNumber:1},this),` `,(0,n.jsxDEV)(e.pre,{children:(0,n.jsxDEV)(e.code,{className:"language-ts",children:`export function forwardDividendYield( forwardDividendPerShare: number, currentPrice: number, ): number | null { if (currentPrice <= 0) return null if (forwardDividendPerShare < 0) return null return forwardDividendPerShare / currentPrice } `},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:92,columnNumber:1},this)},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:92,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["No component does its own math. If a formula is wrong, it is wrong in exactly one file, and fixing it fixes the entire app at once. One layer up, a single ",(0,n.jsxDEV)(e.code,{children:"DashboardMetricsContext"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:103,columnNumber:156},this)," runs those functions once inside a memo and hands the result to every summary card, position table, and chart. They are all reading the same source, not recomputing. That is the whole game: ",(0,n.jsxDEV)(e.strong,{children:"derive once, display many times."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:103,columnNumber:372},this)]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:103,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["The same discipline settles conflicts. When a symbol is held both manually and through a linked brokerage, one function decides precedence: the provider price is the baseline, and live brokerage values from SnapTrade override it for linked accounts. The types are a single source of truth too (generated directly from the Supabase schema), so a ",(0,n.jsxDEV)(e.code,{children:"Position"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:105,columnNumber:346},this)," means the same thing whether it was entered by hand or synthesized from a brokerage holding. And the database is the last line of defense, with check constraints that keep shares and cost basis from ever going negative. Zod validates every payload at the API boundary, the database guards itself, and pure functions guarantee the math: the same discipline applied at every layer the data passes through."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:105,columnNumber:1},this),` `,(0,n.jsxDEV)(e.hr,{},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:107,columnNumber:1},this),` `,(0,n.jsxDEV)(e.h2,{children:"3. Accuracy Users Can Rely On"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:109,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:"It goes without saying that accuracy in investment metrics is key. The entire value of a dividend dashboard is that you can act on what it tells you, so a large share of Yieldr's engineering goes toward one promise: every figure you see has been normalized, validated, and cross-checked before it ever reaches the screen."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:111,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["Real-world financial data is genuinely messy (one look at ",(0,n.jsxDEV)(e.a,{href:"https://www.sec.gov/Archives/edgar/data/1065088/000120677420001423/R1.htm",children:"the time eBay told the SEC its public float was $31 quintillion"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:113,columnNumber:59},this),' and you will learn that "standardized" is a very generous word), and that has little to do with any one provider. Corporate actions, class shares, special distributions, market holidays, and inconsistent formatting are simply facts of the domain. The difference between a dashboard you can trust and one you cannot is whether someone did the unglamorous work of handling every one of those cases. Yieldr does.']},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:113,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:"It starts with normalizing every record before it is used. Date and number formats vary across the financial world, so nothing reaches a calculation until it has been coerced and validated. A dividend with no usable payment date or a non-positive amount is skipped outright, so it can never distort a projection:"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:115,columnNumber:1},this),` `,(0,n.jsxDEV)(e.pre,{children:(0,n.jsxDEV)(e.code,{className:"language-ts",children:`// normalize the payment date and amount before trusting either one const dateStr = (cal.paymentDate || null) ?? (cal.date || null) if (!dateStr) continue const perShare = cal.adjDividend ?? cal.dividend ?? 0 if (perShare <= 0) continue `},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:117,columnNumber:1},this)},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:117,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["From there it is layers of domain-specific care. One-time special distributions are detected with two independent signals and excluded from run-rate math, so a forward yield reflects a company's true recurring payout rather than a one-off spike. Class shares and exchange suffixes (",(0,n.jsxDEV)(e.code,{children:"BRK/B"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:125,columnNumber:283},this),", ",(0,n.jsxDEV)(e.code,{children:"BRK-B"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:125,columnNumber:292},this),`, and friends) are collapsed to a single canonical symbol so the same holding stays consistent everywhere. Even "no data for this symbol" is cached as a valid answer, so the app never re-hammers a source for something that isn't there.`]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:125,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:"Two things keep quality high over time. The first is a correction layer: if we spot a single record that looks off, we can override it over the raw feed before anything downstream sees it, with no redeploy and no pipeline fork, just an immediate fix that propagates through the cache to every page. Data quality becomes something we can act on in minutes. The second is refusing to trust a single source for the numbers that matter most: flagship metrics like dividend-streak history are independently reconciled against established, authoritative baselines."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:127,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["The thread through all of it: ",(0,n.jsxDEV)(e.strong,{children:"a clean, validated, multi-source data layer is what turns raw market feeds into numbers you can confidently act on."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:129,columnNumber:31},this)," The result is a dashboard whose numbers you do not have to second-guess."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:129,columnNumber:1},this),` `,(0,n.jsxDEV)(e.hr,{},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:131,columnNumber:1},this),` `,(0,n.jsxDEV)(e.h2,{children:"4. Tailwind and shadcn: A Dashboard Match Made in Heaven"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:133,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["Tailwind has a love-it-or-hate-it reputation, and I understand the hate: a wall of utility classes in your JSX looks like a mess if you are used to clean, semantic stylesheets. Building a dashboard changed my mind completely, and the thing that changed it was ",(0,n.jsxDEV)(e.a,{href:"https://ui.shadcn.com",children:"shadcn/ui"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:135,columnNumber:261},this),"."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:135,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["The key insight is that shadcn is not a component library you install and import. It is components you own. The CLI drops the source into your ",(0,n.jsxDEV)(e.code,{children:"components/ui"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:137,columnNumber:144},this),' folder, built on Radix primitives for accessibility, styled with Tailwind you are free to edit. Yieldr has 36 of these, and every one is mine to bend. The "wall of classes" objection mostly evaporates, because the utilities live inside owned, named, reusable components, with variants declared once via ',(0,n.jsxDEV)(e.code,{children:"class-variance-authority"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:137,columnNumber:463},this)," and a tiny ",(0,n.jsxDEV)(e.code,{children:"cn"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:137,columnNumber:501},this)," helper merging class names so my overrides actually win:"]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:137,columnNumber:1},this),` `,(0,n.jsxDEV)(e.pre,{children:(0,n.jsxDEV)(e.code,{className:"language-ts",children:`import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } `},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:139,columnNumber:1},this)},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:139,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["Theming is where Tailwind v4 really shines. The whole design system is CSS variables in oklch, defined once for light mode and overridden for dark. The one genuinely tricky part was charts: Yieldr uses Chart.js, which draws to a canvas that cannot read CSS variables or parse modern ",(0,n.jsxDEV)(e.code,{children:"oklch()"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:148,columnNumber:284},this)," colors. So how do the charts respect my theme tokens, dark mode included? A small runtime resolver that borrows the canvas's own color parser to do the conversion:"]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:148,columnNumber:1},this),` `,(0,n.jsxDEV)(e.pre,{children:(0,n.jsxDEV)(e.code,{className:"language-ts",children:`// Chart.js can't read CSS vars or parse oklch(), so resolve the token at // runtime and let the canvas normalize it into a hex string for us. const value = getComputedStyle(document.documentElement).getPropertyValue(varName) ctx.fillStyle = value // canvas converts oklch() to a hex string const resolved = ctx.fillStyle // safe to hand back to Chart.js `},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:150,columnNumber:1},this)},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:150,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["That little hack means one set of design tokens drives the entire UI, charts included, and flipping to dark mode recolors every gradient and bar without a second palette. I came into this project a Tailwind skeptic and left it a believer, but only because shadcn gave the utilities a place to live. ",(0,n.jsxDEV)(e.strong,{children:"For a dense, component-heavy dashboard, owning your components and theming them with utility-driven design tokens is the most productive frontend setup I have used."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:158,columnNumber:300},this)]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:158,columnNumber:1},this),` `,(0,n.jsxDEV)(e.hr,{},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:160,columnNumber:1},this),` `,(0,n.jsxDEV)(e.h2,{children:"Wrapping Up"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:162,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:"None of these four threads is independent. Batching and caching make it affordable to compute correct numbers on every page; centralizing those calculations makes the numbers consistent; a rigorous, multi-source data layer makes them trustworthy; and a coherent component system lets all of it surface as something people actually want to look at."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:164,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:["If there is a single takeaway, it is that the hard part of a data-heavy app is rarely any one feature. It is the ",(0,n.jsxDEV)(e.strong,{children:"architecture"},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:166,columnNumber:114},this)," underneath: where data is fetched, computed, validated, and corrected. Get those boundaries right and everything above them gets easier. Get them wrong and you will be patching symptoms forever."]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:166,columnNumber:1},this),` `,(0,n.jsxDEV)(e.p,{children:"Yieldr is still growing, and I will write more about specific pieces of it. But this felt like the right place to start: the bones of how it is put together, and the decisions I would happily make again."},void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:168,columnNumber:1},this)]},void 0,!0,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx",lineNumber:1,columnNumber:1},this)}function fe(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsxDEV)(e,Object.assign({},r,{children:(0,n.jsxDEV)(q,r,void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx"},this)}),void 0,!1,{fileName:"/opt/build/repo/blog/_mdx_bundler_entry_point-2c8f2b52-2188-4297-afe5-e6ae00019a2a.mdx"},this):q(r)}var be=fe;return me(he);})(); /*! Bundled license information: react/cjs/react-jsx-dev-runtime.development.js: (** * @license React * react-jsx-dev-runtime.development.js * * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. *) */ ;return Component;