J0John De Joya

12 / Web

demo

Smart Expense Visualizer

An interactive expense-tracking dashboard with Chart.js visualization — try it live right in the browser.

Live Demo — Data stays in your browser

Smart Expense Visualizer / interface
Smart Expense Visualizer interface screenshot
Selected interface view · full-resolution source
01 / Context

The problem it addresses

Makes tracking expenses visual and immediate. The whole app runs client-side in the browser, so anyone can try it live without any backend, database, or setup.

02 / Build

What the project does

A browser-based expense-tracking demo using JavaScript, Tailwind CSS, and Chart.js. Add expenses, organize them by category, and watch a live pie chart update as you go. All data is persisted only in your browser via localStorage — no server or database — which makes it perfect as a hands-on portfolio demo. Includes dark/light theme, spending summary cards, custom categories, and a sortable transactions table.

03 / Demo boundary

Demo boundary

The experience is intentionally serverless. Entries stay in the current browser, making the interaction safe to explore without an account or shared database.