piggyBank

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #typescript #android #machine-learning #linux #docker #macos #java #vue #awesome-list #pytorch #security

(★ 7)

Browser-local private wealth dashboard — React + Vite + TS, static-deployable, bring-your-own-key Claude concierge

piggyBank 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# PiggyBank — Private Wealth Dashboard

A polished, **fully client-side** wealth-management dashboard. Create an account
in your browser, add your holdings, and track your net worth over time — no
server, no database, nothing leaves your device. Deploys anywhere static
(Netlify, Vercel, Cloudflare Pages, GitHub Pages).

Built with **React 18 + Vite + TypeScript** from the `PiggyBank.dc.html` Claude
Design prototype.

## How it works

- **Accounts are browser-local.** Sign up / sign in with an email + password.
  Users are stored in `localStorage` with salted SHA-256 password hashes (via
  WebCrypto). Multiple accounts can coexist on one browser. This is
  convenience-grade separation on a single device — **not** server-grade auth;
  anyone with access to the browser profile can read `localStorage`.
- **Your portfolio is your data.** The app ships with **zero dummy data**. Every
  holding you add — stocks, mutual funds, real estate, insurance, cash, crypto,
  gold — is stored per-account in `localStorage`. Add, edit, and delete freely.
- **Honest history.** As you use the app it records a **daily net-worth
  snapshot** per account. The portfolio chart starts short and grows from real
  data — no synthetic curves. Empty and single-point states are handled
  gracefully.
- **AI concierge (Kiki), bring-your-own-key.** Paste your own Anthropic API key
  in the concierge panel to get **live Claude answers** grounded in your
  holdings — called **directly from the browser**, so the key only ever goes to
  `api.anthropic.com` and is stored only on your device. Without a key, Kiki
  falls back to smart, portfolio-aware built-in replies.

## Features

- Sign-in / sign-up gate, per-account data, sign-out
- Net-worth overview with real snapshot history chart (5 ranges, hover tooltip),
  allocation donut, per-class cards, activity feed, 3 dashboard layouts
- Per-class tables (Stocks, Funds, Cash, Crypto, Gold) with inline **edit** and
  **delete**
- Real Estate cards with drag-and-drop photos (persisted per account); Insurance
  cards
- ⌘K command palette, Add/Edit-holding modal, INR/USD toggle, light/dark theme,
  responsive mobile bottom nav
- Empty states everywhere guiding you to add your first holding

## Getting started

```bash
npm install
npm run dev        # http://localhost:5173
```

That's it — no environment variables, no backend. The AI concierge key is
entered in the app UI, per account, at runtime.

## Build

```bash
npm run build      # tsc + vite build → ./dist
npm run preview    # serve the built site locally
```

## Deploy to Netlify

`netlify.toml` is already configured (`build = npm run build`, `publish = dist`,
SPA redirect).

**Git-linked (recommended):** In Netlify → **Add new site → Import an existing
project → GitHub**, pick this repo. Netlify reads `netlify.toml`, so build
settings need no changes. Every push to the default branch redeploys.

**Manual, no CLI:** run `npm run build` and drag the `dist/` folder onto
<https://app.netlify.com/drop>.

**CLI:** `npx netlify deploy --prod --dir=dist` (after `npx netlify login`).

No environment variables are required on Netlify — the app is fully static and
users supply their own Anthropic key in-app.

## Project layout

```
netlify.toml               Netlify build + SPA redirect config
index.html                 Vite entry
src/
  main.tsx, App.tsx        Entry + auth gate + screen router
  index.css                Design tokens, globals, animations (ported verbatim)
  types.ts                 Shared types
  data/portfolio.ts        Category definitions + currency constant
  lib/
    auth.ts                Browser-local accounts (WebCrypto hashing)
    history.ts             Snapshot recording + range stats
    concierge.ts           Kiki: browser-direct Claude call + local fallback
    format, icons, nav     Formatting, icon set, nav metadata
  store/store.tsx          App state, per-account persistence, derived selectors
  components/
    AuthScreen, Sidebar, Header, BottomNav, CommandPalette,
    AddHoldingModal, ImageSlot
    charts/                NetWorthChart, AllocationDonut, Sparkline
    screens/               Overview, AssetTable, RealEstate, Insurance, Concierge
    ui/Hover.tsx           hover-style helper
```

## Notes

- Custom SVG charts are hand-rolled — no chart library.
- The concierge uses the Anthropic browser SDK with `dangerouslyAllowBrowser`
  because the key is the **user's own**, entered knowingly, and never proxied.
  Anthropic supports browser CORS for the Messages API, so no server is needed.
- Clearing browser site data removes accounts, holdings, photos, and keys.

piggyBank

piggyBank 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

piggyBank

piggyBank 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README