Personal-Finance Web Application (React + Firebase)
A personal-finance / budgeting product
Overview
A consumer personal-finance web application built with React and a Firebase backend, providing a polished, form-rich UI for managing finances. It pairs a modern component system (Mantine) with realtime Firestore data and integrated scheduling.
The Challenge
Personal-finance products live or die on UX: users need clear, fast, trustworthy interfaces for entering and reviewing financial data, plus reliable realtime sync so balances and records are always current. The app also needed to bridge users to human advisors via scheduling, all within a responsive single-page experience.
What We Built
A Vite + React (TypeScript) SPA using the Mantine component library (including Carousel) for the UI, TanStack/React Query and @react-query-firebase/firestore + react-firebase-hooks for realtime, cache-aware data access against Firestore, and React Hook Form with Zod resolvers for validated forms. Routing is handled by React Router, styling combines Mantine with Tailwind utilities, and react-calendly embeds appointment booking directly into the flow so users can schedule sessions without leaving the app.
Technologies & Approach
TypeScript throughout, Vite for tooling, and Firebase/Firestore as the realtime backend, a serverless setup that keeps the team focused on product UX rather than infrastructure. React Query provides predictable data fetching and caching, while Zod-validated forms keep financial inputs clean.
Outcome / Impact
Delivered a complete, well-structured consumer fintech frontend with realtime data and embedded scheduling, demonstrating the studio’s ability to ship finance-grade UIs on a lean serverless stack.
Capabilities Demonstrated
- Consumer fintech frontend with a modern component system (Mantine)
- Realtime, cache-aware Firestore data access via React Query
- Validated, form-heavy UX (React Hook Form + Zod)
- Embedded scheduling/booking (Calendly) within product flows
- Serverless Firebase architecture