WalletWise

Upload your portfolio to WalletWise and get AI educational insights: plain-English price drivers, stock metrics, risk analysis, and AI Q&A to grow your investing IQ.

Comment

Inspiration

As a new investor myself, I often wondered what influenced the movement of stocks, and wanted something that understood my portfolio. I set out to build something that combined real data with plain English coaching, so I created walletwise, a financial dashboard that walks you through your own holdings and answers your questions on the spot.

What it does

  • Portfolio Upload & AI Q&A: Drag & drop a CSV of symbol, shares to instantly see total value, gain/loss, asset allocation and today’s top performers. You then receive an AI generated investor personality, a AI portfolio overview, and a Q&A chatbot which answers any financial question in the context of you portfolio
  • Single-Stock View: Click any ticker (or enter one manually) to view a 30-day price chart, key fundamentals, and AI breakdown of what is influencing the stock's weekly movement as well as risk highlights.

How I built it

  • Next.js 13 + TypeScript with the App Router for clean server/client separation.
  • Tailwind CSS for a Wealthsimple-inspired theme and responsive cards.
  • yahoo-finance2 to fetch price, summaryDetail and key statistics, plus 1-month historical candles.
  • Perplexity Sonar API via a small askSonar() wrapper—JSON prompts, error handling, and parsing answers & citations.
  • Recharts to render the pie-chart and line chart, and custom React components for upload, loading/error states and the Q&A box.

Challenges I ran into

  • JSON parsing errors: used system prompts with very specific formatting requirements so I can properly parse Sonar's answer.
  • Malformed CSV rows (extra commas or missing values): handled by trimming, type-checking and showing clear error messages.
  • Yahoo-finance rate-limit notices: suppressed the one-time survey prompt and added retry logic.
  • Dynamic API routes in Next.js: learned to await params properly and separate server vs. client code.

Accomplishments I’m proud of

  • Shipping a full end-to-end real-world app in under two weeks.
  • Seamlessly integrating live market data with AI reasoning in a robust, type-safe codebase.
  • Crafting a clean, intuitive UI that novice investors can pick up in seconds.
  • Built something genuinely useful and intuitive that I would use myself

What I learned

  • The ins and outs of Next.js Server Components vs. Client Components.
  • How to design and consume REST-style API routes in TypeScript.
  • Prompt engineering and parsing for a production-grade AI integration.
  • Debugging hydration errors, rate limits, and CSV edge cases.

What’s next for WalletWise

  • User accounts & persistence (Supabase): save multiple portfolios and share read-only links.
  • Real-time alerts: notifications when holdings move beyond custom thresholds.
  • Technical indicators: moving-average crossover or RSI flags alongside AI insights.
  • Multi-turn conversations: let users follow up without losing context.
  • Gathering user feedback, polishing UX, and opening the repo for community contributions.

Built With

Share this project:

Updates