WealthWise

• 

  WealthWise Logo

Inspiration Managing money usually means bouncing between a banking app, a budgeting spreadsheet, and a mental list of bills that are about to come due. We wanted one place that pulls all of that together and adds a layer of intelligence on top, something that doesn't just show numbers but actually explains what they mean and nudges you toward better decisions. What it does WealthWise is an all-in-one personal finance dashboard. Users can log income and expenses, track loans and their payoff timelines, set savings goals, manage multiple accounts, and monitor recurring bills on a calendar. It calculates a financial health score based on savings rate, debt load, budget adherence, and emergency fund coverage. A "What If" simulator lets users test scenarios like getting a raise, cutting expenses, or investing monthly. There's also a Latte Factor calculator to show how small daily habits add up over decades, a money-personality quiz, and a curated reading list for building financial literacy. An AI advisor (powered by a user-supplied Gemini API key) can chat about spending patterns, evaluate whether a purchase makes sense, generate bill negotiation scripts, and give salary negotiation guidance. How we built it The entire app is a single HTML file with vanilla JavaScript, no framework overhead. State is stored per-user in localStorage, with each user's transactions, loans, goals, budgets, and settings kept in a structured object. The UI is built around a sidebar navigation system with grouped sub-tabs (Money, Planning, Insights, AI Advisor) so related tools stay organized without needing a router. Charts and breakdowns (bar charts, donut charts, progress rings) are rendered with plain SVG and CSS rather than a charting library, which kept the app lightweight. Google Sign-In is wired up through Firebase Authentication, with a demo mode fallback so the app is fully functional even without a configured Firebase project. AI features call the Gemini API directly from the browser using a key the user provides and stores locally. Challenges we ran into Keeping everything in one file while still making the navigation feel organized was tricky, especially once we had four separate feature groups each with their own sub-tabs. Building the financial health score required balancing multiple factors (savings rate, debt-to-income, budget adherence, emergency fund) into a single number that still felt meaningful. We also had to be careful with the AI features to make sure they degraded gracefully when no API key was set, instead of breaking the rest of the app. Getting the guided onboarding tour to actually navigate to real screens and highlight the correct sidebar element, rather than just showing static tooltips, took some iteration with positioning logic. Accomplishments that we're proud of We're proud that WealthWise ended up feeling like a cohesive product rather than a collection of separate tools. The financial health score, debt freedom countdown, and What If simulator give users a sense of momentum and future outlook, not just a record of past spending. We're also proud of the demo mode fallback, which means anyone can try the full app immediately without needing to set up Firebase or an API key first. What we learned We learned a lot about structuring a fairly large single-page app without a framework, and how much can be done with plain JavaScript, CSS variables, and SVG when you're deliberate about organization. We also learned how much thought goes into turning raw financial data into insights that actually feel useful and actionable, rather than just displaying numbers back at the user. What's next for WealthWise Next steps include real bank account syncing through an API like Plaid, more robust CSV import parsing, shared/family accounts, push notifications for upcoming bills, and expanding the AI advisor to support multiple model providers beyond Gemini.

Built With

• css
• html
• javascript