FinZ (Finance Dashboard)
FinZ is a responsive single-page React application designed to help users track their personal finances, visualize expenses, monitor real-time currency exchange rates, and stay updated with the latest in financial news. Built with a focus on performant UI/UX, the application combines robust frontend tooling like React Hook Form and Recharts with secure serverless backends.
The Challenge
I wanted to build a centralized dashboard to track finances, live news, and currency conversions. A major roadblock was handling strict CORS policies and production API blocks (like 426 Upgrade Required errors) when connecting to free-tier external APIs from a cloud deployment.
Technical Approach
FinZ splits the product into clear dashboard concerns: transaction entry, validation, visualization, currency conversion, and market-news retrieval. React Hook Form and Yup keep form state predictable, while Recharts turns stored financial data into readable charts. External API calls are routed through Vercel Serverless Functions so browser clients do not need to expose request details or fight provider-side CORS restrictions. The layout is responsive so the same dashboard remains usable on both desktop and mobile screens.
Outcome
The project turned API reliability into an architecture problem instead of a UI workaround. By moving fragile external requests behind serverless endpoints, FinZ could keep a clean client-side interface while still using free-tier market and currency data. It also strengthened the separation between presentation components and data-fetching utilities, which made the dashboard easier to reason about as more financial widgets were added.
What I Built & Learned
I solved the API rate limits and production blocks by securely proxying requests through Vercel Serverless Functions. I learned to manage complex state with React Hook Form + Yup, which severely reduced re-renders, and I emphasized modular architecture by splitting large dashboard logic into reusable, decoupled components.
